How To Use an Emoji as a Favicon Easily

Programming - Mar 31, 2024

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 Demonstrating Emoji as a Favicon

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.

Previous Next
Copyrights
We respect the property rights of others, and are always careful not to infringe on their rights, so authors and publishing houses have the right to demand that an article or book download link be removed from the site. If you find an article or book of yours and do not agree to the posting of a download link, or you have a suggestion or complaint, write to us through the Contact Us .
Read More