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.
In previous articles I’ve addressed why we need responsive images (fluid design plus screen pixel densities) and looked at the
<picture> element, while conducting investigations of the
x descriptors. Today I’ll explain the
sizes attribute, the trickiest part of the new specification.
sizes is… odd. It looks weird. It acts weird. But it is the final missing piece of the spec, the part that brings everything together, and therefore key to understanding responsive image syntax.
If there’s one thing to keep in mind about
sizes, it’s this:
sizes expresses the designer’s intentions for the image. It does so with a little bit of math, for one reason…