4 ms·

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 n

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"

petercooper 6y ago
For some reason CanIUse only covers SVG favicons if linked in as an external file (as the bottom code sample on the original site does): https://caniuse.com/link-icon-svg https://caniuse.com/link-icon-svg 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.
sunsetMurk 6y ago
All of these are still required to cover bases across devices and apps. I think. I just use https://realfavicongenerator.net/ https://realfavicongenerator.net/ which keeps things relatively easy.
tpmx 6y ago
Probably using (something like) https://opentype.js.org/ https://opentype.js.org/.
hosshams 6y ago
Hi, I use https://opentype.js.org/ https://opentype.js.org/ to convert a font to path. As you can see in https://caniuse.com/link-icon-svg 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. Also, support for dark mode is in my todo list. There's a good article on this here https://medium.com/swlh/are-you-using-svg-favicons-yet-a-guide-for-modern-browsers-836a6aace3df https://medium.com/swlh/are-you-using-svg-favicons-yet-a-gui...
nwsm 6y ago
Note that the emojis are in text, and many of them do not center very well(I'm in Firefox).
- hosshams 6y ago
  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.

petercooper 6y ago

For some reason CanIUse only covers SVG favicons if linked in as an external file (as the bottom code sample on the original site does): https://caniuse.com/link-icon-svg https://caniuse.com/link-icon-svg 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.

sunsetMurk 6y ago

All of these are still required to cover bases across devices and apps. I think. I just use https://realfavicongenerator.net/ https://realfavicongenerator.net/ which keeps things relatively easy.

tpmx 6y ago

Probably using (something like) https://opentype.js.org/ https://opentype.js.org/.

hosshams 6y ago

Hi, I use https://opentype.js.org/ https://opentype.js.org/ to convert a font to path. As you can see in https://caniuse.com/link-icon-svg 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. Also, support for dark mode is in my todo list. There's a good article on this here https://medium.com/swlh/are-you-using-svg-favicons-yet-a-guide-for-modern-browsers-836a6aace3df https://medium.com/swlh/are-you-using-svg-favicons-yet-a-gui...

nwsm 6y ago

Note that the emojis are in text, and many of them do not center very well(I'm in Firefox).

hosshams 6y ago
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.