Somebody might be able to do a great painting that is 20 × 30 in, but you take that down to 1 × 1½ in, and it’s a challenge to make it work.Ethel Kessler, Art Director for USPS Stamp services, quoted on a 99% Invisible episode on stamp design
In the first article of this series I talked about the new formats supported for favicons; in this one, I shall talk about their sizes and design factors.
From simple 16 × 16 pixel images, favicons and their variants (including thumbnail images for social media) have expanded into a vast and potentially confusing gamut of different sizes and formats:
In most cases you will want all of these icons to have the same appearance, consistently presenting your brand identity. To simplify matters I would suggest making the Facebook icon 110 × 110 pixels in size, so that every icon retains a 1:1 aspect ratio.
Start by designing a 256 × 256 icon: this image will be used as the basis for all of the icons you will create. A design that is clear, bold and simple will tend to reduce well in size. If you can’t keep it simple, be prepared to make separate designs optimized for the 16 × 16 and 24 × 24 icon sizes.
Drawing in such a limited space is a skill in itself: 16 × 16 pixels is a very small canvas to work in.
| Size | Purpose |
|---|---|
| 16 × 16 | The traditional size of favicons, still the best supported |
| 24 × 24 32 × 32 64 × 64 | Used by IE9 and above for pinned sites |
| 88 × 31 | The default image size for an RSS feed icon. The largest square icon that can be used is 144 × 144. The largest size possible is 144 pixels wide × 400 pixels high |
| 129 × 129 | Icon size for bookmarked sites on iOS devices (iPhones, IPad, etc). Must be a separate file in PNG format. Will also work on Android devices if |
| 130 × 110 | Maximum size for thumbnail images used in Facebook shares/likes (must be a separate file). |
A few design tips may help:
- While anti–aliasing is usually your friend, you may find that Photoshop’s tendency to smooth everything uses too many pixels when working on a favicon. Switching to the pencil tool and a single pixel brush size and/or turning off antialiasing on fonts may help.
- Only create what can be seen. While working at magnified levels may be vital to your creative workflow, at the end of the day if something on the icon is not visible at 100% it’s not going to count.
The good news is that you will not have six different icon files to keep track of: for the final site: you just need three. The .ico format can actually store multiple resolutions: your 16 × 16 , 24 × 24 , 32 × 32 and 64 × 64 icons can all sit within a single file. The icon for iOS/Android devices will be a second separate image, and the Facebook icon a third.
The next logical article to read in this series takes you through the process of making a single traditional 16 × 16 pixel favicon; if you’re interested in taking the approach of making multiple icon sizes, I’ll talk about that presently.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
