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.ico
at 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
.ico
files was registered as image/vnd.microsoft.icon by the IANA. - Internet Explorer will ignore the
type
attribute for the shortcut icon relationship and this is the only browser to support this relationship, it doesn’t need to be supplied.