Hacker News Reader

Comment by matsemann | Hacker News Reader

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"

View on HN

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

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.

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.

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

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

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.

Reply on news.ycombinator.com