New Firefox Icon: Concept Rendering by Stephen Horlander

Note: this is a concept icon rendering for Firefox 3.5. New and updated designs in the ongoing sequence of iterations will be posted every 24 hours or so.

The designer Stephen Horlander recently created a concept rendering of an updated Firefox icon. Stephen has been a long time member of the Mozilla community and has contributed his design talent to the Firefox 1 theme, the ubiquitous Web Feed icon, and the Firefox 3 OS X theme.

Similar to the ongoing iterations, the design is partially based on a conceptual sketch by Jon Hicks. Here is his description of the conceptual rendering:

I think fur texture is an important thing to have since the two best ways I see to freshen the icon (without losing the essence of it) are dimension and texture. I guess what I had in mind was less overall pseudo realistic fur texture and more selective enhancement. It’s hard to verbalize so I worked up what I had in mind. Basically select patches of sharp, long, subtle (maybe too subtle?) fur. Some on the tufts on his face, some around the arm area, some on the upper and lower half of where his body curves. Much like in Jon’s original concepts.

Shiretokofirefoxicon-Horlander-I1

There are definitely some aspects of this conceptual design that I think we will want to leverage in the updated icon for Firefox 3.5. As always comments and feedback are welcome and stay tuned for regular updates throughout the week.

Background Information on the Project

-Creative Brief
-Evolving a Product Brand
-Thinking about Refreshing the Firefox Icon

78 comments

  1. I like this one a lot.
    The only thing that bugs me a bit is the contrast between orange and red on the body of the fox. It’s just too strong, at least in my opinion.
    Other than that – great work.

    Something else I’d like to see is how the icon designers are going to solve the problem with small sized icons. So far the 16x/24x/32×32 Firefox icons are kinda nasty, so I suggest to try to improve those as well.

  2. Best one yet. :)

    But I don’t entirely like the globe on this one. Too bright, and a bit blurry, imo.

    Aside from that, this completely captures the feel of the previous icons. I love it!

  3. Wow, I love this concept/iteration. The tail looks more solid now and I particularly like the details in the shadows by the neck/shoulder of (fire)fox. Also glad to see at least the head of the fox is not *that* bald…

    I would be wondering why the ‘planet’ is a bit blurred now, though I still think that the ice cap doesn’t make sense with the ‘fire’ of the logo.

  4. I love this tail much more. Retains the fire without it going into hot rod territory. I especially appreciate how free-flowing the beginning of the tail is (from 3-5 o’clock). However, it becomes rigid by the end of the tail, particularly the 2 points curving to the left making it not fit in as well.

  5. I like this one a lot, although the shadow seems a bit odd, as if ithe world was semi transparent.

  6. This adds more bubble highlighting to the top of the globe, when the focus should be on the fox. The tail layout is better but it looks bleached out near the tips/top. The poor little guy’s left ear looks injured.

    I might grow to like the 3-D tail wrap and the deep red mid-body.

    It’s hard to improve on such a great icon!

  7. I understand why the yellow was de-emphasized in the tail (it doesn’t fit in the “color palate”), but I do kind of miss it.

    Since it seems you can’t please everybody with the globe, have you considered rendering a flat blue sphere? :)

  8. Wow. This definitely has the right color choices. I really like the flames, although they’re not fire-like, they just fit. I did prefer Iteration 2’s furriness and blending of the tail into the fox. Also, the continents here seem a bit blurry. But I’m just nitpicking. Overall, I think it’s great.

  9. The colors work really well here. I like the globe bright, not dark like the last iteration. The fox’s colors look too similar to the current icons, I’d look into changing that.

  10. I think this one is great. I much prefer the spiky tail to the hot-rod tail.

    I agree with C and Lim Chee Aun that the blur on the globe detracts from this draft.

  11. Oh my god!
    It’s very good!
    It’s better than the original design too!

  12. I definitely like this the best so far, nice job! The fox looks great! The only problem I have with it is the globe, I think it’s a little too shiny. Tone that done a smidge and it’ll be perfect.

  13. I love the new tail, but not the over-illuminated globe.

  14. Same as we always say “security/privacy first”, I think “easy/safe to use” or “feel comfortable” are more important than “fast/cool browser” or “new/powerful platform”. (cool? robots on the shiretoko firstrun pages are negative example)
    I have heard no favorable comment for new logo so far in japan, since current (fx3) logo looks much cuter.
    Please keep the logo looks *cute*, not only cool. Especially children and women tend to try/keep using cute things. As far as I talked/worked with non-geek students, not a few people (at least in Japan) start using Firefox when they find cute logo on their desktop.

  15. I was a little worried the past few days but this is going straight into the right direction.

    Good work.

  16. The icon itself is great, but it’s just way too bright!

  17. Wow, nicely done!
    I can say that the fox (and its tail) are actual improvements over the current Firefox logo but not too much of a departure from it which is a good thing. Really sweet work. The lighting on the fox’s snout (especially on the top of it) makes perfect sense. Nice touch.

    Now since the post’s title didn’t read “The New Firefox Logo”, I’ll assume that it’s still cool to offer some constructive critiquing. I’d say that the fox and tail are very close to being done with the exception of…
    The left ear just doesn’t make sense. I like the gradient and shading of it, and it should have some considering that it’s on the other side of the head and the fox’s fur is in front of it, but perhaps it should be made to look more similiar to the right one by curling it in towards the globe and add the same details to it that the right one has if you can do so without them looking like horns.
    The top of the fox’s head is flat.
    The drop shadow at the bottom is a very good start and it gives the logo more depth and dimension, but since the light is hitting the globe from above, the shadow should be at 6 o’clock, without color, and darker (I wish that I always practiced what I preached with that). Hold a flashlight over a spherical object like a baseball that is placed on a flat surface (or a ball under a spotlight) and you’ll see what I mean. And while we’re at the bottom, perhaps the bottom of the fox’s body should be blended so that it flows more as one piece. It currently looks divided and almost as if it is sitting on a base of sorts.

    And now the globe. The land masses are ok but the snow cap just isn’t cutting it. If you do happen to remove it (and I hope that happens), then you may want to bring the top land masses closer together to close the gap a bit that is left behind from the snow.
    The globe colors are ok, and I hope that I’m using the correct terminology, but I think that there should be more stops added to the overall gradient to provide smoother transitioning between the gradient colors and from light to dark. Even though I know better, it looks like (basically) only two colors are being used whereas the current Firefox globe’s gradient colors appears to be more numerous and go from something like a cyan-ish type color to a deep dark blue.

    The outer glow at the top of the globe detracts from the fine and sharp details of the logo.
    Finally (ya, I know), the globe’s gloss/shine/light reflection should fade from full opacity at the top of the gloss to full transparency at the bottom of it. That doesn’t always apply but it does here because again the light is coming from above and light is brightest at the point where it hits an object then that light scatters and fades. If the light was hitting the logo dead on at the center, then it would be different.

    I sincerely appreciate the opportunity to participate in and contribute to these discussions. Welcoming in product end users and listening to them is something that I really love about Mozilla and a rarity in the corporate world.

    Great work with the logo. Keep it up and I’ll be one of the first to buy the newest t-shirt with it on it.

  18. More appealing than the previous one (the previous iteration of the updated icon) by far. I really didn’t like the bright orange (over-saturated) in the previous one.

  19. Thomas Stache

    I like this one _much_ better then the previous “iteration 2″, because of the more symmetric orange of the fox (the other was awfully dark on the left side, and bright on the right side) and the toned-down fire tail. Iteration 2 was the worst for me, like an extreme variant to test the boundaries…

  20. Definitely a marked improvement over the previous iterations! I’ll try and pitch with some suggestions.
    First up as others have mentioned, the globe is a bit too bright. Kinda takes away the focus from the fox. Probably a little toned down lights would be better. Shadow looks good but doesn’t fit with top lighting.
    The arm of the fox seems to be floating above the globe. Shouldn’t it be holding on to it or something? I don’t know if it’ll look better, just a doubt that I had!
    Finally the best thing about this iteration is the gradients between dark and light oranges. That aspect is sort of missing near the right ear. Probably the head of the fox could be a slightly darker orange so there is some contrast with the ear.
    Anyway it’s been great work so far. Looking forward to the final draft!

  21. Wow, this is much better than the others. by far the best one yet.

    Globe is a little too bright and shiny though – almost washed out.

  22. IMHO this is the best so far.
    I think it’s important to ave some kind of continuity between the fox and its tail, the others drafts just had something hat did not look like a tail at all.
    It’s much less changes, but I think that’s what we want.
    Congrats!
    PS. Silly thing but: Checking “Allow comment box to float next to comments” makes it impossible for me to click on the submit comment button! (Firefox 3.0.10, Mac)

  23. this is very good, in particular the tail. maybe the highlight in the globe is a bit too bright, but it’s a step in the right direction.

  24. Very good. Definite improvement, best so far. Much less glossy hot rod in the tail creates a much better blending from foxy’s tail to torso and the gaps where the planet can be seen are much more minimal but also more frequent.

    The glossing/reflections on the planet are perhaps just a tiny bit bright but otherwise, this one rocks.

    It’s definitely much more of an evolution of the current icon which is AFAIK was the brief called for.

  25. A more blue shade instead of the arctic white section at the ‘north pole’ would cap off this design as the winner. Don’t need to see any more.

    That is, of course, unless Mozilla is trying to emphasise the issue of climate change in the ‘fox logo? In that case the arctic white north pole stays.

  26. It seems quite a bit fresher and more modern than the original, very well done. The tail grabs my attention more than the head, though, and I don’t think that’s a good thing.

    Does it work in small resolutions too?

  27. I love this one, rather than previous ones … the globe looks too shiny though.

  28. I’d still like each iteration to be shown next to the current shipping icon for comparison. This is the closest I could find, is there a bigger one?

    http://mxr.mozilla.org/mozilla-central/source/other-licenses/branding/firefox/mozicon128.png

    Neither this nor the last iteration have the bright yellows at the end of the tail which is a shame. I think this is a bit too bright too, and that the globe is too blurry. I like the 3D encompassing effect though.

  29. I’m missing the eyes.

  30. Wow! I link this!

  31. Definitely the best one so far. Only, the globe is a bit too bright. Other than that it is perfect.
    On a related note, please improve the 16×16 and 32×32 icons – perhaps you could provide renderings of those as well. And make sure the Windows version has 256×256 icons.

  32. Why do people waste time and effort on something so superficial?

  33. Very nice. Best one yet.

  34. This is easily the best logo yet. I like the incorporation of the flames into the middle section. Great job!

  35. Yes…
    But I make the logo a few more dark…with a few of red in the flames and some feo yellow hairs…

  36. Wow, I think this is the right path.
    Maybe the globe is still a littl ebit shiny and plastic, but 3d tail owns everything.

  37. Best one yet!

  38. Here, the tail shapes are really perfect. Largely better than on the last iterations by Anthony Piraino.

    For the other parts, I don’t know what iterations (between this one and the second by A.P.) I actually prefer … The choice is difficult !

  39. “Iteration 1″ has the most attractive and professional looking planet.

    The other two, I would never even consider the planets.

  40. Like most others have said, this is the best version yet. The planet certainly needs some work, but the fox is similar to the original, but a bit more refined.

  41. I think that the right one is something between this and previous iteration. In previous iteration, there was too much deviation, but this one is too subtle – no one will notice change.

  42. y like a lot but the contrast is week an it will not look so good in a small icon, just increse the contrast a bit.

  43. Definately take the tail from this, and combine it with the darker color scheme from iteration 2.

  44. I like this fox the best, but the globe has to bright of a reflection.

    Put this fox with the first one’s globe and I think you’ll have a winner.

  45. I still like the current logo the way it is. I don’t like how the “flames” in your logo are all scruffy and facing all sorts of different directions. The current Firefox logo is more streamlined and stylish because the fur whips and curves in one direction.

    Plus the current logo is brighter and more colorful, and thus looks more like “fire.”

  46. Also, I like how the current logo has a more 3D, jewel-like appearance to the body. This new version loses some of that beveled dimensionality and shininess, and looks more like fur instead.

  47. the best concept ;)

  48. This is the best … The reflections of the globe seem to be a bit strange ^^

  49. we had a school wide poll and the overall consensus says that this is the best one.

  50. The tail feels like tree leaves hmmm…

    But I like something about it better than the other two.

    I’m not sure!

  51. Great work. The logo looks far better than the previous one. (The current one and previous concept renderings). I also must agree the globe itself looks not sharp.

    On the other hand, I think we can integrate the globe more with the fox. It doesn’t look 2 surfaces onto each other anymore, but now it looks like 2 objects without interaction.

    I think we all can agree the globe stands for the internet and the fox for the Firefox browser itself? Why don’t let the fox play with the globe? I’ve made a mockup where the fox is actually plopping in the water. (see: http://onlinedev.blogspot.com/) It’s a small subtle change, but it gives interaction between the fox and the globe (resp firefox and the internet). The mockup I’ve made is just an indication of my vision, it hasn’t the same finishing level as the concept renderings. please comment.

  52. I think that image is too light

  53. The tail here looks better than draft 2, but the blue globe looks worse. Can we have the best of both worlds?

  54. The third one is definitely the best of the first three. It’s good enough to use.

    I shall watch the future progress with considerable interest :-)

  55. Best iteration yet. I love the new, less cartoonish tail and the realistic 3D effects on both the globe and the fox. I do miss the furriness from iteration 2 – the head looks a bit bland without it. Also, the light on the globe seems too bright and makes it contrast too much with the fox, but maybe that’s just because I’ve been exposed to nothing but Tango-style icons for a while.

    Also, to make commenters’ lives easier, could you post the current icon rendered at the same size as the concept icons in future updates?

  56. I agree with the many other commenters here. I like this concept rendering much more than the previous images. I think this one blends the fur and the flames together very well.

  57. Should be less dry land and more water on the earth/globe icon. To reflect the grim future of our world due to global warming.

  58. Me gusta el “fox” (20090515), pero no el globo semitransparente. Por favor, considere un color más definido para él.

    I like the “fox” (20090515), but I don’t like the semitransparent globe. Please, consider a more defined color

  59. Wow! Impressive really! The tail looks great, this is better than the others iterations.

    Best one, surely! :D

  60. I can’t really get enthusiastic about these. I thought they should stand for a new and better Firefox experience, more features, a better engine. And then I see a nineties semi 3D logo built upon a photoshop-web- 2.0-look everyone has seen a thousand times before.
    I get the feeling somebody really likes old stuff and can’t let go.
    Of, course, you either do something different than the others, or you try to nail the current taste. Just simply being different by avoiding progress won’t give you anything than an outdated look.
    I’d vote for something clear and 2D, something that shows Firefox is a matured application.

  61. First, saturate the flames more and make the fox’s red streak more subtle. I actually liked the second fox more.

    Second, replace the gloss on the planet with whispy clouds; it makes more sense for a planet and it makes the planet more visible.

    Speaking of the planet, perhaps the land masses should more closely reflect the shapes of the Earth’s continents. Toss in fairly realistic color (perhaps drawn from satellite maps of our planet), and it’s all set to be a new icon.

  62. The fox itself looks nice in this version. Personally i would decrease the brightness on top of the globe a little bit, it looks like as if the sun burns right through the ozone hole.

    Did you think about adding a left forepaw to the fox placed above the left ear on the rim of the globe? I think that could give a nice ‘embracing’ effect.

  63. Horlander fox with 2nd Piraino globe (i prefer that one witn no so much gloss)

  64. I still don’t know why the fox looks at the earth. I think it should be focussing the user instead ….

  65. A great icon. But can this bridge all the cultures an aesthetic perceptions around the globe? Does it unobstrusively integrate in any given desktop? On Mac OS X or Gnome it doesn’t for me. Too many colours, too complex, an alien among the decent artwork. I used to change it to something more abstract.

  66. This is my favorite. I like the way the tail looks both like fur and flames.

  67. Type your comment here.

    Good Work!!

    And I think exactly like #2 said:
    The globe is too bright and blurry.

  68. Fox is looking good, but the globe is now blurred and waaaayy to reflective.

  69. Hi!
    I think there’s something with the balance in the logo, between the fox and the globe. Could the fox be transparent to some degree?
    Bent.

  70. I really think this is the best one yet. Perhaps the changes in this one compared to the current logo are too subtle, which could make the “visual indication of progress” less efficient.

    But aesthetically, I think this one takes the prize by a long shot!

  71. It just feels less distinct overall.

    First, the globe is really shiny. That white continent isn’t helping. http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines#Frequent_Mistakes

    Second, the icon has lost a lot of contrast. I still really like the colors from the 2004/Firefox 0.8 icon.

  72. Very nice! Best one yet.

  73. Hi,

    looks quite nice. The problem I have with the current (FF <= 3.0) icon is that it it is to detailed too look nice in, say, the quick launch area. An overall reduction of detail and making it “sharper” would surely be a great improvement. I think you are going into the right direction with this. Maybe if you can manage to make the fox a bit slimmer – that would surely improve it’s appeal when scaled to, say, 16×16 pixels. :-)

  74. This is too unbalanced, in my opinion (mostly in terms of color temperature which is too “hot” on Firefox itself and too “cold” on the globe).

    In any case, the high-res icons aren’t the most important ones. The rendering of 16×16 and 32×32 icons is the new cool design everybody will notice. In terms of professional icon design, it is strange that each of the bigger images is not accopmanied with smaller variants. It is well known that many people can design a 128×128 icons, but fewer can successfully scale it back to 16×16.

  75. This is by far the best, an actual improvement over the current logo. Everything else through iteration 5 sucks.

  76. I like this one too:D
    especially the light spotting on blue earth and the effects

  77. All people deserve good life and credit loans or student loan can make it much better. Because people’s freedom relies on money state.