Emoji favicons

[nt1m]

What problem are you trying to solve?

I want to be able to use <link rel="shortcut icon" value="🌼"> or similar, instead of trying to export the emoji as an image and referencing it.

What solutions exist today?

No response

How would you solve it?

No response

Anything else?

No response

[flashymittens]

Sounds like <meta name="icon" content="🌼"> would be more correct, since it’s not a link.

[dmsnell]

While this doesn’t directly resolve what you’re asking for, did you consider embedding the SVG in a data URI? This seems to work for me in Firefox and Chrome (though I don’t know how to get Safari to properly render an SVG as a favicon even when referencing an external file)

<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌼</text></svg>">

It’s not as succinct as content="🌼" but it also doesn’t require any exporting or build steps.