Preferred way to use favicons?

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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

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

Answer 5

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.