There’s additional files you can add here to enhance your site for different apps and services, but more on that in a bit. This is to support Safari’s pinned tab functionality, which existed before other browsers had SVG favicon support. ico is specifically used as an alternate presentation.įollowing the favicons is a line of code that loads another SVG image, one called safari-pinned-tab.svg. This programmatically communicates to the browser that the favicon with a file format that uses. You may also notice the alternate attribute value for our rel declaration in the second line.

This ensures that all browsers that support favicons can enjoy the experience. All other browsers fall back to using the favicon.ico file. Browsers that do not support SVG favicons but do support web app manifests will use the higher-resolution images. Place this in your website’s : Īnd place this code in your site’s web app manifest: īrowsers that do support SVG favicons will override the first link element declaration and honor the second instead.

Here’s the code for how to add favicons to your site. It’s something that most modern browsers support, with more support on the way. One very new trick is the ability to use SVG as a favicon. They’re a neat part of internet history that are capable of performing some cool tricks. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. Favicons are the little icons you see in your browser tab.

Inkscape svg to ico