I was trying to add a favicon to a website earlier and looked for a better way to implement this than to dump a favicon.ico file in the root of the website.

I found this nice little guide: How to Add a Favicon. However, the preferred method did not work in IE (7) and the second method is the old fashioned way (which I resigned myself to use).

Is there a third method that works across all the most popular browsers?


This is how they're doing it right here on Stack Overflow:

<link rel="shortcut icon" href="/favicon.ico" />

Well, the file is in the root so it does not show whether the tag works or if the browser just got the icon from the usual location (the root).

Edit: I'll try it and see if it works.

Edit 2: Using both tags make it work even for any file name as long as the file is an icon for IE7: I tried using .png files and it only worked with Firefox.

+12  A: 

This is what I always use:

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

The second one is for IE. The first one is for other browsers.

+1  A: 

I think the most reliable method is the simply added the favicon.ico file to the root of your website.

I don't think there is any need for a meta tag unless you want to manually override the default favicon, but I was unable to find any research to support my argument.

+1  A: 

By the way, does anyone know what color depth the icon should have? It's nowhere specified, so I use 256 Color to be on the safe side, but i'm not sure if I just oversaw a specification for it?

Michael Stum
At 16x16, who really needs to notice true colour? 256 here as well.
At 16x16, 256 colors is the same as true color. :)
+2  A: 

You can use HTML to specify the favicon, but that will only work on pages that have this HTML. A better way to do this is by adding the following to your httpd.conf (Apache):

AddType image/x-icon .ico