{"id":306644,"date":"2020-04-24T07:58:29","date_gmt":"2020-04-24T14:58:29","guid":{"rendered":"https:\/\/css-tricks.com\/?p=306644"},"modified":"2022-02-08T17:10:12","modified_gmt":"2022-02-09T01:10:12","slug":"svg-favicons-and-all-the-fun-things-we-can-do-with-them","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/svg-favicons-and-all-the-fun-things-we-can-do-with-them\/","title":{"rendered":"SVG, Favicons, and All the Fun Things We Can Do With Them"},"content":{"rendered":"\n

Favicons are the little icons you see in your browser tab. They help you understand which site is which when you\u2019re scanning through your browser\u2019s bookmarks and open tabs. They\u2019re a neat part of internet history that are capable of performing some cool tricks<\/a>.<\/p>\n\n\n\n

One very new trick is the ability to use SVG as a favicon. It\u2019s something that most modern browsers support<\/a>, with more support on the way.<\/p>\n\n\n\n\n\n\n\n

Here\u2019s the code for how to add favicons to your site. Place this in your website’s <head><\/code>:<\/p>\n\n\n\n

<link rel=\"icon\" href=\"\/favicon.ico\" sizes=\"any\">\n<link rel=\"icon\" href=\"\/favicon.svg\" type=\"image\/svg+xml\">\n<link rel=\"manifest\" href=\"\/manifest.webmanifest\"><\/code><\/pre>\n\n\n\n
And place this code in your site’s web app manifest<\/a>:<\/p>\n\n\n\n
{\n  \"icons\": [\n    { \"src\": \"\/icon-192.png\", \"type\": \"image\/png\", \"sizes\": \"192x192\" },\n    { \"src\": \"\/icon-512.png\", \"type\": \"image\/png\", \"sizes\": \"512x512\" }\n  ]\n}<\/code><\/pre>\n\n\n\n
Browsers that do<\/strong> support SVG favicons will override the first link element declaration and honor the second instead. Browsers that do not<\/strong> support SVG favicons but do<\/strong> support web app manifests will use the higher-resolution images. All other browsers fall back to using the favicon.ico<\/code> file. This ensures that all<\/strong> browsers that support favicons can enjoy the experience.\u00a0<\/p>\n\n\n\n
You may also notice the alternate attribute value for our rel<\/code> declaration<\/a> in the second line. This programmatically communicates to the browser that the favicon with a file format that uses .ico<\/code> is specifically used as an alternate presentation.<\/p>\n\n\n\n
Following the favicons is a line of code that loads another SVG image, one called safari-pinned-tab.svg<\/code>. This is to support Safari\u2019s pinned tab functionality<\/a>, which existed before other browsers had SVG favicon support. There\u2019s additional files you can add here to enhance your site for different apps and services, but more on that in a bit.<\/p>\n\n\n\n
Here\u2019s more detail on the current level of SVG favicon support:<\/p>\n\n\n
This browser support data is from Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div>
Desktop<\/h4>
Chrome<\/span><\/th>Firefox<\/span><\/th>IE<\/span><\/th>Edge<\/span><\/th>Safari<\/span><\/th><\/tr><\/thead>
80<\/span><\/td>41<\/span><\/td>No<\/span><\/td>80<\/span><\/td>No<\/span><\/td><\/tr><\/table><\/div>
Mobile \/ Tablet<\/h4>
Android Chrome<\/span><\/th>Android Firefox<\/span><\/th>Android<\/span><\/th>iOS Safari<\/span><\/th><\/tr><\/thead>
123<\/span><\/td>No<\/span><\/td>No<\/span><\/td>No<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n
Why SVG?<\/h3>\n\n\n
You may be questioning why this is needed. The .ico<\/code> file format has been around forever and can support images up to 256\u00d7256 pixels in size. Here are three answers for you.<\/p>\n\n\n
Ease of authoring<\/h4>\n\n\n
It\u2019s a pain to make .ico<\/code> files. The file is a proprietary format<\/a> used by Microsoft, meaning you\u2019ll need specialized tools<\/a> to make them. SVG is an open standard<\/a>, meaning you can use them without any further tooling or platform lock-in.<\/p>\n\n\n
Future-proofing<\/h4>\n\n\n
Retina? 5k? 6k? When we use a resolution-agnostic SVG file for a favicon, we guarantee that our favicons look crisp on future devices, regardless of how large their displays get<\/a>. <\/p>\n\n\n
Performance<\/h4>\n\n\n
SVGs are usually very small files, especially when compared to their raster image counterparts \u2014 even more-so if you optimize them beforehand<\/a>. By only using a 16\u00d716 pixel favicon as a fallback for browsers that don\u2019t support SVG, we provide a combination that enjoys a high degree of support with a smaller file size to boot. <\/p>\n\n\n\n
This might seem a bit extreme, but when it comes to web performance, every byte counts!<\/p>\n\n\n
Tricks<\/h3>\n\n\n
Another cool thing about SVG is we can embed CSS directly in it<\/a>. This means we can do fun things like dynamically adjust them with JavaScript, provided the SVG is declared inline and not embedded using an img<\/code> element.<\/p>\n\n\n\n
<svg \u00a0version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\">\n\u00a0 <style>\n\u00a0 \u00a0 path { fill: #272019; }\n\u00a0 <\/style>\n\u00a0 <!-- etc. -->\n<\/svg><\/code><\/pre>\n\n\n\n
Since SVG favicons are embedded using the link<\/code> element, they can\u2019t really be modified using JavaScript. We can, however, use things like emoji and media queries.<\/p>\n\n\n
Emoji<\/h4>\n\n\n
Lea Verou<\/a> had a genius idea about using emoji inside of SVG\u2019s text<\/code> element<\/a> to make a quick favicon with a transparent background that holds up at small sizes.<\/p>\n\n\n\n
\n
Now that all modern browsers support SVG favicons, here's how to turn any emoji into a favicon.svg:

<svg xmlns="https:\/\/t.co\/TJalgdayix<\/a>" viewBox="0 0 100 100">
<text y=".9em" font-size="90">\ud83d\udca9<\/text>
<\/svg>

Useful for quick apps when you can't be bothered to design a favicon! pic.twitter.com\/S2F8IQXaZU<\/a><\/p>— Lea Verou (@LeaVerou) March 22, 2020<\/a><\/blockquote>