Simple, often geometric, and deployed at an increasing number of varied sizes, favicons would seem to be the perfect candidate for the . Unfortunately, browser support for SVG favicons has been lacking until very recently. Firefox 41 now supports them, as does Safari 9 on desktop and mobile (with some provisions), but IE / Edge and Chrome continue to ignore the format, at least for now. However, that situation could (and hopefully will) change soon, so it’s worth taking a moment to explore the possibilities and syntax of SVG favicons, preparing your site for when the time comes.

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:

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.