Emojis as favicon

Emoji, Html

Since browsers have started supporting SVG you can finally have emoji as favicon. Here’s the one-liner in use:

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>😉</text></svg>">

This works in Firefox and Chrome. Safari only does those “mask” style icons in SVG so this doesn’t work there.

Enjoyed this post? If you’d like to support me, I’d love if you could buy me a coffee.