Favicons have only become more complicated and diverse in recent years, meaning that you might get better results out of a tool like Real Favicon Generator than doing it by hand; this article will still work to create simple favicons.

As I’ve previously discussed, favicons are moving on from simple 16 × 16 pixel images, evolving into multi-resolution images used for many different purpose. This lesson will show you how to create modern, multi-layer favicons… but before we begin, there are a few provisos to be aware of:

You may find that multi-resolution favicons do not work on older browsers, including Firefox 5 or lower. If you know (or believe) that a significant minority of your users have not upgraded, you’ll probably want to stick with traditional favicons

As you will see, multi-resolution favicons are created by adding layers to an .ico file; just like adding layers to a PhotoShop.psd image, doing so adds to the file size. It’s entirely possible to wind up with a favicon more than 50KB in size, which will slow your page load time. Try to keep your .ico file under 20KB; if you can’t, my advice would be to drop the higher resolution layers

As far as I am aware the only cross-platform tool capable of creating multi-resolution favicons is GIMP. Instructions for installing the application on Mac OS X will be included; if you’re on Windows, you will need to find your own way.

Step 1: Create your base, high-resolution image for your favicon

Using whatever tool you wish, create the highest-resolution version of your favicon: I would suggest an image at least 256 × 256 pixels in size. Keep in mind that whatever you create will be reduced down to 16 × 16 pixels for the smallest version, so as a general rule you’ll want to keep your design simple, clear and bold.

Step 2: Export the layers of your favicon as PNG files

Reduce the size of your image to the appropriate resolutions and export; I would suggest the following:

Size

File name

Purpose

114 × 114

apple-touch-icon-precomposed.png

Used for the “Add to home screen” feature in iPhone, iPod Touch, iPad and Android devices

110 × 110

facebook.png

The thumbnail image used for Facebook shares and likes

64 × 64

favicon64.png

Currently used by IE; and (potentially) by browsers on high-resolution displays in the near future.

32 × 32

favicon32.png

24 × 24

favicon24.png

16 × 16

favicon16.png

Work from the largest format down the smallest, exporting each version as a separate file. The apple-touch-icon-precomposed.png and facebook.png versions will not be used in the steps that follow: they are reserved for use as icons for mobile and social media platforms, explained in future articles.

Step 3: Install GIMP

GIMP (GNU Image Manipulation Program) is a free, open source alternative to PhotoShop. It runs within the X11 Windowing system, so the first step we must take is to ensure that the OS is available. Thankfully, if you are using OS X 10.5 (Leopard) or above, it is already installed by default; those using earlier versions of OS X will have to install X11 on OS X for themselves.

Download the appropriate version of GIMP for OS X, install and run it. (You may find that it takes several minutes for GIMP to start up the first time, as it has to start X11 before it loads).

Step 4: Open the highest resolution of the icon & use “Open As Layers” to import your PNG files

The interface for GIMP is significantly different from the standard Mac OS X and Windows interface: for example, the menu bar is at the top of GIMP’s window, rather than the top of the screen. Open the 64 × 64 pixel version of the icon. If you’re asked to set the working current color profile, go with the suggestion of RGB workspace.

Then right-click on the image in GIMP and choose File / Open as Layers… Choose the other favicons, from largest to smallest.

Step 5: Export the image as a favicon

Use File / Save As… and provide the correct file name (favicon.ico). You can opt to compress the PNGs further at this stage.

Step 6: Insert the favicon into your web page(s)

With the following code in the <head> of every web page on our site that we wish to use the favicon, listing the icon sizes you have used:

”Hey, that doesn’t look like what I did for simple favicons!”

You’re right, it doesn’t. First, we’re not using the shortcut value for rel, which was an IE addition, and never officially supported. Second, we’re listing the resolutions of the layers used in in our favicon. Third, we’re making IE aware of the format we are using via the sizes attribute.

In practice, you could leave out this code entirely: so long as you keep the favicon.ico with the right file name and at the root of your site, (i.e. beside the index page) browsers will pick it up regardless. Inserting the <link> code simply makes the browser load the favicon first, rather than last, and supplies information about the resolutions available.

That’s it: you now have a modern, multi-resolution favicon. In articles to come I’ll discuss using the other PNG versions that we created during this process for mobile and social media platforms.