Follow Brian Li (@DecryptoBL) on Twitter.
Follow Brian Li (@bwhli) on Instagram.

How to Create a Retina Favicon with Icon Slate

January 15, 2015

Favicons are small 16×16 pixel icons that display in various parts of a web browser. They help give your website credibility and brand image. On Retina displays, 16×16 pixel favicons look blurry due to the increased pixel density of the screen. In this tutorial, you’ll learn how to create a Retina favicon using Icon Slate.

Create Images in Photoshop

First, create two images (16×16 pixels and 32×32 pixels) in Photoshop or your software of choice. Since you’re working with really small images, you don’t want to simply reduce the resolution of the larger image. It’s best to create them separately for maximum sharpness.

When you’re finished, export the two images as PNG files. Title the smaller one favicon.png and the larger one [email protected] Next, these two images will need to be combined into one file.

Create Favicon.ico with Icon Slate

favicon-icon-slate

  • Create a new project, and select .ico for the format. By default, Icon Slate generates both .ico and .icns files.
  • Now, drag favicon.png into the 16 px image well and [email protected] into the 32 px image well.
  • Click on the Build in the upper left hand corner, and save the file as favicon.ico.
  • Upload the file to the root directory of your web server.

That’s it! It’s super easy to create a Retina favicon in Icon Slate. I haven’t found another tool that makes it so easy, so let me know in the comments if you know of one.

Icon Slate is available on the Mac App Store for $4.99.

Depending on your browser settings, you may have to empty your browser cache for the new favicon to appear.


Questions?

Find me on Twitter, or send me an email.