Often overlooked, the favicon is a key brand area for a web site. It’s a big design challenge for a little space. A 16×16 pixel square that appears next the web address in your browser. Designing for such a tiny space can be tricky. It can even be controversial.
Fairly recently Google changed their favicon and instantly ignited a heated online discussion. Their choice of icon was a lowercase “g”, where it had previously been an uppercase “G”. The attention it received was something that Google probably didn’t envisage. Maybe it was that initial shock that prompted them to invite all-and-sundry to submit their ideas. As they put in their blog entry on the subject, “By no means is the one you’re seeing our favicon final; it was a first step to a more unified set of icons.” Sounds to me like a design cop-out. I wish they would have had the confidence to say, “this is our new favicon. It’s good huh?”. I personally liked this new device. You can’t argue that the lowercase “g” is one of the most beautiful serif letterforms in the alphabet. It’s much better (and more suited to a small form) than the comparatively ugly uppercase “G” from the Google logo that used to adorn the favicon.
However, in the last few days Google have revealed a new favicon (as seen at the head of this article). It is based on a user-submitted idea which they have tweaked a little. In my opinion, their tweaked version is not as good as the original idea by André Resende. Whatever you think about the new favicon or the one it replaced, you have to ask why did so many actually care about what amounts to a piece of design that takes up less space than your little fingernail? I know I enjoy creating these tiny pieces of design. It’s almost the online equivalent of the stamp project that you almost certainly did at college or university. So maybe that’s what caused such a high level of interest from the design community. That and the sense of ownership that fans of Google seem to have. I wonder, if Yahoo were to change their favicon, if anyone would notice or care? But what makes a good favicon?
Sometimes the favicon is a no-brainer. You have a logo that will simply scale and slot in. This doesn’t always mean it is done well though… surprisingly. Here are some successful executions.
All of these are perfect little clones of the relevant brand’s large-scale logo.
Sometimes you have to be a bit more creative with your favicon. Maybe your logo is of non-uniform dimensions or is a logotype or maybe you don’t even have one. A square, especially a particularly small one, just isn’t going to accommodate it. A common approach is to use a single element from the brand that does fit or to create a new, yet related icon.
And for whatever reason, these just don’t work.
There’s something a little clumsy and unfamiliar with the Microsoft favicon. It’s vaguely related to their logo but certainly wouldn’t be recognisable out of context which, for a brand as big as them, is problematic. Adobe haven’t done a great job either. Why try and include an obviously illegible “Adobe” tag-line. They could have just used the “A” device alone. That would have worked a treat. The BBC logo doesn’t really work at favicon size. It’s a shame that you can’t animate a favicon; a cycling B - B - C could look pretty good.
With all things considered, the favicon isn’t the most important thing in the great list of things to do for your web site, but it should definitely be on that list, if only for your own enjoyment.
Your Voice
What do you think? Fill in the form below to submit any discussion points you like to raise and we'll do our best to get a debate going, in the immortal words of Bob Hoskins, it's good to talk.
Nice post - I think part of the reason people are so sensitive to Google’s favicon changes is that it’s such a frequently visited website, and particularly using a tabbed browser like Firefox, where the favicon appears on each tab, you end up looking at it a lot. I’m not a fan of the new one… I don’t like those colours together. Not the end of the world though… (oh - I’ve just noticed - DA needs a Favicon, would you care to do the honours?)
By the way, “It’s a shame that you can’t animate a favicon” - actually, you can use an animated GIF. I’ve seen some pretty cool ones, but can’t remember any of them - the first example I could find is http://www.pod1.com/ though. Pretty neat, but again could get annoying if you’ve got a lot of tabs open and they’re all animating.
Very interesting post. I’m not sure I like google’s new icon as an end product. I do favor the lowercase “g” over the uppercase “G”. You also do bring up a good point about the level of discussion the favicon has made, in relation to the sense of ownership in the Google brand. I trust the same reaction would take place with brands that identify so much with consumers. Could you think of some other brands that would fall in this category?
-MP
@Tom
I agree about the colours on the new Google favicon. The red and green really buzz next to each other.
That’s true about the animated favicons, however they aren’t supported by all browsers. (That pod1 favicon just shows blank in Safari). I do agree that that is a very good execution of one. Very smooth.
@MP
It’s tricky to think of another brand that would get that much attention over the design of a favicon. I think there needs to be a high proportion of either geeks or designers in the user-base. The first one that comes to mind that could rustle up a similar level of interest is You Tube. In fact, they could do with a new favicon in my opinion. They have a similar problem to the Adobe one I highlighted above.
I really like the google favicon by Lucian E. Marin as seen here
http://1.bp.blogspot.com/_7ZYqYi4xigk/SWfBJtH93_I/AAAAAAAACOk/TSM_XMc3eoI/s1600-h/Favicon_Lucian.png
First of it has a nice symmetry to it which for me sites better that the akward lowercase g arrangement.
Also it solves the colour issue by having them sit apart as a pose to jostling next to each other. You mentioned the colour buzzing against each other, well that isn’t really an issue in this iteration.
Lastly having the colours sit as small triangles in the corner strikes me as a neat metaphor for wayfinding having some ressemblence to the points of a compass, which really is the core function of google.
Great post - very interesting.
http://www.skysports.com have an animated favicon - its ok, personally not a fan of animating these images. I would hate to have several tabs open each with animating favicons - how distracting would that be!! It all seems to be design for the sake of design, would much prefer to see standardization and hope the TAG guys over at w3c pull their finger out and sort out what the favicon should really do (and/or represent). I also think as a collective we should also help define what it is before we start encroaching bad design on to the browser - and yes, I think the google example is very poor.
http://news.bbc.co.uk/1/hi/magazine/7839744.stm
—
Nice idea Dan, your justification is spot on.
I just have fundamental issues with the four primary colours anyway in terms of the Google branding — it just looks so f*cking tacky, especially when you see it all meshed together in application like the Favicon. However, being the most powerful global brand, with a value of $86,057m (according to optimor Millward Brown), I’m not sure they’d see it as an issue!
—
Aha, Gohttp://googleblog.blogspot.com/2009/01/googles-new-favicon.html