How to Create a Retina Favicon with Icon Slate

Favicons are small 16x16 pixel icons that display in various parts of a web browser. They help give your website credibility and brand image. On Retina displays, 16x16 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 (16x16 pixels and 32x32 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 favicon@2x.png. 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 favicon@2x.png 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.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.