Favicons: Small but significant
Posted in Design on: Thursday, October 18, 2007 by Paul Boag
Favicons are those 16 by 16 pixel graphics that appear in your address bar, bookmarks and various other places. They maybe tiny, but they are becoming increasingly important.
Its so easy to ignore favicons. They seem frivolous somehow. As if they belong in the same category as the blink tag or the splash screen. However, although they are small and nothing more than eye candy, they are far from insignificant.
There was a time where the only place favicons appeared was the address bar in your browser or possibly bookmarks…
However, recently they seem to have become much more prevalent. Many websites have taken to displaying a favicon when they link to a website. Desktop applications (such as RSS readers) have also used favicons when linking to websites…
With your favicon starting to pop you all over the place it is becoming increasingly important that it represents your website well. After all, this is probably the only graphical representation of your site somebody is going to see before actually viewing your site.
Designing your favicon
So what makes a good favicon? At its most basic level your favicon should reflect your sites brand. A favicon gives you the opportunity to represent your brand in locations where it would be impossible to place your logo. Also when users follow the link associated with your favicon they want to be reassured that they have arrived at the right location. It is therefore important for the look of your site and your favicon to reflect each other.
So working from the starting point that your favicon should be based roughly on your logo, what options are available to you. I would suggest you can take one of three approaches:
- Scale down your logo
- Crop your logo
- Create a favicon based on (but not the same as) your logo
Simply scaling down your logo is often the simplest approach. However, the effectiveness of this is dependent on the complexity of your logo. A simple logo should work well as a favicon, but a more detailed design will struggle.
In the future I suspect it will be standard practice when developing a corporate identity to consider the appearance of a favicon. However until then, if you have a complex logo, then there are two remaining options.
One option is the approach I have taken on boagworld. Instead of trying to get the whole of my rather half arsed logo to work as a favicon I have cropped and scaled a portion of it. In most cases this is a viable alternative to showing the whole thing. However, occasionally a logo defies even this approach.
Take for example the flickr logo…
Because of its reliance on typography it would be impossible to scale or crop into a favicon. Their solution to the problem is to use an icon that is two circles containing their corporate colours. 
The result still reinforces their brand identity even though it does not show their entire logo.
Getting the design of your favicon right can be tricky so you might want some inspiration. If so then have a look at Daniel Burka’s collection of favicons it might point you in the right direction.
Producing your favicon
Once you have designed your perfect favicon the next question is how do you get it onto your website. Fortunately there are a number of tools out there which can help you. The one I tend to use the most is a website that converts any image file into a favicon.ico (the file type that a browser will recognise). Simply upload your image and the website does the rest.
Now that you have your favicon.ico all you need to do is add it to your website. To do that simply upload the file to your website and add the following code (check that the path in the href is correct) to all your web pages. The code goes in the head tag at the top of your HTML…
<link rel="shortcut icon" href="favicon.ico" >
Job done!
13 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
I try to keep my favicons simple, often using nothing more than a single letter. Not keen on animated favicons.
It is impressive what some people manage to do in such a small space, I recently discovered this favicon gallery which has some nice examples.
You have not seen the development plans for Firefox 3, I presume? Well, they are ditching favicons all together.
Some security advisors suggested to Mozilla that it would be better if designers could not face a secure connection by cluttering the address bar with SSL-like favicons.
I have read speculations that Opera is considering to disable favicons by default in upcoming releases too.
It makes sence, really.
“it is becoming increasingly important that it represents your website well”
… and as such, I guess that the favicon for mine (Blog Standard Stuff, shown in the example) is indeed representative: ie, it’s kinda scruffy lookin’, just like the blog :-D
It’s worth noting for those that don’t already know that favicon’s in modern browser, FF, Safari, Opera and IE7 can be in PNG format, which gives you a much wider range of colours to work with. There actually a tutorial on my site (some time in August) for a script to switch between a PNG favicon and a ICO one depending on browsers that support it.
Following on from what Ryan was saying – I only recently realised that favicons support alpha transparencies – something that makes the icon that little more anti-aliased.
A good example of this is the clear:left favicon.
This is a great post, i have just recently redesigned my website and totally forgot about favicons, you have also inspired me to use favicons as list style images as well.
Thanks Paul!
P.S. Love the “I Hate Spam” instead of a captcha.
Adding a favicon is something I forget to do as well, till after the launch. But yeah, they are important, and they certainly add that extra touch.
PS> Also saw what Daniel was taking about, that FF3 might do away with favicons. The main reason seems to be security, to prevent sites from spoofing a secure (padlock) favicon when it’s not.
There has to be a better way around it though.
For those who might have a problem seeing their favicon in IE6 or IE7 right after they uploaded it:
Delete all temporary files and History, restart the browser and you’ll see your favicon.
Does anybody know if FF3 will takeout favicons from the bookmarks ?
Y
I thought I would toss in the reminder that many people save bookmarks / favorites to thier desktop.
Since favicons are an .ico file, you can specify multiple sizes and in fact each size can be a different version or size.
You can have a small “make it work” version for the standard 16×16, and then have a different version for 32×32 / 48×48 desktop. This also allows you to keep the 16×16 version in a backward compatible 256 color mode, and then use truecolor or XP mode for the desktop version.
After creating the sizes I want in Photoshop I import into http://www.microangelo.us for the multi icon .ico file build.
Also it should be mentioned that for a simple installation, you can just drop the .ico file into the root of the site.
Here is another FREE online tool, but it does not build multiple size sets. http://www.degraeve.com/favicon/
Hi Kevin,
Here is a free Photoshop plugin that will let you skip the export to Microangelo and save to a .ico format in Photoshop:
http://www.sibcode.com/icon-plugin/index.htm
Y
W3C prefers linking to the favicon via the attribute value rel=”icon” over simply placing a .ico file in the root directory. I briefly cover the pros and cons of each method at my site:
http://www.changecase.net/journal_jul_08.html#jul282008
Sorry, that above link should be:
http://www.changecase.net/journal_jul08.html#jul282008
Woo hoo, typos!