How to create multi-layered .ico favicons

lots-of-favicons

Favicons are the little images that appear in the address bar to the left side of the tabs. You probably see these every time you browse the web.

These small icons are often overlooked when creating a website. But, they are an important part of your branding. What makes a website really stand out is attention to detail. Making sure your website looks great on any device, mobiles, tablets, desktops… high-res or low-res, is incredibly important to how your brand is perceived and helps to build trust with your users.

High-resolution screens (or retina displays as Apple calls them) have been around for a number of years now, you may have noticed that your old favicons look grainy and not very pretty when viewed in high-res. See below.

normal-vs-high-res.jpg

A great way to keep your favicons looking crisp and sharp across devices is to utilize the .ico file type’s ability to store multiple layers. Basically, .ico files allows you to create several versions of your favicon in differents sizes and store them in the same file, the device can then choose to display the most appropriate size.

What sizes you choose to create will depend on your website/app’s use case. Keep in mind that the more versions of your image you create, the larger the file will be. While this one image may not increase the app’s load time noticeably on its own, every little does add up; just think of the poor folks stuck on 2G.

Below is a list of common favicons sizes:

16 x 16 – Standard size for browsers
24 x 24 – IE9 pinned site size for user interface
32 x 32 – IE new page tab, Windows 7+ taskbar button, Safari Reading List sidebar
48 x 48 – Windows site
57 x 57 – iPod touch, iPhone up to 3G
60 x 60 – iPhone touch up to iOS7
64 x 64 – Windows site, Safari Reader List sidebar in HiDPI/Retina
70 x 70 – Win 8.1 Metro tile
72 x 72 – iPad touch up to iOS6
76 x 76 – iOS7
96 x 96 – GoogleTV
114 x 114 – iPhone retina touch up to iOS6
120 x 120 – iPhone retina touch iOS7
128 x 128 – Chrome Web Store app, Android
144 x 144 – IE10 Metro tile for pinned site, iPad retina up to iOS6
150 x 150 – Win 8.1 Metro tile
152 x 152 – iPad retina touch iOS7
196 x 196 – Android Chrome
310 x 150 – Win 8.1 wide Metro tile
310 x 310 – Win 8.1 Metro tile

For a simple favicon intended primarily for use in desktop/mobile browsers I would create four sizes 16x16, 24x24, 32x32, and 48x48. When images are scaled to below 32x32 pixels they will usually need some manual manipulation to look good, this often means modifying pixel by pixel especially in the 16x16 image. The finished images are then saved as four separate 24 bit PNGs with transparency.

The next step is to combine these PNGs into one .ico file. Unfortunately, Photoshop does not natively support .ico files, you can install a separate plug-in that does this but, for simplicity I will be using http://icoconvert.com/. Simply upload your four PNGs to icoconvert.com, convert, and download the resulting .ico file.

Now to get your favicon to display on your website: rename your file to favicon.ico and store it in the root directory of your website. You can also link to it from inside the <head/> element using:

1
<link rel="shortcut icon" href="/favicon.ico" />