Being interested in graphic design, I am very pleased with the new logo shipping with the recently released Mozilla Firefox 3.5. I downloaded the large 512x version of the icon from the Mozilla Wiki for a good look at, and I ended up thinking it was the best icon I had seen ever! For the reason of sharing my enthusiasm, I would like to give you, dear reader, a short history and detail of the Firefox logo…
For those who don’t know what I am talking about (“Firefox? Is that something to do with facebook or a new kind of computer? Huh?), I will give a very short description of Firefox.
Mozilla Firefox is the most popular internet Browser in the world next to Internet Explorer. Firefox is the best browser in the world, next to no browser. Some people say that Internet Explorer is better than Firefox because it so much more popular. This is not true, IE is more popular because it ships with the world’s most popular Operating System.
Firefox is Open Source, meaning that anyone can change it, and improve it. The fact that anyone can improve on it explains why Firefox is so much better than closed source browsers like IE, it runs on People Power. It is always being improved 24/7 by people all across the globe. It is available for Windows, Linux, and Mac. Go to this link for a better description and reason to get it, from Mozilla
The History of the Logo
Click for larger view
The flaming phoenix was the original icon for the Mozilla Phoenix browser, a replacement browser for the bloated Mozilla Suite.The naming was related to the rebirth of the Mozilla browser, hence the name Phoenix.The logo was considered reasonably good artwork in 2002, when it was created.
The name Phoenix was changed to Firebird following issues with trademarks in 2003. Firebird’s icon was the same as Phoenix’s, as no change was needed. Phoenix and Firebird conjure the same imagery, a fiery bird. Firebird was caught in a lawsuit because of copyright issues relating to the name, so it was changed to Firefox in 2004. The phoenix represents the rebirth of the Mozilla browser, so it shows the phoenix in a state of burning.
The Firefox icon was inspired by a bible story picture book. In the story about Samson, Samson had revenge against the Philistines who remarried his wife, by tying pairs of foxes together with flaming ropes and letting them go in the cornfields of the Philistines. The cornfields were burnt, and Samson was avenged. The logo was influenced by a painting of the scene found in the storybook.
Firefox 0.8 released with a new icon created by web developers silverorange, and rendered by Jon Hicks.
“I had an email from a chap called Steven Garrity, who works for Silverorange…He asked if I wouldlike to join a recently created Mozilla branding team, with the immediate aim of producing a new logo identity for the Firebird browser, soon to be renamed Firefox.” “A firefox is actually a cute red panda, but it didn’t really conjure up the right imagery [for the browser's name]” “The final chosen design was a concept from Daniel Burka and sketched by Stephen Desroches, which I then rendered using Fireworks MX.”
My interpretion of the logo
The two primary elements of the chosen logo were the firefox (red panda with tail on fire or tail of fire?), and the globe/planet Mozilla.
The firefox represents you or the browser viewing the internet, or browsing or surfing or whatever. The face is turned away and towards the globe to emphasise what the browser is for; viewing the internet. The tail of fire is a continuance of the flames in the phoenix icon, and also a dimissal of the “cute red panda” aspect of the firefox. The fact the the tail is so long, and wraps around the globe represents the fact that browser is capable of reading the whole Internet (hopefully, this is true!) The size of the firefox compared to the globe emphasises the capability and power of the browser. The colours used are a combination colours of a red panda, a red fox, and fire.
The globe has been described as Planet Mozilla. It has generic continents on its surface. The icon refresh team for the Shiretoko version tell us why:
“The use of generic continents on ‘planet Mozilla’: we localize to 70 langauges and don’t want to portray any form of geographic preference”
from the Creative Brief for the Shiretoko Refresh.
It represents the world and the Internet, everything that Firefox can view, basically. The colours are light blue, for the sea, and dark blue for the continents (or vice versa, I don’t know). The inclusion of green for the continents would have made the logo ugly. Two many colours make a messy and complicated looking icon.
The chosen icon, and and the minor update on it follows:
Firefox 0.8
Firefox icon updated
The logo needed updating after the initial release of Firefox 0.8 as people started using larger versions of the logo for promotional products. The flaws on the original logo started to surface, looking worse as people made it larger.
I’m the lead of the Mozilla Visual Identity Team.
Our tasks is to improve the quality and consistency of the visual elements of the Mozilla products. Icons/logos, default themes, and other visual aspects of the software are all on our radar….
Our first major piece of work was to create a new logo and icon set for the Firefox browser, which was newly renamed (formerly Firebird)….
I asked Joh Hicks to help out after having seen the custom icons he did for Camino based on The Great Wave by Katsushika Hokusai. This is possibly the best icon/icon-set I’ve ever seen — it is a work of art. We’re lucky to have Jon working on the visuals with us (thanks Jon!).
From Steven Garrity’s blog post Branding Mozilla: Towards Firefox 1.0, written in 2004.
So Jon Hicks re-rendered the logo as a vector graphic (SVG) a few months later. He also changed a few details. He posts on the topic of updating here.
Key design changes:
Gloss on Planet Mozilla. This is what makes the icon fit in with all those other super high polish icons on your dock (for Mac users) and to make the open source browser look high quality, worthy of your majesty’s use. Also higher contrast on the globe.
Brighter colours on the firefox and more detailed fur. Jon Hicks did a good job, agree?
This icon became a well known logo as Firefox grew more popular, appearing on large posters and hundreds of t-shirts.
Shiretoko Refresh
This is the latest Icon, and the one I am so excited about! I even created a wallpaper celebrating it. Yes, dear reader, this logo is the reason why this rave post was written in the first place!
As Firefox’s development team were working on version 3.1, so many new features and so many improvements were made that version 3.1 was changed to version 3.5. Firefox v3.5 was now 2 times faster than Firefox 3, and 10 times as fast as Firefox 2! This was a drastic release! So the team decided to call the next version Firefox 3.5 to emphasise the changes that made it better. The logo had needed updating for a while, so the need for a new logo was addressed for 3.5
The Wikipedia article “History of Mozilla Firefox” describes why the browser needed rebranding:
- New logo (3.5)
“It has often been argued that free software is typically designed only by programmers — rather than graphic designers or usability specialists — and that it frequently suffers from poor icon and GUI design and lacks a strong visual identity. The animal shown in the logo is a stylized fox, although “firefox” is considered to be a common name for the Red Panda. The panda, according to Hicks, “didn’t really conjure up the right imagery”, besides not being widely known.[9] The logo was chosen for the purpose of making an impression, while not shouting out with overdone artwork. The logo had to stand out in the user’s mind, be easy for others to remember and stand out while not causing too much distraction when among other icons. It was expected to be the final logo for the product.”
So Mozilla decided to get a more modern logo. Alex Faaborg of User Experience Design at Mozilla gives an explanation about the decision:
From the post well written post “Evolving a Product Brand”
“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.”
From the post Creative brief for the new Firefox icon
“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 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.”
And from Thinking about refreshing the Firefox icon
“…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.”
Jon Hicks, the person who created the Firefox Icon was contacted and asked to make some new concepts when Firefox 3 was being created. However, the logo project was postponed for over a year.
Kevin: Speaking of icon design, as you mentioned, you designed the now familiar icons for Firefox andThunderbird as well, but with the release of Firefox 3.5, that icon got a little bit of tweaking. I understand you had some input into those changes?
Jon: The input was that last year – actually about a year and a half ago, Mozilla asked me to work specifically on a Vista icon. The problem being that 128 pixels was the largest size Firefox icon we’d got and since that came out, we’ve now had 256 and 512 as possible and icon sizes on OSX and Vista. It was particularly for Vista that they wanted a larger, detailed icon. So we started to work on that and trying different things.
There’s a few I didn’t like about the original like the pointed fire on the tail, it didn’t look very fire-like. So I started doing sort of more of a curvy one with this. It got to this point where it was sort of waiting for a final approval; didn’t hear a thing for about a year. The next thing I know is that that’s then been called a “concept and rendering” and they’re using someone from the Iconfactory instead to do the final icon.
Kevin: Do you know the folks at the Iconfactory?
Jon: Yeah, exactly. It’s one of these things that if someone else has to do the Firefox logo, then it had better be the Iconfactory because they are the best. So if I have to give up the control of that, then it’s got to be a good one.
Kevin: So the finished icon, it has a fluffier tail, definitely. Are there any little touches about it that you like or that you were surprised to see in that finished product?
Jon: Yeah, there are a couple of things that I was surprised to see such as the globe at the top’s got very reflective. The top is quite bright and white, and I find it quite distracting. This is some feedback I gave sort of during the process that I felt this was too bright and it was taking away from the Firefox, the head itself. The eye gets drawn to it too much, but apart from that, I mean I think it’s a really nice detailed icon.
Kevin: I’m just bringing it up from my screen here and it is, yeah, just the sun is beating down on it.
Jon: Either that or it’s a big ice age so if you’re coming in the top there. That was basically my only sort of criticism. But I think they did a great job.
One reasons behind the redesign, as Alex says above, is that Firefox had just got a whole lot newer, and the icon should reflect the changes. He says that gaming pcs and sports cars rapidly evolve in appearance, and you can easily tell by looking at the design how new the gaming pc or sport car is. The older designs start looking outdated very quickly.
So Firefox’s icon really needed to avoid looking “outdated” and look more streamlined, and modern to reflect the changes within the browsers, much like the way a new sportscar has a streamlined and modern exterior to reflect on the fact that it is new and powerful.
Some time after the concept was made, Iconfactory started to work on rendering the concept. The 3.5 icon was created by artist Anthony Piraino. Here is a short list of the changes to the icon, sourced from Creative Brief for the new Firefox icon.
The Firefox 3.5 logo
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 soft fox was to look more like the real thing in terms of fur and colour. Click here for a picture which illustrates the type of fox the icon was to tend to. The glossy planet contrasts the soft fox in visual harmony.
This is the final rendering, the icon that shipped with Firefox 3.5
An improvement? Perhaps, or perhaps not, but it surely looks worthy of Firefox. I would like to congratulate everyone who helped make it, and who made constructive feedback on iterations, because this is a very beautiful example of modern icon graphic design, and a continual inspiration for me.
Key Changes
Fox: Softer textures, subtle fur details all over body, including nose. Better blending between colours on the body, less contrast on fox. Tail now wraps around the globe (3D flames), have better flame shapes. Less unnecessary yellows on tail. Better blending between fur and flames. (“Firefox. Fur and Flames!)
Planet Mozilla: The globe’s continents got recreated to prevent apparent geographical preference. The blue colours now have less contrast, so that glare on the top can look better. The top of the globe has a very glossy surface, in contrast to the soft firefox, and also to better blend in with other very glossy icons (for Mac and iPhone users, glossiness is part of life!).
Another change is the drop shadow. The previous icons looked very 2D, and the two dimensional aspects of the icons were reinforced by the shadow underneath (as if it were a round badge placed on a white table) (See older logos above). But the new icon has a small round drop shadow beneath to reinforce the 3D aspect introduced by the tail wrapping around the globe. The shadow makes a world of difference in quality!
I hope this icon is appreciated by the global community of Firefox, and also by the larger world of Internet Users as indicative of ”Power within”.
Thinking about refreshing the Firefox Icon (the Alex Faaborg blog)
also from Alex;
Creative Brief for the new Firefox Icon
Get the icons from the Mozilla Wiki
History of Mozilla Firefox (Wikipedia)
Mozilla Firefox logo – from space or from Fox?
Thanks for reading! Please tell us what you think is good/bad about the icon, and also critizise the article, please! Count how many time I wrote Firefox, and tell me off for a biased opinion, anything! 
Comments can be made below
Enjoy! And please consider getting Firefox 3.5 if you don’t already have it. (This open source WordPress blog looks better in a open source browser)
- The Google Chrome logo is neat, but too cool.
Google Chrome
I know this sounds silly, but I would actually prefer that you use Google Chrome. It is way more stable than Firefox, plus much faster, much safer, much prettier, and much simpler. It was built from scratch by the Google internet experts in September 2008, so it also has much cleaner code. (The Google branded browser is built on Chromium, which is also open source) I don’t use Firefox if I have a choice anymore (crashes too much!).
The Chrome logo sucks, although it comes in different colours; red green yellow blue, blue-grey, and canary yellow. It’s neat, but just does not look terribly attractive.