Mac Firefox Icon Update

I just checked in new revisions of the back, forward, reload and stop icons for Mac Firefox by icon wizard Stephen Horlander. These new buttons attempt to address the critics of the previous set, and they share their shapes with the Windows Firefox theme. We went with a more colorful toolbar this time instead of making the nav icons all blue. This will probably be the final major change before Firefox 1.0 is released.


[ Update: Download the latest Firefox nightly build to see the new icons ]

56 thoughts on “Mac Firefox Icon Update”

  1. Kevin and Stephen, you guys do excellent work!

    As a long time Firefox and Thunderbird user I deeply appreciate all the hours you two have put in making my two favorite apps look better and better.

    Thanks and keep up the good work, can’t wait to see winstripe on TB.

  2. Kevin,

    I was wondering if there will be new icons for the options pane (when I say “new” I mean, different than the ones that are present with 20040809 and earlier). If I had to guess, I’d say there would be, since the toolbar downloads icon is quite different than the options pane download icon, but I was just wondering if you would mind commenting on that.

    Thanks so much for volunteering your time and effort to help Firefox change the face of the web!

  3. Oh, you mean the download icon on the Windows theme. Yeah, I think that’s on Stephen’s to do list somewhere 🙂

    I believe the reason why we changed the download icon on Windows is to get a bit more variety and depth into the icon set to blend into Windows XP. I’m not sure if the shape will come over to the Mac theme anytime soon.

  4. Why not Windows? Windows doesn’t even really have a theme. This one looks better than Windows because of the coloring(ours looks “dirty and grainy”) where tha Mac looks shiny and smooth. Especially the Home button as compared to our ugly one.

  5. I can’t see how the Windows theme looks “dirty and grainy”. Care to elaborate? The Windows theme uses colors from the Windows XP color palette.

    The highlighting on the Mac icons are consistent with the Mac you say, smooth and shiny. It really would not be appropriate on Windows. I’m sure it would look good 🙂 But it would move farther away from the Windows style than we want to be.

  6. Will we see these new icons in tomorrow’s nightly build? I got 20040809 and I don’t see these. Sorry if I’m missing something obvious, I’m new to the Firefox game.

  7. I made the checkin on 08/09/2004 10:11am PST, so they should be in the next nightly builds. Probably tomorrow.

  8. *cough*SPOTLIGHT*cough*… it looks like the bookmarks bar from 2.x – I LIKES IT!

  9. Will this be made available for people who don’t use Fx nightlies? Or has the theme specification changed again?

  10. Question:

    Are you planning on updating preview.png once the aforementioned final round of changes is made? It’s currently out of sync with reality.

  11. Tony, yeah the background on the bookmarks toolbar is inspired by Tiger 🙂 It isn’t in the nightlies yet but it will be in the next few days.

    Jeff, thanks for reminding me about the preview image! I’ll put it on the list!

  12. Looks pretty darn snazzy, keep up the good work. I love the new look on the bookmarks toolbar though. I like the old stop icon/arrows more though, since it had a really mac feel to it, but I’ll get used to the new ones.

  13. The one striking difference between the Mac icons and the Windows icons is the proportion white-space versus icon-space. The Mac version looks much more balanced than the Windows version, because it does not waste valuable toolbar-estate with far too much white-space.

    See for instance the mini drop-down-list-arrows (the black triangles) besides the forward/back buttons: in the Mac version these little black triangles are actually visually connected to the big green buttons, whereas the Windows version exhibits a very big (and ugly!) gap between the green buttons and the black triangles.

    I think Winstripe will become much more acceptable once its proportions have been brought in line with the Pinstripe theme.

  14. Aww man, does this mean Winstripe users are stuck with the 3D house? The 2D house looks so much better and is way more readable.

  15. “I can’t see how the Windows theme looks “dirty and grainy”. Care to elaborate? The Windows theme uses colors from the Windows XP color palette.”

    I can see it has XP colors, but the “fading” looks a bit grainy. And Reload has those shadows which make it look less visible and a dirty mess. It’s not the same on Mac since Mac’s “fading” is smooth.

    “The highlighting on the Mac icons are consistent with the Mac you say, smooth and shiny. It really would not be appropriate on Windows. I’m sure it would look good 🙂 But it would move farther away from the Windows style than we want to be.”

    I thought Mac was supposed to be smooth shiny and glossy(like glass or something covered with plastic wrap). I don’t think there really is no Windows style, except for Microsoft’s products.

  16. Could you please modify the back/forward arrows to be the same proportions as the Windows version?

    They look a tad elongated. Apart from that, very nice 🙂

  17. Also, how about some updated status bar icons? Livemark and the lock icons look a bit shoddy in comparison.

  18. Okay, let’s debate this intelligently. I think the 2D house shape is much more iconic and instantly readable as a house than the 3D one, which .

    There’s also that annoying weird blue pixel right above the door of Mr. 3D House… I see in higher res versions of the icon that it’s a window, but it becomes a 2×2 pixel bright blue DOT at normal Firefox bar size, and it doesn’t make the icon look very snappy.

    3D House is too much like the IE6 house, and 2D House is a distinctive positive difference that people will notice very soon after installing Firefox.

  19. Err, crap message got mangled…

    “much more iconic and instantly readable as a house than the 3D one, which a person with poor vision might confuse for some other 3D blockish shape.”

    All the other icons would read even as B&W silhouettes, but 3D House just looks like a random polygon.

  20. Very nice. I think that a 2D house would be more consistent with the Mac version, but then again maybe IE6 has a 3D home icon. These two artistic geniuses have said before that fitting in with an OS appearance takes precedence over cross platform consistency and IE6 is the app people would most likely switch to Firefox from. I don’t have any PCs here to check what IE6 icons look like so I don’t know for sure. Keep up the good work guys; you are most definitely headed in the right direction (and even followed through with the suggestions I emailed you).

  21. Blu, there are Microsoft XP guidelines you can see here. Maybe you think the icons look better because they are bigger. The screenshot above shows 32×32 icons which is default on Mac. Windows uses 24×24 icons as the default so we can’t squeeze as much detail in.

    The 3D house is only for the Windows version. The Apple Icon Guidelines say that toolbar icons should be a straight on perspective with a shadow underneath. The Windows guidelines encourage you to use perspective to get that Fun ‘n Bouncy XP feel.

  22. Great job! 2D house looks much better than the 3D one.

    The reason why I think the house icon in Mac looks far better than the 3D Windows version, is that it goes along nicely (ie more balanced) with the rest of the 2D icons.

    Also the Windows house icon looks washed-out. Yellow roof doesn’t look very dynamic as say, a red one.

    Keep up the good work guys!

  23. Windows XP icon guidelines say:

    “Not all objects work well at 16 × 16 at an angle. The following objects are usually shown in a straight-on manner:

    * Document icons
    * Icons that are symbols (such as warning or information icons)
    * Icons that are single objects (such as the magnifying glass)”

    You could argue the house falls on either side of this distinction. It’s a single object rather than the “CD + box” or “Paper document + clock” compound objects that exhibit the 3/4 view. And it is so simple as to almost be considered a symbol – draw a nondescript 5-sided shape with squared bottom and a peaked roof and most people will tell you “that’s a house”. That’s pretty darn iconic.

    I understand the desire to conform to the target OS’s interface specifications, but two points:

    A) Microsoft themselves do not always adhere rigidly to that document, and there are plenty of very successful applications (MS and otherwise) that don’t take great pains to integrate themselves with the overall look of the OS. They work because they are internally consistent and while the user is working in the program they are having a pleasant experience. Quite personally when I see vestiges of the XP interface that affects my experience *negatively*, but I’m curmudgeony like that.

    B) Interface guidelines are formal specifications but you have to acknowledge that their visual (ie not functional) aspects can be and are influenced by FASHION. Apple has plenty of good UI design habits but they didn’t choose the shiny glass / clear plastic aesthetic because it was somehow better for usability or functionality, they chose it because it was a hot, trendy meme that would appeal to their trend-following consumers. The Windows XP interface is an even later-to-the-bandwagon riff on that clear-plastic-y aesthetic, and as such it’s anything but written in stone. It’s fashion, and by breaking ranks with it you can make a unique, positive fashion statement.

    Firefox has the opportunity to steal a lot of market share from the web browser status quo, and thus has a chance to set trends rather than follow them. It has a chance to distinguish itself, rather than the usual OSS design mentality (such as there is one) which is to copy what MS/Apple are doing and blend in. Which there are faint whiffs of in the current design of Winstripe.

    Man, all this hand-wringing over a little house.

    Keep up the great work on the themes!

  24. Good post JP 🙂

    Both Apple and Microsoft violate their guidelines on occasion. Apple’s (paraphrased) “Only use metal windows when the program simulates a physical device” guideline is not exactly followed by Apple themselves. But I think that’s fine. They are guidelines and not absolute rules.

    I take your point that the default theme could be a little more bold stylistically. The Mozilla theme API allows all sorts of neat visual possibilities. But Firefox has to appeal to *all* web surfers, not just power users. Firefox has compelling features to get people to switch away from the dominant browser. It also requires a simple, friendly interface that will feel comfortable to new users as well as experts. The way to develop that comfort level is to follow best practices of icon design in general and be consistent with each operating system’s experience.

    So regarding the “OSS design mentality”, when you’re developing an application that is a guest on an OS, you should use that OS as your design guide. A certain sameness is inevitable. We’ve tried to put forth some unique personality and brand within that context and I think we have been mostly successful so far.

    If you want an example of an inventive and well-designed theme that steps out of OS conventions, have a look at Charamel.

  25. Love the new icons and personal bookmark bar gradient, every update pinstripe gets better and better. I hope you update the mouse rollover look in the personal bookmark bar too, it could definitely use an updated look!

  26. Hmm what would you suggest for the bookmark rollover, Will? I did change it so it has a blue/purpleish color when you click the buttons.

  27. I really like the way this theme is going – keep up the good work!

    What I was wondering is whether it would be possible to have a slight change made to the bookmark groups on the bookmarks toolbar.

    If you take a look at this image, comparing Safari and Firefox, the Firefox bookmarks seem a little too tight together. There is a little screen real estate lost with the Safari implementation – but it only works out at about 3 vertical pixels per bookmark. And for that loss, you get a big usability improvement: it makes it easier to locate the bookmark you want, thanks to the bigger text and improved vertical spacing, and there’s a bigger target area for the mouse.

    I know ‘power users’ say they like dense interfaces, with lots of functionality, but studies prove this is a false economy. The smaller the target, and the more things to look at per unit area of the display, the longer it takes to perform simple tasks.

    I know it’s a petty thing, bookmark spacing, but I really think we can ace the whole interface if we’re looking at things in this kind of detail.

  28. Well, you could copy the rollover effect in Mail in Tiger; the text turns white and the rollover color is slightly lighter than what pinestripe is right now. Then, clicking the bookmark makes the oval slightly darker and the text is still white. Inverting the text color to white (instead of black) would be a bit more “OS X like” (think lists) and more visually appealing IMHO. 🙂 Good luck, can’t wait to see the new theme!

  29. Great comparison Allen. I hadn’t looked at the menus in a while. I added some vertical padding and it does work better. I had meant to get back to the menus eventually. Thanks for reminding me.

  30. Looking great on OS X 🙂

    If you’re planning to keep the 2d house icon, it might be worth experimenting with making it yellower. I suggest that simply to maintain the basic/primary colour theme, which I think works so well on Windows.

  31. The reason the house is the colour it is on OS-X is because it near-enough matches the Apple “home” icon used in Finder.

    I know there’s a constant trade-off between cross-platform consistency and OS consistency, but I think it really makes sense for most things to be driven by the OS. After all, before Safari, IE was the biggest browser on the Mac (I think!) and the biggest browser on Windows – but there was absolutely no cross-platform consistency except for the “e” logo.

    I think it essentially comes down to this question: what is the most important thing when a user sits down at their computer to use Firefox for the first time: A) that it integrates itself into the look of the OS, creating a consistent UI and a transparent browsing experience – or – B) that they instantly recognise the programme to be Firefox because they’ve used it on another OS, thus allowing them to browse without hesitation.

    I’m a big advocate of solid, consistent UI, so I strongly believe that A) is the right option. Firefox should be a good citizen. Look at a program like RealPlayer for an example of one that feels uncomfortable due to its similar look across OSes. The problem with option B) above is that you are assuming any given user is to use Firefox across multiple OSes. Generally speaking, this will not be the case. Most users, sadly, will just use Windows.

    As it is, the move to Firefox on another OS would hardly be jarring – most icons are very similar (back, forward, stop, reload being the most used anyway). My parents – who are the best test subjects on earth for this kind of thing – had absolutely no trouble transferring between Firefox on Windows and the Mac.

    Another reason I’m conscious of this issue is that if we were going for absolute cross-platform consistency, we all know that Windows would be the system around which the theme would be primarily based, and all other OSes would come a poor second. Or we’d end up with some non-native theme like Mozilla Modern.

    I think Kevin and Stephen are getting it spot-on.

  32. Very well put Allen. To further what you said a bit, at my mom’s (most of the time) I use OS X, but at my dad’s they have XP. I could use Seamonkey on both and have an almost identical (the biggest difference being the location of the menu bar) interface with Modern, but I use Firefox instead. I just don’t find it very pleasing on either platform (not to mention I don’t need all it’s features). All that’s needed is some more work on Winstripe (I’m sure it will mature greatly over time), and I assume that is already being done.

  33. Actually, if you read my post more carefully you’ll note that I didn’t suggest the colour for cross-platform consistency 🙂 I suggested it because associating each icon with a different basic/primary colour (or icon-set, with respect to the forward/back arrows), works really well (which just happens to be evidenced on Windows). If I was preaching cross-platform consistency then I would have pushed for the 3-d house.

    For all I know the house might look sucky when made yellower. I just said it would be worth experimenting with.

  34. The new icons are in.

    One problem with the live bookmark icon, Kevin: Firefox also parses Atom feeds. For example, my blog on WordPress has an Atom feed, which is accessible via the status bar button, just the RSS feed (but is called Atom in the menu).

  35. Hm. I’m not seeing any “gradient” on the bookmarks bar – can someone take a screenshot and post it somewhere?

    Oh, and Kevin, would it be possible to create an actual folder icon for bookmarks, instead of using the same globe icon for both folders and individual bookmarks?

    Great work!

  36. Jeff, one can argue that because RSS is so widespread that it is almost a generic term for news feeds. Apple is doing the same thing with Safari RSS. Using the orange rectangle which people might already be familiar with makes sense too, rather than coming up with a new image which might not have as much meaning.

    Neil, the bookmark bar should look like the partial screenshot I posted above. But you have to download the latest 0.9 nightly build to see it. Also I just checked in the fix for the bookmark menu folder icon 🙂 Thanks for the heads up.

  37. So now in addition to Atom not being RSS and RSS not being RSS, RSS is RSS and RSS is Atom. Hilarious. Should I laugh or hit my head against a wall?

  38. We could just go with the generic XML, but “XML” could mean anything. At least RSS has some meaning associated with it. Or we could make up a simple of some kind to represent news feeds. It isn’t really an easy problem.

  39. After rereading my last post I saw something that could cause it to be misread and thought I should clarify. When I said “I just don’t find it very pleasing on either platform (not to mention I don’t need all it’s features).” I was referring to Seamonkey, not Firefox.

    I am really, really liking Livemark; I use it for news and blogs such as this one. Plus, I used it as an excuse to really streamline my bookmarks and that’s always good. I wonder if Livemark were a Safari feature, would it be called “Smart Bookmarks?”

  40. True, but are they in bookmark form? I like having them integrated with my bookmarks the way they are now; I stole Kevin’s “Feeds” folder idea because it’s really useful. Plus, Tiger Safari has that RSS search box cluttering up the UI. It really should have a search more like Firefox or Camino.

  41. Are there any plans to revive the old 0.8 Pinstripe theme? As an OS X user, I loved that, and while Winstripe is well done for what it is, the XP style feels icky to me.

  42. Yes, look deep within the *comments* of some of the other posts about the new Pinstripe on the Mac for “0.8/0.9 hybrid” or something to that effect.

  43. Just a heads-up that the folder icon still isn’t appearing in the latest nightlies – I still see the globe for everything.

  44. Still waiting for the promised graphite theme. Still installing that 08/09 hybrid with every new version. Sigh.

  45. macskeeball–thanks…I couldn’t find any such comments. But I appreciate the grounds for optimism anyway.

  46. I think this is excellent. I think one of the most important things to making Firefox a well accepted and used broswer across all platforms is to have it look and feel the same across all platforms, since end users like to feel comfortable with something they know. My only question is: were the faint stipples that make up a major part of the Aqua UI phased out for this theme? I can’t tell from the picture, but I think that is one of the more important visual features on a Mac platform, since it makes the program seem more Mac-like.

  47. Updates!

    side from the 10.3.5 update, Apple have seeded a wee small Tiger update, which takes Mac OS X 10.4 from build 8A162 to build 8A171.

    And the Mac OS X FireFox icons have been updated to Revision 0.2, which can be seen on Kevin Gerich’s web log. It als…

Comments are closed.