I was first a bit hesitant to embed a letter using a custom font in an SVG, but then I saw it actually creates a path. So it will look the same everywhere and not depend on a font-file. Nifty! But how is it done?
How usable are svg favicons nowadays? Do I still need a dozen link rels in my <head> with various icons in different formats/sizes? Currently I have one .ico file as rel="shortcut icon", 4 pngs in various sizes as "icon", 4 pngs as "apple-touch-icon" and 1 svg as "mask icon"
As you can see in https://caniuse.com/link-icon-svg all modern browsers support SVG favicon right now (88% of users globally). You can also download the PNG version to support wider audience. In the next version, I'll include support to download PNG version for all required sizes, with a sample html page and manifest.json file.
Supported by Edge, Firefox, Chrome, and Opera. Safari and iOS in a rather limited way, but you're still looking at about 70% of users with SVG icons alone. Not so sure how to look up if they're supported directly in the link element.
I just tested the "emoji" version on Chrome and it rendered some total junk as the icon, so I'm not sure about support for that either.
Yeah, I tried a few combinations of dominant-baseline and text-anchor attributes, but couldn't find a combination that works for all emojis. I need to find SVG set of emojis to fix this problem instead of using them as a simple text. I'll look into this in the next version.
How usable are svg favicons nowadays? Do I still need a dozen link rels in my <head> with various icons in different formats/sizes? Currently I have one .ico file as rel="shortcut icon", 4 pngs in various sizes as "icon", 4 pngs as "apple-touch-icon" and 1 svg as "mask icon"