How to add a browser tab icon (favicon) for a website?
favicon, html, icons
Solution
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="http://example.com/favicon.png">
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
From another SO answer (by @mercator):
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?
Problem
I've been working on a website and I'd like to add a small icon to the browser tab. How can I do this in HTML and where in the code would I need to place it (e.g. header)? I have a `.png` logo file that I'd like to convert to an icon. Related: HTML set image on browser tab.