demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Site Icons: Sizes & Design Considerations

html / favicons

Estimated reading time: 2 minutes, 47 seconds

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.

Icon Sizes And Purposes For Modern Sites
SizePurpose
16 × 16The 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 rel is set to the precomposed variant when linking.

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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.