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 :)
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:
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:
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
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!