Pro CSS3 Animation, Apress, 2013
Massive Head Canon
A Sass color keyword system for designers.
CSSslidyAs 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.
Whatever application you are using, make certain that it is setup correctly before you begin: this blog contains an article on the best preference settings for PhotoShop.
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.
You should try to optimize your PNG files whenever possible: as an option, the favicon can contain alpha transparency.
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:
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48 64x64" type="image/vnd.microsoft.icon">”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.
