I’m busy on a WordPress site and have come to the stage to add the finishing touch, being the favicon. I’m primarily a developer so graphics and icons aren’t my strongest point.
What are the best practices when creating a favicon (in terms of sizes etc, I already have the design)? I’d like to accommodate for every possible device, be it mobile, tablets, retina displays etc. Also I don’t want it ending up blurry so I need to know what pixel density to use and everything.
If there are some Mac apps or online tools that will do this for you (and do it properly) that would be great as well. Otherwise I know how to find my way around Illustrator and Photoshop.
The basics from Favicons – Best practice for 2013:
ICO favicon.ico (32×32)
PNG favicon.png (96×96)
Tile Icon tileicon.png (144×144)
Apple Touch Icon apple-touch-icon-precomposed.png (152×152)
And a “painfully obsessive” cheat sheet to favicon sizes/types on GitHub.
Always worth a read: http://www.jonathantneal.com/blog/understand-the-favicon/