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.

Answer 1

There are a million different ways these icons are used (different browsers, different platforms, mobile site-pinning, smart TVs, etc, etc), so there's really no longer a simple answer. For a great explanation see this S.O. answer, but the short answer is:

Use this site which lets you upload a png/jpg and then does all the hard work for you: https://realfavicongenerator.net/

Answer 2

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 3

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 4

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

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

Answer 5

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 6

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.