Adding a Favicon To Your Website

The favicon, also known as a shortcut icon, little icon or website icon that browsers display next to a page's title on a browser tab, or in the address bar next to its URL. So, many recent browsers display it as a visual reminder of the Web site identity in the address bar or in tabs.

How to add a Favicon to my site ?

Adding a Favicon to your Web site is a simple task. Just add an .ico image file that is either 16x16 pixels or 32x32 pixels in the webroot. Then, link to it in the header of your page like the following:

For cross browser compatibility, seems to be needed two lines for for favicon:

The webroot is the first place a browser will search. If it doesn't find an icon there, it checks the top-level directory of the server, so by putting it there you can have a default favicon for all the pages in your domain.

The favicon can be created using any image editing software, that allows the saving of .ico files. There are also many online services that will allow you to create a favicon for free.

The format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors. The format of the image must be one of PNG (a W3C standard), GIF, or ICO. The other favicon sizes listed below:

A second method for specifying a favicon relies on using a predefined URI to identify the image: "/favicon", which is relative to the server root. This method works because some browsers have been programmed to look for favicons using that URI. You can put it in the root of your site and name it favicon.ico because some browsers look for it even if you don't link to it on your pages.

There are several limitations to the approaches described above. Some limitations listed below:

This approaches only work in HTML or XHTML

Keep in mind that for a user with a slow modem a favicon.ico may increase the page loading time by a few seconds if it is too large, so don't overdo it.