Despite often being deprioritised (or forgotten about altogether) by web developers, the lowly favicon (a contraction of favourite icon) is becoming an increasingly important aspect of brand identity on the web.
Usually measuring just 16 by 16 pixels, favicons are the small logos that appear next to the website names in your browser's list of favourites/bookmarks. Chances are they are also displayed in your browser's address bar, before the URL of the site.
Another place you will see them is on the tabs of tabbed web browsers such as Opera. Mozilla Firefox, and Internet Explorer 7 which, collectively, now account for over a third of the browser market (according TheCounter.com).
The rise of Web 2.0 has also contributed to the favicon's higher profile as a growing number of social bookmarking sites, syndication tools and API-enabled mashups make use of favicons when linking to other sites. In particular, the increasing use of favicon-based buttons on blogs encouraging visitors to summit to del.icio.us, Digg, Furl, Reddit, Stumble, Technorati etc. (see AddThis).
So, how are web developers responding to the increased attention on the favicon? Representing your brand effectively in just 256 pixels is undoubtedly an enormous design challenge and four main approaches seem to have emerged:
1.) Attempting to replicate the site's logo in it's entirety
This approach stands or falls on the complexity of your site's logo, which clearly favours those companies who designed their logo with favicons in mind (e.g. Blogger 
, del.ico.us 
, Digg 
). Long-established brands which pre-date the web have more of a conundrum - should they attempt to shrink their existing brand down to 16 x 16 pixels (e.g. BBC 
, NPR 
) or should they design a new logo with this new branding space in mind? Companies who have already successfully distilled their brands down to a simple image (e.g. Apple 
, Nike 
, Smile 
) have a clear advantage in this area.
2.) Abstracting the initial letter(s) from your site brand
Championed by Amazon (
), Google (
) and Yahoo! (
) this approach has become increasingly commonplace. The challenge here is to ensure your design treatment is distinct enough from all the other sites using the same letter, or in some cases, a different letter - compare Blogger () and easyJet (
). Amazon and Yahoo!'s favicons are particularly successful as they incorporate another brand element besides the font (an arrow and an exclamation mark, respectively).
3.) Creating a custom graphic which attempts to convey the site's USP
More in line with the design conventions of desktop icons, this approach sidesteps the challenges of representing your site brand, but introduces the equally daunting task of effectively conveying the site's purpose in just 256 pixels. More successful examples include Lego (
) and Threadless (
).
4.) Creating an abstract image
The least common approach, its main advantage is that in a world dominated by reduced logos and initial letters, abstract images stand out by virtue of being different. The downside is that is that it swims against the tide of received wisdom regarding branding and the resulting images are often indistinct or unmemorable (see this site's favicon, which I really must do something about). Interestingly, Flickr recently abandoned the initial letter approach (
) in favour of something more abstract (
).
Whichever approach you adopt, it's worth remembering that your favicon is your (potentially permanent) brand presence on the limited and valuable real estate of people's browsers and across the wider web. The cardinal sin of favicons is not having one at all, which just looks lazy. Not having a favicon is like not having a sign promoting your store ahead of the turn off from the main road, when all your competitors have one. Yes, visitors will still find your site via search engines and weblinks and some may bookmark it. But they won't have the visual reminder of your brand when they scan their bookmarks/tabs, deciding where to visit.
In spite of this, a surprising number of high-profile sites are currently without favicons. I was so disappointed by the absence of a favicon for Empire that I created one (
) and emailed it to the developers who I'm pleased to see have since put it live.
So, what lies ahead for the humble favicon? Well, larger sizes (32 x 32 pixels is increasingly common) and alternative image formats both seem inevitable as does a growing prominence on the mobile platform. I'm hoping use of animated favicons don't become more widespread as gratuitous animation usually pisses people off.
To finish off, below is an A-Z montage of initial letter favicons. First person to name all 26 gets a Cadbury's Cream Egg (click through to Flickr to annotate).
Subscribe to RSS feed
4 comments:
Hi Dan. This is an interesting post. The whole issue of identity on the web is getting very interesting. With social networking, there could be a real impetus behind everyone getting their own personal favican - then there'd be millions of the things!
You might be interested in this Favicon Gallery at favicon battle. 50.000+ favicons as voted for by the internet community. Good source for inspiration or to submit your own favicon.
Square Icons are dull, those patterns after letters are unimaginative, and unrecognizable thingies are just plain ugly. The lack of good design by the big companies is really surprising, Google being the worst. Anyway, if you happen to want to create an animated favicon which is active on Netscape and Firefox, while maintaining your static effort on Internet Explorer, you can find the details, along with the correct Head Code, here : http://www.cathetel.com/favicon.htm
Post a Comment