How to add a browser tab icon (favicon) for a website?

There are actually two ways to add a favicon to a website.

<link rel="icon">

Simply add the following code to the <head> element:

<link rel="icon" href="">

PNG favicons are supported by most browsers, except IE <= 10. For backwards compatibility, you can use ICO favicons.

Note that you don’t have to precede icon in rel attribute with shortcut anymore. From MDN Link types:

The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.

favicon.ico in the root directory

All modern browsers (tested with Chrome 4, Firefox 3.5, IE8, Opera 10 and Safari 4) will always request a favicon.ico unless you’ve specified a shortcut icon via <link>.

So all you have to do is to make the /favicon.ico request to your website return your favicon. This option unfortunately doesn’t allow you to use a PNG icon.

See also favicon.png vs favicon.ico – why should I use PNG instead of ICO?

Leave a Comment