A Blast From The Past - The Return Of The Favicon

Favicons, you remember them, the little icons seen next to he URL on browsers such as Safari and Firefox. If you use Internet Explorer then you may have noticed them in your favourites folder. In short, they are tiny icons which help you to identify websites. Heres an example of the Attitude Design favicon:

So why are we drawing your attention to Favicons - well, it was a huge fad about 5 years ago to add a Favicon to any website that came along. Designers loved them and they became the norm. However, over recent years, it seems to us, that this trend has dampened down a little. People are no longer adding them to their websites - even experienced web designers.

"Why"? You may ask "we're not sure" we reply, "maybe we are just getting lazy, maybe the knowledge of how to add Favicons is being lost in the mists of time - or maybe we are choosing not to spend time on a small and almost insignificant icon but are rather concentrating on other, more important issues".

If you have the mindset of the first of these reasons - laziness is not a good business reason for not including a favicon! If the second - read on below to find out how to add a Favicon (it really isn't that hard), if the third, let us say a few words in the Favicons defence - because someone's got to stick up for them - they're only small after all (16px x 16px poor things)...

As graphic designers, we see Favicons as very important - especially when considering a brand. The more you can get your logo or colours in front of somebody, the more chance you will have of that person remembering your company. Favicons help to do this. Favicons also help to distinguish a company over their competitors - lets assume we are designing a site for an office suppliers. Our consumers may have a favourites folder containing 3-4 called "Office Supplies" links. When they select this folder - if our website has a Favicon and the competition does not, their eyes will be drawn to our link and therefore we have more of a chance of getting some sales. Also they may recognise the brand colour over the competitors colours and select yours - there is less chance of confusion and a competitor getting a visit their site accidentally. Lastly we would like to add that Favicons are a mark of well thought out design. "The devils in the detail" they say - and so it is.

So ladies and gents, lets put a Favicon in our next website design - you never know, it may increase your chances of success...

How do I add a Favicon?

Its easy, really it is. All you do is open Photoshop - create a new file, about 50px by 50px, then drag in your clients logo and colour it up. Save for web as a gif to your desktop. Now go to chami.com and use their very helpful and free online Favicon service. You choose your picture from your desktop and this website resizes it and - it so you can download it.

Next download the Favicon and then upload it to the root file of your website.

On the pages you wish it to appear add the following code in thesection of the page:

That's it! Simple - you have no excuses now.

So keep an eye for the return of the Favicon... Any comments most welcome...


I have seen Favicons popping up everywhere again these days. Although I only recently learned how to add them in, I had always wondered if it was something new that browsers could do. I guess now I know its not. All my friends keep bugging me, asking me how to do them .. So I am going to direct them here. Nice article.