add a favicon to a web page with html5

Question

When I want to add a favicon I write this tag::

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

But when I open the web page I don't see the favicon. Why?

Answer 1

There are many possible causes for this behavior, and browsers are in the habit of silently ignoring anything that they do not understand, so it is hard to tell exactly why it happens.

To troubleshoot this, you should start by opening up the developer tools (F12 on chrome) and seeing whether any errors were logged. For example, your developer tools might look like this:

Some possible causes:

• The browser is not looking for the icon there where you think it should look. Check the path. Is the file there? Is another file in the same location served correctly?

• The icon is not an ico file. Many people nowadays are not aware of the fact that "ico" is a special file format, so they take any image they happen to have and they just rename it to ".ico" and they expect this to work. This will not work, because ".ico" is a specific image format. Look it up. Use a converter to convert your image to ".ico" format. There exist several free online converters for that. Alternatively, store your icon in a familiar format (say, png) and specify type="image/png" and href="favicon.png" (as another answer suggests)

• If the icon is in fact an ico file, the browser expects it to have specific details. Most likely, the browser expects it to contain a 16x16 image, possibly even with a specific color depth, and the browser perhaps even fails to use it if, in addition to the 16x16 image, it also contains images in other resolutions. ".ico" files are complex, and browsers are sometimes way pickier than they should be.