Whether it’s the file format, dimensions, or browser support (amongst other concerns), it’s confusing to figure out the best icon stack for one’s website. What follows is my current preferred markup, with some recommended tools and resources.
Please Note: This is not an exhaustive list and surely I don’t cover all possible browsers and devices. Hopefully I get the majority, though :)
Favicon
For the favicon, I use Icon Slate to combine a 32x32px PNG with a 16x16px PNG to form the ICO, which gives me support for HiDPI devices. For optimal browser support I drop the resulting ICO into the site root with the following markup:
<link rel="shortcut icon" href="/favicon.ico" >iOS
There are half a dozen icon dimensions required to support all the different iOS devices. Previously you needed to follow Apple’s naming conventions for the filenames, but these days the following markup works:
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/favicon-152x152.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/favicon-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/favicon-120x120.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/favicon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/favicon-76x76.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/favicon-72x72.png">
<link rel="apple-touch-icon-precomposed" href="/favicon-57x57.png">Android
Seemingly older versions of Android will fallback to use the apple-touch-icon-precomposed icons. Newer versions of Chrome on Android will use the “largest icon found in one of the following <link> tags”:
<link rel="shortcut icon" sizes="196x196" href="/favicon-196x196.png">IE
For Internet Explorer, I followed the Windows 8 Tiles section of Designing Device Assets: Templates and Tips and came up with the following:
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144x144-ie10.png">
<meta name="msapplication-square70x70logo" content="/favicon-128x128-ie11.png"/>
<meta name="msapplication-square150x150logo" content="/favicon-270x270-ie11.png"/>
<meta name="msapplication-wide310x150logo" content="/favicon-558x270-ie11.png"/>
<meta name="msapplication-square310x310logo" content="/favicon-558x558-ie11.png"/>The former two lines of markup are for IE10, while the latter four are for IE11. See the aforementioned blog post for very helpful PSD templates.
That’s it! If any of this is incorrect, I’d like to know. Send me a tweet about it!