When you visit Web sites in Firefox, you would have noticed that for many sites an Icon is shown on the left side of the URL field (Address field). For example, for Gmail it is a “letter” icon while for Google it is a “big G” icon.

In web speak, this icon is know as the favicon since it appears on the favorites list (in both Internet Explorer and Firefox). Now how do you add such a feature to your own Web page? It is rather simple.

1. First create an icon (name it as favicon.ico) which represents your site. This can be any picture file with dimensions 16 by 16 pixels. You might want to make the background using transparent color, otherwise a white rectangle will appear behind your Icon.

2. Upload your Icon to the document root of your web host. Typically this where your index.html is!

3. Add reference to your icon in all the web pages (inside HEAD tag). For wordpress, the following line can be added to the header.php inside head tags. I think this is not necessary in most browsers.

<link rel="icon" href="http://yoursiteaddress/favicon.ico"></link>

Thats it!