Hacker News new | ask | show | jobs
by matsemann 2069 days ago
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"
5 comments
hosshams 2068 days ago
Hi,

I use https://opentype.js.org/ to convert a font to path.

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.

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-gui...

link
sunsetMurk 2069 days ago
All of these are still required to cover bases across devices and apps. I think.

I just use https://realfavicongenerator.net/ which keeps things relatively easy.

link
petercooper 2069 days 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

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.

link
tpmx 2069 days ago
Probably using (something like) https://opentype.js.org/.
link
nwsm 2068 days ago
Note that the emojis are in text, and many of them do not center very well(I'm in Firefox).
link
hosshams 2068 days 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.
link