Thinking about Refreshing the Firefox Icon

[faaborg]

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 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, and my blog at http://blog.mozilla.com/faaborg

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.

[supernova_00]

Alex, I'd also agree with one of the comments on your blog that if it isn't broke...don't fix it. I bet barely anyone even noticed the last icon change so to me it is just a waste of time when time could be spent making new icons for buttons that are needed in Firefox but currently lack the icons. It also risks making the icon not as easily recognizeable. The currently icon looks perfectly fine and does what it supposed to.

[faaborg]

Just a quick update: we've decided to move forward. I'll be using this thread to post additional details once we have them, and to collect feedback.

[patrickjdempsey]

I think it's a good idea... but I think it's also a good idea to update some of the button icons as well. While the main program icon tells us what's loading, it's the interface and it's icons that tells us that something is *new*. I think it's also important to keep in mind that a whole-sale new Firefox icon will be confusing and in general the blue and orange blob is what people look for when scanning the desktop for "internet". Giving it some spit and polish would never hurt though! I think in addition to your other logic, it's interesting to note that stylistically, when the Firefox icon came out, it looked "new" due to relatively new shading styles implemented, but now it looks dated. I think especially against the glossy and richly transparent environments of Vista, Leopard and KDE, it's showing it's age!

[faaborg]

We are now in the process of refreshing the Firefox application icon, so I wanted to address some of the initial questions we are getting, and look at some specific examples in the technology industry of product brand evolution.

Questions

Isn't a .5 release the wrong time to revise the application icon, shouldn't we wait for Firefox 4?

There aren't a whole lot of other products out there that issue .5 releases (more on this below), so as a result there isn't really a lot of precedent for what is normal, and what is surprising. The reason for this is that we've been able to work on Firefox in shorter (albeit not as short as everyone would like) iterative development cycles. But I guess the larger issue here is "is Firefox 3.5 a significant enough release to warrant a revised icon?" Looking at the long list of all of amazing things our community has been able to pull off for this release, at least my opinion is: yes, it definitely is.

Is there enough time for an organized deployment of the new icon across all of the places where it needs to be updated?

Not really. Our plan is to get the icon updated in the product itself, and on mozilla.com in places where we are specifically talking about Firefox 3.5 in time for the launch. We'll of course make images available at a range of resolutions as soon as we finalize them so people can update download buttons and other instances of the Firefox 3.5 icon during the Release Candidate phase, while we are thoroughly testing the application. There admittedly isn't as much time as everyone would like, but that's the nature of a very competitive (and exciting) marketplace.

Imagine how many wallpapers and t-shirts will be thrown out!

One doesn't need to walk more than two feet in the Mountain View office to run into the current Firefox logo, so I have a pretty visceral sense of how disruptive shipping a new icon would be. In fact, we were so worried about the logistics of doing an update around the time of launching Firefox 3 that we ultimately decided to canceled the project entirely. In retrospect, my opinion is that a gradual transition (and the logistical challenges that come with it) is worth not being frozen in time. Also, the most valuable and cherished t-shirts in our community are often the old ones, so if you have a current Firefox t-shirt, a new icon will make it retro, and give it an ever increasing nostalgia value.

Why bother fixing something that isn't broken?

In a marketplace that is focused on products that are newer, faster, lighter and shinier, design work is inherently perishable. Part of this is larger trends and fashion (for a period of time cars had fins), and part of this is simply ongoing visual change as an indication of overall progress.

The Evolution of Product Brands

Here are some examples of the visual evolution of some other major technology product brands.

Internet Explorer



The shape remains very consistent, with the evolution occurring with the texture, color and lighting.

Windows



OS X



Here we see an example of new branding for every dot release (10.1 to 10.5). Consistency is achieved primarily with the X. But even the style of the X evolves with each iteration, eventually losing serifs, and transitioning from aqua blue through jaguar spots, to two phases of brushed metal, and most recently obsidian (in space!)

SONY PlayStation



Nintendo



The brand starts with divergent Japanese and North American versions, then merges together. Nintendo as a product brand is then largely abandoned in favor of a new simpler brand.

Xbox



Brand consistency is achieved primarily with the color green, and an X that breaks through some form of surface. The notion of an inner glowing core is also consistent between versions.

In comparison to these, our strategy is going to be more in line with the more conservative approaches to product brand evolution (IE, OS X, Xbox). In the following post I'll detail the history and planned evolution of the Firefox icon.

[malliz]

So in a nutshell, you are talking evolution not revolution

[faaborg]

yeah

[malliz]

OK good idea, any brand Logo needs a refresh to grab the eye especially when it's been in use for a while.

[Stifu]

I think an updated logo would have had more impact with a x.0 release, so I'd have waited for Firefox 4.0... but I still look forward to the refreshed icon.

[faaborg]

The overall direction for the next phase of the Firefox icon's design is going to be primarily based on some conceptual sketches and renders created in 2007 by Jon Hicks, the designer who rendered the original Firefox icon.

We are now working with the very talented Iconfactory to create the final render of the icon that will be used for Firefox 3.5 (Jon is currently a senior designer at Opera, and they are incredibly lucky to have him!) The Firefox 3.5 icon is being created by the artist Anthony Piraino, and we are really fortunate to have such a talented group of people working to evolve Firefox's visual identity.

The Short Version

Here is the short version of the planned changes to the Firefox icon:

Things we are planning to maintain
1) Color
2) Overall shape and layout (specifically the head and arm)
3) Generic continents (so as not to show any form of geographic preference)

Things we are planning to modernize
1) Shape of the tail (no longer 2D)
2) Textures (soft fox, glossy earth)
3) Simplify the overall level of detail

The Long Version

Note: some of the renders have a "concept" watermark over them to help reduce confusion as they start to spread across the Web, my apologies for having to partially obfuscate the work.


View the full sized version



Feedback

In addition to the feedback we will be getting through my blog (syndicated to planet.mozilla.org), I've also started discussions at mozilla.dev.apps.firefox, mozillazine (this thread), and bugzilla for full coverage of our community.

I would also like to specifically thank the following people who provided initial feedback on the creative brief, and are also ready to provide feedback on iterations as they arrive:

Original Mozilla Visual Identity Team
Daniel Burka
Stephen DesRoches
Steven Garrity
Kevin Gerich
Jon Hicks (cc'd)
Stephen Horlander

Mike Beltzner
Paul Kim
John Slater
Tara Shahian
Madhava Enros
Aza Raskin
Jennifer Boriss
Sean Martell
Alexander Limi

[faaborg]

Note: this is a draft icon rendering for Firefox 3.5, subsequent iterations will be posted every 24 hours or so.



As explained above, the icon is being rendered by Anthony Piraino at the Iconfactory. The design is based a conceptual sketch by Jon Hicks.

[Ver Greeneyes]

Out of curiosity, is the texture on the globe meant to represent anything? I'm guessing you don't want to use the actual continents so as to avoid giving any particular area of the world a perceived preference, but in comparison to the fox the 'world map' is beginning to look increasingly unrealistic. (mainly the blotch in the middle looks too rounded)

[streetwolf]

Subtle changes but I like it.

[dao-g]

I like the direction this is going. Looks already more iconic than the 2008 concept rendering.

[El Pino]

I'd like to point out one pretty big flaw with the direction this is going.

In order to integrate the fox and the planet more, you make the tail wrap around the planet, resulting in a more three dimensional look. If you look at it as if it is a three dimensional image however it is very problematic. The fox' body rests on the planet, meaning there is no space between the fox and the planet. At the very same time the head is pointing towards the planet. In a three dimensional world, that simply is not possible (in my view at least). The nose appears in a non-existent spot (because there is no space there).

I hope you understand what I mean from the first part I wrote. If not, first look at the right part of the draft and imagine it being a sphere with the tail curled around it. Now move your heads to the left side of the image. All of a sudden it is two dimensional again, because one's mind can't construct the way this works. Basically the image now is half 2d, half 3d, which doesn't represent the more streamlined look you want to create.