Working out what sizes/formats/filenames to use for favicons is confusing---especially if you're trying to support legacy browsers. There are some great lists out there, but they are often out-of-date or incomplete. So here's a new one:
Place favicon.ico in root directory---include a 16x16 and 32x32 image. This will be effective for most browsers. Do not add a link to the head---browsers that can use png icons may ignore them in favour of the lower-quality ico if you do.
favicon.png as a 32x32 icon for browsers that can handle png.
Icons for use in modern browsers (eg. Safari 8+) and mobile devices.
Use this list for the most complete support:
- For iPhone 6 Plus (with @3× display) running iOS ≥ 7:
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/path/to/favicon-180.png"> - For iPad Pro (with @2× display) running iOS ≥ 7:
<link rel="apple-touch-icon-precomposed" sizes="167x167" href="/path/to/favicon-167.png"> - For iPad with high-resolution Retina display running iOS ≥ 7:
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/path/to/favicon-152.png"> - For iPad with high-resolution Retina display running iOS ≤ 6:
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/path/to/favicon-144.png"> - For iPhone with high-resolution Retina display running iOS ≥ 7:
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/path/to/favicon-120.png"> - For iPhone with high-resolution Retina display running iOS ≤ 6:
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/path/to/favicon-114.png"> - For iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7:
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/path/to/favicon-76.png"> - For first- and second-generation iPad:
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/path/to/favicon-72.png"> - For non-Retina iPhone, iPod Touch, and Android 2.1+ devices:
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/path/to/favicon-57.png">
Use this list for the currently recommonded sizes as of iOS 9:
- For iPhone 6 Plus (with @3× display) running iOS ≥ 7:
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/path/to/favicon-180.png"> - For iPad Pro (with @2× display) running iOS ≥ 7:
<link rel="apple-touch-icon-precomposed" sizes="167x167" href="/path/to/favicon-167.png"> - For iPad with high-resolution Retina display running iOS ≥ 7:
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/path/to/favicon-152.png"> - For iPhone with high-resolution Retina display running iOS ≥ 7:
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/path/to/favicon-120.png"> - For iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7:
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/path/to/favicon-76.png">
Use these to cover any remaining devices that may not support the linked icons. Ideally size them at 180x180 (for maximum usefulness) or 57x57 (for minimal bandwidth use).
Place apple-touch-icon-precomposed.png and apple-touch-icon.png in the root directory for everything else. Include both for maximum compatibility, as iOS 1 and BlackBerry OS6 don’t support precomposed icons, and Android 2.1 only supports precomposed icons.
Modern Windows icons
<meta name="msapplication-TileColor" content="#FFFFFF"> bacground colours of tile---change #FFFFFF to desired colour.
<meta name="msapplication-TileImage" content="/path/to/favicon-144.png"> icon image on tile.