Simple, often geometric, and deployed at an increasing number of varied sizes, favicons would seem to be the perfect candidate for the SVG format. 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.
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.