Sign up ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

All in all, just some advice on the best practices to use when doing favicons in the future which is - 2014.

share|improve this question
Last Years news but:…. Any reason those won't cover your needs? –  KMSTR Feb 4 '14 at 8:01
Thanks @KMSTR, that cheat sheet is exactly what I was looking for. –  Dean Gibson Feb 4 '14 at 8:12
@KMSTR you should make that your actual answer and link to the github so you can get credit and we can get this question accepted :) –  Johannes Feb 7 '14 at 22:21

4 Answers 4

up vote 19 down vote accepted

The basics from Favicons - Best practice for 2013:

ICO favicon.ico (32x32)

PNG favicon.png (96x96)

Tile Icon tileicon.png (144x144)

Apple Touch Icon apple-touch-icon-precomposed.png (152x152)

And a "painfully obsessive" cheat sheet to favicon sizes/types on GitHub.

Always worth a read:

share|improve this answer
I have been reading that up to 180x180 is now called for with iOS 8. –  Drewdavid Jul 14 at 0:18
Can you link a source? –  KMSTR Jul 14 at 4:37
Sure. I'm seeing 180px now mentioned in quite a number of places, but this is the best I could find from Apple:… –  Drewdavid Jul 14 at 15:40

This tool is a super time saver. Try it out! It takes care of everything for you.

Upload your image at something around 800px x 800px so its nice and crisp.

Also add this meta tag so you can name your icon if some saves to there iOS device.

<meta name="apple-mobile-web-app-title" content="Website Name">

Hope that helps!

share|improve this answer

Use this GRUNT task to generate all possible variants:

Generates all known types and sizes icons from PNG image. Uses ImageMagick.

Input: square logo in png. You can also keep near the source files with resolution prefix e.g. source.16x16.png.


favicon.ico (16x16, 32x32, 48x48) — desktop browsers, address bar, tabs, safari reading list, non-retina iPhone, windows 7+ taskbar, windows desktop;
favicon.png (64x64) — modern browsers;
apple-touch-icon.png (57x57) — iPhone non-retina, Android 2.1+;
apple-touch-icon-60x60.png (60x60) — iPhone iOS7+;
apple-touch-icon-72x72.png (72x72) — iPad non-retina;
apple-touch-icon-76x76.png (76x76) — iPad non-retina iOS 7;
apple-touch-icon-114x114.png (114x114) — iPhone retina, iOS 6 and lower;
apple-touch-icon-120x120.png (120x120) — iPhone retina, iOS 7 and higher;
apple-touch-icon-144x144.png (144x144) — iPad retina;
apple-touch-icon-152x152.png (152x152) — iPad retina iOS 7;
windows-tile-144x144.png (144x144) — Windows 8 tile;
coast-icon-228x228.png (228x228) - Coast browser;
firefox-icon-16x16.png (16x16) - Firefox on Android / Windows;
firefox-icon-30x30.png (30x30) - Firefox OS;
firefox-icon-32x32.png (32x32) - Firefox on Android / Windows;
firefox-icon-48x48.png (48x48) - Firefox on Android / Windows;
firefox-icon-60x60.png (60x60) - Firefox OS;
firefox-icon-64x64.png (64x64) - Firefox on Android / Windows;
firefox-icon-90x90.png (90x90) - Firefox OS;
firefox-icon-120x120.png (120x120) - Firefox OS;
firefox-icon-128x128.png (128x128) - Firefox on Android / Windows;
firefox-icon-256x256.png (256x256) - Firefox on Android / Windows;
homescreen-196x196.png (196x196) - Android Homescreen.

Adds changes to html file.

share|improve this answer

will create about 15 different icon sizes for all devices from one hi-res PNG.

share|improve this answer

protected by Darth_Vader Dec 25 '14 at 7:25

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.