Posted By: Anonymous
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.
There are actually two ways to add a favicon to a website.
Simply add the following code to the
<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
rel attribute with
shortcut anymore. From MDN Link types:
shortcutlink 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.icounless you’ve specified a shortcut icon via
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.