Thinking about Refreshing the Firefox Icon

As we get closer to releasing Shiretoko (Firefox 3.5) we are considering that this might be a good time to update and evolve the Firefox application icon. We will likely be leveraging some conceptual work created by Jon Hicks during the development of Firefox 3, but otherwise we are just now getting started.

As the project progresses I’ll be posting to this blog the creative briefs as we send them out, draft artwork as it comes in, and I’ll be highlighting some of the feedback we are receiving from the community. I’ll also be posting regular updates to mozilla.dev.apps.firefox

But before diving too deep into the specifics of how the Firefox icon might be evolving, I would like have at least one post focusing on the higher level question of why refreshing the icon is probably a good idea.

A Visual Indication of Progress

When thinking about how people perceive a software application, I often picture the tip of an iceberg. So much of the innovation, hard work and brainpower from our development community goes into significant and important improvements that usually aren’t readily apparent to the user. This is particularly true when you are building a Web browser, since the application is fundamentally creating a platform for other applications.

Firefox 3.5 is in many ways more of a platform release than a user interface release. That’s not to say we haven’t added a lot of valuable user facing features, but the underlying changes that are shipping with Firefox 3.5 are really remarkable. This release adds support for HTML5 audio and video, downloadable fonts, geolocation, and a wealth of other great features for Web developers. But perhaps most notably Firefox 3.5’s JavaScript performance is 3 to 4 times faster than Firefox 3 thanks to a brand new engine, and 10 times faster than Firefox 2.

But all of these improvements, despite being really powerful for the development of the Web, are not exactly apparent before you even launch the application. And because of this it is perhaps too easy to unfairly assume when you download the new version that the product is stagnating, and that unlike a (admittedly very shiny) competitor, we are no longer on the bleeding edge of pushing the Web forward.

The Icon as a Chassis

Something else that I’ve been thinking a lot about recently is how effectively visual information in an exterior chassis can communicate the power of the complex system that it contains. Two examples would be the design of sports cars and the industrial design of high end gaming computers. In the case of sports cars, you can look at a still image of a car you have never seen before, and immediately assume from the air vents and arcs in the exterior body that it is in fact a really high performance vehicle. In reality it might be a concept car that doesn’t even contain an engine, and people have to push it around. Somehow the same psychological biases come into play with gaming pcs, and the ironic thing is that they aren’t even meant to move to begin with, so the extent to which they are aerodynamic is perhaps even more curious.

Another similarity between sports cars and the industrial design of high end gaming pcs is that their appearance evolves rapidly enough over time that it is obvious that the older models are starting to get really out of date.

So what do these physical chassis that contain engines and processors have to do with the Firefox icon? In many ways all three have to complete the same objective: they all have to instantly communicate to the driver/gamer/user how powerful, well built, and brand new they are. Now of course aerodynamic properties are even less relevant in the world of software, but nevertheless the OS X 10.5 dock is considerably more aerodynamic than the OS X 10.4 dock.

So to answer the question of why I think refreshing the Firefox application icon for 3.5 is worthwhile, it’s because I think we should be viewing the icon as an exterior chassis for an underlying engine that has recently undergone some really significant changes.

29 comments

  1. The current Firefox icon is known, recognized, and loved through the world, so while I understand you motivations, I’d say if it ain’t broke don’t fix it.
    Unless you’re planing some minor update kinda like the IE icon evolved between IE6 ad IE7.

  2. Unless you’re planing some minor update kinda like the IE icon evolved between IE6 ad IE7.

    Yeah I think that would in general be a good sense of the scope we are considering. Something that is clearly different but still recognizable and iconic, and doesn’t dilute the brand.

  3. More fluffy!

    Fluffy is always good.

    More curly tail and cheeks :)

    Some day, maybe not in this ‘evolution’ update, it would be great to see Firefox’s face in the logo. After all, it’s kinda rude to constantly have you back to someone!

  4. Sounds good! A visual refresh is always … refreshing! ;)

  5. It think it’s going to need to be a very careful balance.

    The Firefox icon is likely the most iconic (pun intended) Mozilla creation ever. It was the focus of SpreadFirefox since the beginning and has always had prominence in promotional efforts, hence anyone who thinks of Firefox generally has that image in it’s head.

    I’d be curious to see how this evolves and the proposals that circulate.

  6. This is a great initiative – I would think alongside the lines of the Porsche 911 (to stay within your image): Though the car is now in it’s n-th iteration and it was updated and refreshed with each release, it’s still highly recognizable as a Porsche 911. Compare the first 911 with the current release and it’s distinguishably a 911.

    I would love to see something like this happen to the Firefox logo: Refresh, make it more ‘modern’ but still keep the overall brand identity.

    Looking forward seeing the drafts! :)

  7. How about a tattoo of a bolt on the firefox? :)

    @Alex Good argument to evolve the firefox icon along with the software and the vision itself.

    Other things to consider IMO which are not clearly addressed in the current icon:

    * identification: which geo/psycho/demographic would best identify with the icon? ~ should it be more generic or specific? should the firefox be more masculine or feminine looking (or both)?

    * Mozilla/Firefox’s philosophy: how can the icon illustrate this better? (it is about ‘freedom’ as much as it is about speed, standards etc.)

  8. The icon corresponds to the Porsche logo, not the whole car. The Porsche logo hasn’t changed to look technical, has it? The Porsche logo is not specifically hi-tech either. Apple hasn’t changed its logo to look more technical, has it?

    The body corresponds to the GUI; the new personas or alternative themes can make it look more techy for those who want it, but I don’t think it should be techy by default. When a novice user opens their computer, they will gravitate to something friendly.

    I would prefer NOT to see glowing lights or other electronica or robotica signs in the icon. The appeal of the Firefox logo is partly that it is not technical — it is non-threatening, fun, friendly for novice and everyday websurfers who aren’t necessarily tech geeks. The technical is underneath, primarily to make the everyday user’s experience smoother (see Mozilla manifesto), not primarily to appeal to geeks who like bleeding edge tech gadgets. This user-experience emphasis set Firefox apart from some other browsers (Mozilla Suite first, removing many of its knobs and prefs that appealed to geeks).

    What HAS changed over time is that icon rendering has become more sophisticated with more realistic lighting effects. Currently the Firefox icon lighting looks like flat light from an overcast day. So a key part of the update should be to render the new logo using sharper lighting. Maybe this means making Firefox’s coat shinier, making the tail flames more translucent, making the water shinier, or adding translucent clouds, or making the globe a hollow ball of water with continents floating on top.

    [P.S. offtopic: A high-end computer could benefit from being aerodynamic because of all its cooling fans! A less aerodynamic case would put more strain on the fans, causing it to heat up even more. Of course most of the airflow is through it (like a jet engine), not around it. (And yes, air filters and heat sinks are not very aerodynamic for a reason. But the non-heat producing parts could be designed to guide air smoothly to where it is needed.)]

  9. Didn’t Hicksdesign put one of these together for FF3 that was never used (seen)?

  10. Ian Thomas (thelem)

    A point release seems the wrong time to change an icon. Shouldn’t that wait until 4.0?

  11. I have suggested “Powered by the beast” as title for Firefox 3, but your marketing team had some other ideas I guess… I explained exactly like you here – it would give Firefox image of the sports car…

    I developed idea a bit further, so you can make sentence on why having your beast makes you safer online, why beast brings you speed and how it could learn some tricks for you. And the end was… Your beast just loves you!

    I guess that if the icon is to be changed that way, this is really to be considered again!

  12. Sounds like a good idea (mockups would be nice)

    On a side note, I love the new additions to the Firefox nightlies (pressing on the Site Identity and Search bar buttons look a lot more button like)
    You should make a post of all the visual changes being made

  13. While comment 2 about the relatively restricted scope of this is somewhat reassuring, I’m not sure this sounds like a good time to be changing.

    First because I’d think the opposite way from your point about the type of development that has happened – changing the icon in a .5 release because otherwise the product appearance seems odd. Taking that logic further, should you not be considering a complete change of icon for an x.1 release? And maybe a change of product name for a x.x.1 update?

    Also (admittedly assuming that the schedule stays on track), finished builds of Firefox are supposed to be done in just over 2 weeks. So at this point shouldn’t you be tweaking the anti-aliasing in the 8×8 icon, rather than starting a conversation about starting the project? In fact, to get anyone seeing or testing it, wouldn’t the new icon have to have shipped with the last beta?

  14. The logo has already evolved in the past. See this post by Ken Saunders on SpreadFirefox: http://www.spreadfirefox.com/node/3556 (scroll down a bit).

    Whatever changes in the near future I hope my Firefox T-shirts won’t look too outdated ;-)

  15. “It’s very similar to the Windows Vista globe.” — 56-year-old actress

    “Where’s the Internet Explorer? … [The Firefox icon] looks like the Internet Explorer sort of mini-world — it’s what I associate Internet with.” — 21yo fashion student

    “The only reason that I knew that was a Web browser was because I recognize that logo … Otherwise I’d be looking for the Start menu or the ‘e’. A couple of my friends have it, I don’t understand why they have both. And a friend of mine at work told me Internet Explorer has been hacked so I should use this one, but I haven’t changed it … I don’t think [my Mom] would ever have seen that Firefox icon, so I don’t think she would have had a clue. Only because I’ve heard of it before…” — 24yo paralegal

    You probably had a good idea of this already, but please don’t break the icon for these people. Thanks!

  16. @gc:

    You raise a good point – the logo is the signet on the car, not the car itself.

    But your argument about the Apple logo is going into the exact opposite direction: Actually the Apple logo changed quite dramatically over time – from rainbow color (hippie style) via a somewhat metal/glass looking thing to the now stylish white logo.

    This would be a perfect example of a logo which evolved (and became more modern) over time.

    By the way – the Porsche logo evolved too… Today’s Porsche logo is much cleaner and fresher than the logo they put on their cars 20, 30 and 40 years ago.

    -Pascal

  17. Dominic Spitaler

    Don’t forget to make it 512×512 on Mac OS X finally ;)

  18. I’m certainly all for updating the logo/icon for many reasons and I agree with the rationale to do so especially since it would symbolize progress, growth, and evolution but such a significant change would best be reserved for Firefox 4.

    Firstly, it would take a massive campaign equal to if not greater than one promoting the release of Firefox 3.5 itself to get the word out about the new(er) logo or else its impact would get lost (and be wasted). Or it would steal the headlines and steer away attention from all of the new features and implementations that are new to Firefox 3.5. That would be counter productive and defeat one of your intended goals of bringing attention to the new features in Firefox 3.5.

    There’s no doubt that press and everyone with a blog would post about the new logo but I’d hate to see, “Mozilla Releases Firefox 3.5 With a New logo. Oh, and There’s Some New Features in Firefox As Well”.

    Another important thing to consider which strengthens the argument for having an independent campaign for the new logo is the fact that there are hundreds (if not more) of user created alternative Firefox logos that many people use for official representations of Firefox and a new logo (at this time) might be viewed as just another one of those. There is also the issue (that really frustrates me) where major and reputable news and media outlets use the old, original Firefox 1.0 logo whenever posting about Firefox. I’ve written a detailed post about that on Spread Firefox that clearly and definitively illustrates the differences between the old and current logos.
    http://www.spreadfirefox.com/node/3556
    If after several years of the current Fx logo being out people are still using the old one, it will take an enormous effort to get the World to use an even newer Firefox logo and dump the current one.

    There simply isn’t enough time between now and the release of Firefox 3.5 to plan, organize, and implement an effective enough campaign to address these issues and give the new logo the proper attention that it warrants.

    For now, I’d focus on the firstrun page and really hype up and design it so that users are well aware of how Firefox 3.5 is better and different then any previous versions. Don’t just add a link to the release notes page, present it in an enticing and exciting way like you would if you were redesigning the front page of Mozilla.com. Any other way would be insulting to the tens of thousands (if not more) people who have contributed to Firefox 3.5.

    I’d also hook up with Mary Colvig about creating a Firefox 3.5 What’s New workshop as part of the Firefox 3.5 Launch campaign.

    Please, save the new logo for Firefox 4. It’s marketing value would be much greater and it would allow for enough time to get a strategic marketing and awareness campaign in place.

  19. ITS marketing value as opposed to “It’s marketing value”. Any proofreaders for hire out there? :)

  20. Clearly it won’t be the first time that the icon gets updated, but I do think Ken brings up some valid concerns.

    ps. It’s strange I commented here yesterday, and referred to Ken Saunder’s Firefox Icon comparison document which he now posted here himself, but my comment has disappeared somehow.

  21. I love actual FF icon.

    But, if I’ve to think to a refresh, I imagine a less detailed icon, more stylized, smooth and solid.

  22. I really like your ideas about the visual indication of progress. It would be great to constantly evolve the Firefox icon. As for the creative direction we should take, I have a suggestion – move away from the globe! I don’t mean that you should do it instantly but emphasize the fox more. We are having a globe epidemic today just like the great swoosh epidemic of the 80s (was it?).

  23. An updated icon sounds nice. For some ideas, you may want to check out the many they have at wincustomize.com — I’ve always been partial to the ‘Firefox 2007′ icon they have there.

  24. You probably underestimate the value of Firefox brand and logo for the whole Mozilla community. For the past years, Firefox logo (as we know and love it) has been the central part of all promo campaigns, including thousands of web sites, banners, and other art. If any significant change takes place, all these works will become obsolete in a minute. Only imagine how many wallpapers and t-shirts will be thrown out!

    Therefore, although I accept all your arguments about “refreshing” the logo, I wouldn’t risk it right now. It’s the user interface, not the icon, that catches new users. Bring some useful changes to the default theme as you did in Fx3, and you’ll get many more new users than by redesigning an already established visual identity.

  25. Without Sincerity

    I would have to agree with Max Shirshin. The logo refresh can wait until the release of Firefox 4, but a refresh of the UI is needed–especially with the Vista version. Windows 7 will be coming out soon and Vista has been out since 2007 and still no Aero. What’s worse is that the background color on both the vista and windows 7 RC is the ugly purple color not used in the Operating System except in hidden, buried applications such as those in the system management tools. When I was using the Firefox 3 beta versions I had always expected that you guys would have changed the coloring to a lighter silver or the black used in the bookmarks manager before the final release as the purple makes Firefox 3 look unfinished. A priority for Firefox 3.5 should be to rectify this and finally make the Windows Vista/7 version look like a finished product.
    I don’t want to make a totally negative post so I would also like to tell you how much I love the keyhole design you created for Firefox 3. It is an absolutely genius design and I hope you will be keeping it into future versions of Firefox.
    I would, however, suggest updating the blue coloring in the back/forward keyhole buttons to the blue shades used in the Windows 7 media player play/pause button–The new blue shades they are using looks slick.

  26. And please, please make this icon 256×256 for Windows Vista and Windows 7

  27. Excellent post ! You make some brilliant points very nice realization. keep it up

  28. Your blog is really helps for my search and i really like it.. Thanks a lot..:)

  29. Very nice Site number one topic Thanks you..