loving the dot com

More and more websites these days are adding what’s called a “Favicon” (or ‘Favourites Icon’) so you can identify them better. For those of you thinking “wtf is a favicon”, it’s the little picture which might be shown next to the URL in the address bar, next to the website title or as part of the tab title - depending on your web browser. For example, if you’re really lucky, and look really carefully you might just see a very small picture of me!

Why are Favicons useful?

The main reason Favicons are useful these days is to promote brand familiarity - it’s the ideal place to put your company logo or some other recognisable little picture there. The problem is actually creating one - or at least, that’s what most people think. It’s actually really easy.

Favicons are stored as a .ico (Icon) file, which is really just a very small BMP file. There are a few programs which let you edit them easily but recently I came across this little gem:

http://www.rw-designer.com/online_icon_maker.php

By using this tool you can easily draw your own little logo, or upload a picture and have it automatically translate it for you. You can then easily save the icon and upload it to your website.

How to get the Favicon to display

Some web browsers support automatic discovery of favicons, that means all you have to do is upload your .ico file as ‘favicon.ico’ to the root directory of your site and it’ll do the rest - BUT - the best way to make sure is to also add the following tag into the header section of your website template, between the <head&ht; and </head> tags:


<link rel="shortcut icon" href="/favicon.ico" />

Adding a tag like this means the browser will be able to find your favicon wherever the user has navigated to (or entered) in your site.

Creating Animated Favicons

Some browsers, such as Firefox, have the ability to display animated favicons - these are just regular animated .gif files so they are even simpler to create. You can see an example of an animated favicon here.

To make your life simpler still, there’s an online generator for animated icons here! For maximum compatibility it’s always best if you’re going to include an animated favicon to also include a static one too because otherwise some browsers won’t show one at all.

To include your animated favicon along side your regular one, put the following code in your page header (as described above):


<link rel="icon" type="image/gif" href="/icon.gif" />

Just replace icon.gif with the filename of whatever you uploaded your animated favicon as, and there you have it.

Job done.