What is currently the best way to get a favicon to display in all browsers that support Favicons?

html standards favicon
Fred picture Fred · Aug 31, 2008 · Viewed 37.6k times · Source

What is currently the best way to get a favicon to display in all browsers that currently support it?

Please include:

  1. Which image formats are supported by which browsers.

  2. Which lines are needed in what places for the various browsers.

Answer

Brian Matthews picture Brian Matthews · Sep 1, 2008

I go for a belt and braces approach here.

I create a 32x32 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.

  1. Place favicon.ico at your site root to support the older browsers (optional and only relevant for older browsers.
  2. Place favicon.png in my images sub-directory (just to keep things tidy).
  3. Add the following HTML inside the <head> element.
<link rel="icon" href="/images/favicon.png" type="image/png" />
<link rel="shortcut icon" href="/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.

Reference

Related questions

Is there a W3C valid way to disable autocomplete in a HTML form?

When using the xhtml1-transitional.dtd doctype, collecting a credit card number with the following HTML <input type="text" id="cardNumber" name="cardNumber" autocomplete='off'/> will flag a warning on the W3C validator: there is no attribute "…

Read More
How is the default submit button on an HTML form determined?

If a form is submitted but not by any specific button, such as by pressing Enter using HTMLFormElement.submit() in JS how is a browser supposed to determine which of multiple submit buttons, if any, to use as the one …

Read More
What is the standard naming convention for html/css ids and classes?

Does it depend on the platform you are using, or is there a common convention that most developers suggest/follow? There are several options: id="someIdentifier"' - looks pretty consistent with javascript code. id="some-identifier" - looks more like …

Read More