Menu
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.
719
A favicon is a graphic image (icon) associated with a particular Web page and/or Web site. Many recent user agents (such as graphical browsers and newsreaders) display them as a visual reminder of the Web site identity in the address bar or in tabs.
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
shortcutlink type is often seen beforeicon, but this link type is non-conforming, ignored and web authors must not use it anymore.
favicon.ico in the root directoryFrom 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.icounless 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?
182
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
