SVGs are usually very small files, especially when compared to their raster image counterparts - even more-so if you optimize them beforehand. 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. SVG is an open standard, meaning you can use them without any further tooling or platform lock-in. The file is a proprietary format used by Microsoft, meaning you’ll need specialized tools to make them. ico file format has been around forever and can support images up to 256×256 pixels in size.
You may be questioning why this is needed. Here’s more detail on the current level of SVG favicon support: 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.
COOL SAFARI ICON CODE
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.
COOL SAFARI ICON HOW TO
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.
0 kommentar(er)
