Tuesday, November 28, 2006

What I did not know about favicon

Long time ago I learnt about that little file that can make your website special. I'm talking about favicon or favorites icon. This icon file is used when a page is bookmarked in IE5+ and Firefox.

I knew that this file had to be located in the root of the web server. And that was good enough for me at that time. Until today I did not know that the location of favicon.ico file did not have to be the root directory only.

Favicon can be associated with a webpage, not only a website. That means two things:

  • favicon placed in the root directory of the webserver is used with all web pages, no coding is necessary;
  • favicon can be placed anywhere on the webserver and must be referenced from the page in order to be used, favicon is then referred to as page icon.

All you need to do to customize the page icon is to put the following line into the header section of your page:

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

where the value in href points to the location of the favicon you want to associate with this page.

Few facts about favicon:

  • ICO file can contain multiple resolutions (the most commonly used being 16×16 and 32×32, with 64×64 and 128×128 sometimes used by Mac) and bit-depths (most common being 4, 8, 24 bpp—i.e. 16, 256 and 16 million colors) in the file;
  • image can be also any image format supported by web browser; e.g. GIF, PNG;
  • favicon.com is a website dedicated to favicon, it also includes an online editor.

So the good news is that literally every page on your website can have its own icon (which would be a nonsense, but makes a total sense for web applications running on the same server).


hamideh said...

today,i have knew about favicon,
i put one for mysite, it is ok in FF but is shown fliped vertical in IE .
what is the problem?

Dushan Hanuska said...

Hi Hamideh,

I have no idea why it happened. Try to post more information and maybe somebody will know the answer.

Did the icon flip horizontally or vertically? Can we see the icon? Can you post a link to it?


Jahangir said...

A detailed information about favicon can be found here on my blog


Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.