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.

Creating a Favicon

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:

<head> <title>My Site</title> <link rel="icon" type="image/ico" href=""/> </head>

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

<link rel="shortcut icon" href="" /> <link rel="icon" href="" type="image/ico" />
What is FAVICON.ICO and How to Create a Favicon Icon

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.

Favicon size

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:

16 x 16 – Standard size for browsers 24 x 24 – IE9 pinned site size for user interface 32 x 32 – IE new page tab, Windows 7+ taskbar button, Safari Reading List sidebar 48 x 48 – Windows site 57 x 57 – iPod touch, iPhone up to 3G 60 x 60 – iPhone touch up to iOS7 64 x 64 – Windows site, Safari Reader List sidebar in HiDPI/Retina 70 x 70 – Win 8.1 Metro tile 72 x 72 – iPad touch up to iOS6 76 x 76 – iOS7 96 x 96 – GoogleTV 114 x 114 – iPhone retina touch up to iOS6 120 x 120 – iPhone retina touch iOS7 128 x 128 – Chrome Web Store app, Android 144 x 144 – IE10 Metro tile for pinned site, iPad retina up to iOS6 150 x 150 – Win 8.1 Metro tile 152 x 152 – iPad retina touch iOS7 196 x 196 – Android Chrome 310 x 150 – Win 8.1 wide Metro tile 310 x 310 – Win 8.1 Metro tile
Second method favicon in HTML or XHTML

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.