I go for a belt and braces approach here.
I create a 32×32 icon in both the .ico and .png formats called favicon.ico and favicon.png. The icon name doesn’t really matter unless you are dealing with older browsers.
- Place
favicon.icoat your site root to support the older browsers (optional and only relevant for older browsers. - Place favicon.png in my images sub-directory (just to keep things tidy).
- Add the following HTML inside the
<head>element.
<link rel="icon" href="https://stackoverflow.com/images/favicon.png" type="image/png" /> <link rel="shortcut icon" href="https://stackoverflow.com/favicon.ico" />
Please note that:
- The MIME type for
.icofiles was registered as image/vnd.microsoft.icon by the IANA. - Internet Explorer will ignore the
typeattribute for the shortcut icon relationship and this is the only browser to support this relationship, it doesn’t need to be supplied.
Reference