Part of the Favicons Reading List

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.

The Problem

From their origins as 16 × 16 pixel graphics, the favicon concept has grown and mutated to cover a whole series of touch icons, tiles, Retina screen options and more. A complete solution (rendered by realfavicongenerator) produces this ridiculously long list of variants: 

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">

While many of these files can be left at the root of your site for the appropriate apps to pick up, rather than specifying them explicitly in your HTML, it’s still an awful lot of content to produce and manage. A single, scalable file would be far better. For example, the logo for this site, saved as favicon.svg: 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
    <title>the new code favicon</title>
    <polygon points="201.4,0 96.5,69.1 201.2,141.1 298.5,69.1" fill="#f06823"/>
    <polygon points="97.1,83.8 95.8,84.7 39.8,123 199.5,241.8 361.4,125 298.5,82.5 200.6,154.5" fill="#f4e302" />
    <polygon points="60.1,152.2 58.4,153.3 0,192.2 201.2,339.6 399.1,192.2 340.2,154.5 199.5,255.9"  fill="#2f8bca" />
</svg>

Which looks like this:

Favicon for thenewcode.com

The favicon can be used by adding a single line of code to each page, in the <head>: 

<link rel="icon" type="image/svg+xml" href="favicon.svg">

A few notes:

  • The components of the favicon are drawn as separate, non-overlapping geometric shapes for clear communication: the favicon may still appear at 16 × 16 pixels, and needs to be clear at that size. Simplicity and clarity of design should take priority.
  • For the same reason, the background of the SVG is left unfilled (and thus transparent) so it can be used in as many contexts as possible.
  • The viewbox for the SVG should be square (i.e. the first and last pair of numbers should be the same as each other).
  • The drawing itself should occupy as much of the viewBox (the SVG “canvas”) as possible.
  • The <title> describes the purpose of the drawing; a <desc> and individual <title> elements for each polygon> could also be added for accessibility.
  • Optimisation and minification should be used on the SVG to make it as small as possible.
  • The SVG must be delivered with a MIME type of image/svg+xml in order to work.

Expanding Into iOS

iOS 9 also supports SVG favicons for use on pinned tabs, with a few caveats:

  1. SVG elements must be all black.
  2. The link to the favicon must use the unofficial mask-icon attribute.
  3. Optionally, the favicon can be colored using the equally unofficial color attribute, using a hexadecimal, keyword or rgb value. Light colors should be avoided.

Given these conditions, I would recommend pointing to another SVG file with color information removed: 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
    <title>the new code favicon</title>
    <polygon points="201.4,0 96.5,69.1 201.2,141.1 298.5,69.1" />
    <polygon points="97.1,83.8 95.8,84.7 39.8,123 199.5,241.8 361.4,125 
    298.5,82.5 200.6,154.5" />
    <polygon points="60.1,152.2 58.4,153.3 0,192.2 201.2,339.6 
    399.1,192.2 340.2,154.5 199.5,255.9" />
</svg>

To use this in iOS: 

<link rel="mask-icon" href="icon.svg" color="blue">

Bringing It All Together

Assuming that you no longer need to support IE8 or earlier, you can drop the .ico format completely and simply send all browsers a PNG file for your site favicon. To do this and keep the advantage of SVG, we must reference the favicons in a particular order: 

<link rel="icon" type="image/png" href="favicon.png">
<link rel="mask-icon" href="icon.svg" color="blue">
<link rel="icon" type="image/svg+xml" href="favicon.svg">

Conclusion

SVG makes for a great format for favicons, and we can only hope that Chrome catches on to its potential soon. An ideal solution would allow SVG to use different <symbol> or <use> elements at different levels of detail for favicons at different sizes, all contained in a single file… although that’s probably a bit much to expect right now.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.