Skip to main content
Home / Articles /

Emojis as Favicons

Lea Verou had a dang genius idea to use an emoji as a favicon. The idea only recently possible as browsers have started supporting SVG for favicons. Chuck an emoji inside an SVG <text> element and use that as the 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>">

Demo Project

I made a quick little demo project so you can see it at work. See the deployed project to actually see the favicons. That works in Firefox and Chrome. Safari only does those “mask” style icons in SVG so this doesn’t work there. Maybe it could though? I dunno I’ll let you try it.

Here’s a video in case you just wanna see it.

Related Concepts