#What to include?
###The Minimum
<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) -->
<link rel="shortcut icon" href="/favicon.ico">
<!-- Modern browsers (196x196 should cover all modern browsers) -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- iOS & other mobile devices (ideally 180x180, at least 120x120) -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
###For the Obsessive
<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) -->
<link rel="shortcut icon" href="/favicon.ico">
<!-- Modern browsers & Devices -->
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-64x64.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-128x128.png" sizes="128x128">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">
<!-- iOS & other mobile devices -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">
<!-- Windows Tiles (optionally omitted and replaced with browserconfig.xml in root directory) -->
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />
#favicon.ico
favicon.ico is the oldest of the favicons, it has worked since before a lot of people reading this were born and still works perfectly today.
Microsoft recommends including images sized 16x16, 32x32 and 48x48.
The standard way to define your favicon:
<link rel="shortcut icon" href="/favicon.ico" />
Browsers will search the root directory of your website for favicon.ico so you can omit the link. Some older browsers will default to the declared favicon.ico even if there is a more appropriate sized PNG declared, so leaving the ICO undeclared in the root and declaring different sized PNGs may be a good idea.
#favicon.png
HTML5 introduced the sizes attribute to help declare multiple sized icons. Using specific PNGs gives you greater control over the sizes used and means only the correct image is being loaded.
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
The sizes you declare depends on the devices you want to support. Some common and not-so-common sizes:
- 32x32
- 48x48
- 64x64
- 96x96
- 128x128 Chrome Web Store icon
- 160x160 Chrome for Android
- 192x192 Chrome for Android
- 195x195 Opera Speed Dial icon
- 196x196 Chrome for Android
- 228x228 Opera Coast icon
#Apple Touch Icon
iOS web clip icons come in a number of sizes for different devices and resolutions. You can specify one or a number of sized icons, if no icon at the relevant size is found, the generic icon with no declared size will be used.
If no icons are specified using a link element, iOS will search the root directory for icons with the apple-touch-icon prefix. iOS devices aren't (strangely enough) the only devices to use these icons (Android Chrome, for example) so declaring them is the safer option.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">
#Windows Tiles
Tiles, the Windows equivalent of icons are used when you pin a website to the start screen on either Windows or Windows Phone and come in a number of sizes.
<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />
The recommended image sizes are larger than the names of those images suggest. These are the recommended sizes from microsoft.com
| Minimum | Recommended
Small | 70 x 70 | 56 x 56 | 128 x 128
Medium | 150 x 150 | 120 x 120 | 270 x 270
Wide | 310 x 150 | 248 x 120 | 558 x 270
Large | 310 x 310 | 248 x 248 | 558 x 558
###Tile color and title
The default behaviour of tiles is to take the title of the tile from the <title> tag and respect any transparency in the tile images, showing the background color. You can customise the color and title using these meta tags:
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
###browserconfig.xml
All the msapplication meta tags can be removed and replaced with an XML file in the root folder called browserconfig.xml. The XML file should look like this:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="images/tile-small.png"/>
<square150x150logo src="images/tile-medium.png"/>
<wide310x150logo src="images/tile-wide.png"/>
<square310x310logo src="images/tile-large.png"/>
<TileColor>#582686</TileColor>
</tile>
</msapplication>
</browserconfig>
#Further Reading & Resources
