What is a favicon and why you need it

07 November 2011

A favicon is a tiny graphic that appears in the left of the browser address bar, and in most browsers on the tab next to your site’s name. It might seem like a relatively insignificant little image that represents more effort than it is worth, but it can make a huge difference to a website owner.

In an age of tabbed browsing, short attention spans and an almost infinite universe of potential sources of information and products, your favicon can be the one thing that differentiates you from the competition. It makes your website, when reduced to one of many tabs at the top of a visitor’s browser.

Effect on Visitor Psychology

When you have over half a dozen tabs open, to the point where the visitor can only see a small portion of the name of your site on its tab, a favicon makes all the difference in the world. It makes your website unique in the row of bite-size information chunks at the top of a browser - but most importantly, it makes the visitor reluctant to close that tab unless they are certain they have gotten all of the information or use out of that tab that they can.

Brand Recognition and Visitor Behavior

More importantly, it creates brand recognition. If your favicon is easily recognizable, it creates a strong association between that image, and what your website offers. People associate images with concepts much more easily than they associate words or names with them - especially in an age of information overload.

Let’s take an example: say you own a site that sells high-end running shoes. These are not the kind of products people simply buy on a whim, after clicking the first link that comes up on Google. They will compare different brands, different styles, and different websites with their various offerings, shipping arrangements, reputation and prices. Let’s say that today they’re just browsing, but they’ll make a decision on the weekend.

What the visitor will do is Google “Running Shoes”, and open the first five or so websites. From there they will open up a number of different product tabs, and probably save a few of them as bookmarks in a folder created specially for that. If they are disorganized, they will just simply bookmark them all in the same folder.

A few days later when they want to make a purchasing decision, they will open that folder and look at all of the saved bookmarks. They won’t remember the names of the websites they had open, or even the names of the shoes they were looking at. But they will remember the favicons of the sites they thought looked good. They will click on these first, and use them to narrow down their options. This is where having a memorable favicon will pay off massively.

How to Create a Favicon

You can create a favicon easily yourself in an image editor, but the easiest way to do it is to first create a small image (usually 16x16 or 32x32) and then upload it to a favicon creation tool, such as http://favicon.co.uk. The reason for this is that it saves it perfectly as a .ico file (the only format recognized by all browsers as a favicon).
Once you’ve created your favicon file, all you need to do is upload it to the root folder of your website, and be sure to save it as “favicon.ico”. You can, in the code of your website, specify a different file name, but this is the easiest way to ensure that all browsers will pick it up.

In order to see it, you will likely have to clear your cache and browsing history first (or use a Chrome Incognito or another anonymous browser).