What is Favicon.ico

Favicon (short for “favorites icon”) is a small icon special for websites what appear before title in browsers or when you have bookmark some page in list of bookmarks. In Yandex.ru search engine favicon.ico also appear before title of site while searching. Favicon, also known as a page icon or an urlicon, is an icon associated with a particular website or webpage. You can define a favicon by placing a file called favicon.ico in the root directory of your server.

Favicon Generators

There are a lot of favicon generators (or it can calls as favicon creator) you can find in search engines. For example, http://favicon.co.uk. There you can upload your image in any format and get .ico format image (download favicon), thats all. Generally, favicon generators are commercial software but you can find and free ones.

How to add Favicon.ico in HTML

Most browsers will automatically detect and use the favicon.ico file, even on dynamic pages.
Both of the following HTML lines should be included on your page:

<link rel=”shortcut icon” href=”/favicon.ico” type=”image/vnd.microsoft.icon” />
<link rel=”icon” href=”/favicon.ico” type=”image/vnd.microsoft.icon” />

However, only the former is necessary, as “shortcut icon” will be treated as a list of possibilities by standards-compliant browsers (with “shortcut” being ignored, and “icon” used); while Internet Explorer will treat it as a single name (”shortcut icon“). The result is that all browsers understand the code. It is only necessary to include a second piece of code if one desires to offer an alternative image to modern browsers (e.g. an animated GIF).
These lines must be inside of head tag of your HTML. The image can usually be in any image format supported by the web browser, the major exception being Internet Explorer, which only supports ICO format.
So your code could look like this:

<link rel=”icon” href=”/favicon.ico” type=”image/x-icon” />
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />

Favicon not displaying in IE

If you have Internet Explorer browser version less then 7 (IE6-) then its not supported to display icon on the browser url bar, but it will be displayed in bookmarks list. IE7 supports favicon.ico but remember, what Animated favicons not supported in Internet Explorer! Also if ie not show favicon make sure what you’ve use shortcut icon in “rel” attribute of “link” tag.

Animated Favicon

As you can see, some of browsers (especially Mozilla Browser) are supports animated favicons in link tag. Animated favicons are stored in .gif image. So you must add following lines to your HTML:

<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />
<link rel=”icon” href=”/favicon.gif” type=”image/gif” />

Example of animated favicon you can see on http://getawallpaper.com - Free Wallpapers Website (look in Mozilla)

How to setup webserver Apache for right processing of favicon.ico?

A: If you have ability to create/edit .htaccess file in root folder (main directory) of your site then you can add follwoing line to it:

AddType image/x-icon .ico

B: If you can access to configuration file of server apache/conf/mime.types then add there following line:

image/x-icon ico