Favicons: Small but significant

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…

Address bar with Boagworld Favicon showing

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…

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. Flickr Favicon

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…

Job done!

Boagworks

Boagworld