Thinking about Refreshing the Firefox Icon

[patrickjdempsey]

Stephen's fox with Anthony's globe looks like a clear win to me... in fact.. it a lot of sense to me that two different artists would come up with the best rendering of the two dramatically different elements. A few reflections on the globe of the fox and you guys would have something REALLY sharp.

[phiw13]

The fur is definitively much better in the Stephen Horlander version. The globe still looks a bit , hmm, kitsh ? Too much gloss, too much web2.0.

--
Aside:, in that refresh I surely hope we don't lose the bomb icon. I just plain love it.

[toods]

Yes Stephen Horlander's version is the one I prefer. I like the clear shades on the fox body and loss of the 'webs' on the tail.

Is it possible to present these variants in this thread as a short series of images in various pixel sizes, for example done to 16x16, 32x32 and 48x48?. Also at a later stage, a mock of the 'about' and 'aboutCredits' images would be really nice to see.

Bill.

[Stifu]

One more vote for Stephen's version, it's quite nice.
I'd like to see what it looks like in 32x32 size, compared to the current icon.

[toods]

I've just made a quick attempt at scaling down 'Stephen's' version to 16x16 and 32x32. My view is that at those resolutions the general shape is more retained than in the present version if you understand what I mean. My only concern is that, after scaling down, the dark part of the globe that shows through the tail on the far right side appears rather prominent.

Bill.

[Gusar]

I will second what patrickjdempsey said: Stephen's fox and Anthony's globe. I especially like the flames on Stephen's fox.

[toods]

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

Is there any more progress to brief us on yet?.

Bill.

[faaborg]

Is there any more progress to brief us on yet?.

Yep, coming shortly. I've been pushing the boundaries of the "or so" part of 24 hours due to some work on the reviewer's guide (people are getting on airplanes to talk to journalists so that became a hard deadline and took priority).

Is it possible to present these variants in this thread as a short series of images in various pixel sizes, for example down to 16x16, 32x32 and 48x48?

We haven't been publishing smaller sizes yet because just doing an automatic image resize wouldn't really be representative of what the icon will ultimately end up looking like at smaller resolutions. Usually a lot of manual work goes into creating the smaller versions, as specific details are removed prior to the resize, and the designer focuses on pixel hinting by hand so the small icon appears really sharp. As a side note, this is also why the idea of "hey let's do all our in-product icons in SVG!" ends up being a little more complicated than it initially sounds. The issue isn't just correctly scaling and rendering (with equally good pixel hinting) but also being able to scale the level of detail in the artwork itself. Building an icon format that did all of those things simultaneously would however be unbelievably cool.

The current and old design should be displayed next to each other for comparison purposes. (requested a lot)

I don't want to influence people through direct comparison. If people compare each concept to the way the Firefox appears in their mind (which varies), I think the feedback becomes more valuable.

May I know why the "earth" is not continentally correct?

In the comments of my blog Jakub (who does awesome work on our Linux theme's icons) asks a related question:

The fact that FF is localized to 70+ languages doesn’t really justify depicting an alien planet instead of being distinctively Earth. I really dislike this fake political correctness.

Can I automatically forward you the hate mail I would receive if were forced to pick a particular planetary rotation? Other companies are usually centric to where their headquarters happens to be located (for example, Cupertino, or Redmond), but even that doesn't work well for Mozilla I guess my overall point is that even my immediate colleagues would hate me! We sometimes refer to the "alien planet" as "planet mozilla" if that makes the concept more appealing (not to be confused with the otherwise identically named planet mozilla). In terms of other fun facts, Daniel Burka also mentioned awhile ago that the original continent configuration was loosely based on pangea.

Has it evolved that greatly since 2004 that there is now an ice cap? Is an ice age approaching?

In theory don't most life supporting planets have arctic poles? Anyway, it's probably best not to read too much into fluctuations with this aspect of the design. In terms of the impending ice age, the planet does appear kind of blueish (green doesn't go that well with orange).

I think at this point, maybe what needs to be done is a model... I don't mean a complicated 3D computer model, but a simple model of clay. Look at the clay model and think about what happens in real space.

I would actually really love to have a full 3D model of the icon, since that would enable us to also do really cool stuff like creating wallpaper images of the tail cradling planet mozilla from the perspective of a satellite:

It looks like someone punched the fox in the snout because now it’s shorter and fatter (Why was that changed at all?).

Longer snouts end up looking kind of weasely, we also gave the cheek under the snout a bit of a trim to clean him up a little.

Maybe now is the time to correct a misconception about what Firefox is. It is *not* fire and fox, as drawed in the icon. Firefox is an animal on its own.

The Red Panda is an unbelievably cute animal (especially the Toby at the Houston Zoo) but in terms of the icon we are basically presenting a separate mythical creature called the Firefox. I'll write a lot more about this in my next post. Either way, Red Panda or mythical creature, the presentation still isn't meant to be just fire + fox (or a fox on fire).

There should be various types of icon, like are various sking under each OS.

This is kind of a tricky problem, because we want to have a consistent and recognizable brand, we want to send the clear message that Firefox is nearly an identical product on every platform (we ship nearly the same code base on all platforms simultaneously), and also because launching 3 or 4 new icons at the same time is logistically difficult (which platform goes on the t-shirts? we can't play favorites.) However, I've previously been a very strong advocate of visual integration with the operating system, so this is something that I want us to think about in the future. But I think the differences between platforms would have to be really subtle, basically lighting and texture, with extremely consistent shape.

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.

I know Mozilla China is has created the localized (and very cute) artwork for G-Fox, and Mozilla Japan of course has the extremely popular Foxkeh.



Although in both cases these characters are used in promotional materials as opposed to the branding of the browser itself. Trademark implications aside, I wonder if that is the correct balance, or if having localized brands in certain regions wouldn't be a more effective strategy to increase market share. On the downside localized brands in certain regions would somewhat undermine global brand recognition (the Golden Arches argument, although I'm hesitant to use that particular example). Even if we want to stay with a globally consistent application icon, I think it is important that we ensure that the new revision at least maintains the same level of cuteness as previous versions of the Firefox icon. More on this in the next post.

[faaborg]

Note: this is a draft icon rendering for Firefox 3.5, subsequent iterations will be posted every 24 hours or so. Also note that while these drafts appear with numbers and in a chronological order, each draft experiments with a variety of different ideas as we try things out to see what they look like. It's better not to think of these as a formal sequence, but rather a series of experimentations to explore the overall design space.



The icon is being rendered by Anthony Piraino at the Iconfactory. The design is based on a conceptual sketch by Jon Hicks, as well as a few rendered aspects (nose, parts of the planet).

Modified Creative Direction

Since this post is a little late, I can also provide the creative direction that we just sent out. I have to admit that doing a design project at both this level of magnitude and also at this level of transparency is kind of uncommon. So everyone please remember that these types of discussions that involve going back and forth with various options is in fact totally normal and expected part of the design process. Posting all of the information in close to real time and exposing a set of drafts that each have pros and cons publicly however isn't often a normal part of the design process.

The email below provides a good window into creative process for working on an icon like this, and also provides an update on where we want to take the design.

Anthony,
Sorry for the delay in getting our feedback to you, a few totally unrelated things cropped up that took away some of my time. Here it is:

Parts of the design that are pretty much ready to lock down

-Head and arm
-Fur texture
-Shadow between fox and globe
-Globe (with the exception that the lower light source might need to be removed)

Parts of the design that are still in flux

-Tail: overall shape, color, and texture

I should note that the fact that we haven't yet nailed the tail design is entirely our fault for not setting the correct direction. You've been doing an awesome job of implementing our feedback. Unfortunately we've only been able to figure out what works well retroactively, looking at the various iterations as they come in. So far we've been able to explore a few different approaches to what the tail could be physically made of (not just this with set, but also earlier with Jon Hicks concepts), and only after viewing the renders have we realized what the actual implications are.

For instance, some of the early tail wrapping work (particularly Hicks concept render 2008 r4) attempted to craft the tail literally out of flames. Being a "Firefox" I thought it might be a good idea, but it ended up not really working:



The overall problem with this iteration was that the transparency and flames weaving in and out of each other ended up giving the Firefox a sort of "hot rod" feel, transforming an otherwise cute creature towards the direction of a custom muscle car paint job. Also we quickly realized that things that are literally on fire don't usually come across as being cuddly, safe, or protective.

Looking back at the initial Firefox icon, the simplified flames had the advantage of presenting Firefox not necessarily as a "fox on fire" but really more fundamentally as a mythical creature that hugs the earth. For instance, if you take nearly the same treatment of the Firefox's tail, paint it blue and flip it upside down, the same general shape is recast as feathers:



So I think the way people mentally interpreted the tail, even perhaps subconsciously, was not that it was "on fire" as much as it was a part of the creature. And this mythical creature was generally thought of as being soft and cuddly and protective (partly due to the nature of the product itself, but to a very large extent due to the icon's direct portrayal of these character traits).

So jumping to Iteration 4, a lot of the feedback we've been getting was initially perplexing me. Some of the terms I was hearing on the direction we set was that it felt "menacing," "evil," or "not cute enough." One person phrased it as "a little aggro." I also noticed having a similar reaction myself, despite having specified the direction. The icon in iteration 4 is visually really powerful, but I feel the slightest emotion of fear when looking at it. Initially I couldn't put my finger on why, but I think the reason ends up coming back to referencing parts of various animals and things that seem instinctually threatening. Looking through flickr I pulled a few pictures of things that were softly triggering in my brain.



(sorry, my brain too often falls back to John Howe illustrations)

Here is how those subtle connotations potentially overlay onto the tail in iteration 4:



So I think the solution to the tail, and our new design direction, is to try to create a form that is light, wispy, thin, furry, and cradling. Imagine the tail as a living part of the mythical creature Firefox, and that the Firefox is soft and friendly, but also stoic and regal.



Stephen Horlander's concept has been getting some positive comments from our community, and we believe a significant component of that is because people are afraid of change, and the icon is a little less of a departure from the previous shipping version. But also the tail in his concept exhibits a few properties that I think directly tie into expressing the personality of the creature:



Again my apologies for initially messing up the direction. Failing to think about the fundamental personality and character traits of the Firefox was a huge gaffe on my part, and was really something I should have figured out in the creative brief. Let me know if I can provide any additional detail. Overall I think we are making really great progress considering how many other things we've been able to basically lock down.

I'm really looking forward to seeing the next iteration,
-Alex

[Stifu]

I know Mozilla China is has created the localized (and very cute) artwork for G-Fox, and Mozilla Japan of course has the extremely popular Foxkeh.

And don't forget Taiwan's Foxmosa.

[supernova_00]

The last two posts were great Alex! The only thing that I think looks weird (and has always), is that the tail appears to be the same size as the head and body. Actually, with the curving around the earth it would be bigger than the head. There is no transition in size from the body to the tail. I would also like to see rounder ears and an eye or at least a portion of the eye area.

[Stifu]

The only thing that I think looks weird (and has always), is that the tail appears to be the same size as the head and body. Actually, with the curving around the earth it would be bigger than the head.

I disagree. Keeping things as is may not be realistic, but it makes the logo balanced / symmetric, which is a good thing.

[Bluefang]

Stephen Horlander's concept has been getting some positive comments from our community, and we believe a significant component of that is because people are afraid of change, and the icon is a little less of a departure from the previous shipping version. But also the tail in his concept exhibits a few properties that I think directly tie into expressing the personality of the creature:

http://people.mozilla.com/~faaborg/file ... erTail.png

I really don't think people are against changing the design, I just think they were opposed to the earlier proposals. For example, I see 3 major problems with the wavy/webbed/haloed tail designs by Anthony Piraino and Jon Hicks:
- Looked like mange, and IMHO, just plain ugly
- Made the tail the busiest part of the image, which both draws attention and then keeps it as the viewer works to interpret it
- Disrupted the overall circular flow of the image

While the Horlander design does keep with the more traditional spiky design, I think the image you posted pretty much sums up why I like it the best.

Also, I think it's worth while to point out that the latest iteration from Anthony Piraino stylistically looks nearly identical to the past Firefox icons, aside from the slightly different fur texture and shape of the tail. So I don't think the "people are afraid of change" really holds up. I still much prefer the design by Horlander.

[k3m3]

Why not make the entire fox spouting flames instead of just the tail?

[patrickjdempsey]

"I have to admit that doing a design project at both this level of magnitude and also at this level of transparency is kind of uncommon."

- But, amazingly awesome to watch unfold Alex! Anyone who has ever attempted to do artwork for a public arena can appreciate the amount of back and forth and inputs from various concerns. It can be daunting, but it's really cool to be able to witness those fluctuations and evolutions. I do think there may be some people scared of change, but I think most people who are designers or at least have a good appreciation for design trends can recognize an aging logo when they see one. And having this level of transparency and even open input through this forum and your blog really is a nice feeling. Companies change their brand logos all the time in this day and age, and so often I wonder what the heck they were thinking, or how small the room of deciders really was. Great work and good luck!