FOLLOW ME Twitter Facebook Вконтакте LinkedIn RSS Feed

How to make favicon.ico for Retina

Category: Design
Jan 23, 2013
Konstantin Bulenkov

If you read this, you probably have a web-site or a personal blog. Anyway, you know what is a favicon. A favicon is an icon representing your web-site in bookmarks, address bar, etc. In 99% it’s 16×16 px ico file and in 99% it looks ugly on a Retina device. This is how my Bookmarks bar looks in Chrome.

Bookmarks bar in Chrome

Icons on the left are made with retina quality, and icons on the right are not. To fix it, we need 32×32 px version of the icon. Once you’ve made it, you need an ico file containing both 16x16px and 32x32px icons. I’d recommend to use X-Icon Editor – a web-based tool doing all dirty job for you. All you need is:

  1. Upload 32x32px PNG icon
  2. Leave 16×16 and 32×32 options checked and uncheck others
  3. Click OK and download ICO file
  4. Rename it to favicon.ico and upload it to yours web-site document root. So it’s available at http://mydomain.com/favicon.ico

Enjoy

P.S. to make your icon looks perfect on mobile devices such as iPads, iPhones, etc I’d recommend to read Mathias Bynens’ awesome post about it

Leave a comment