Emojis are everywhere nowadays. I created perpetual.pizza many years ago now and tend to update it every so often. I never liked the old pizza favicon and decided to try replacing it with an emoji.
SVG favicons are now widely supported and I have been experimenting with the possibilities recently (light/dark mode favicons are awesome). I ended up finding an elegant solution for creating an emoji favicon.
It turns out that you can use emojis inside of SVG text and
use relative units to position and size the emoji correctly. This method also displays the emoji in the format the user is familiar with on their operating system.
Here's the markup for my icon:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<text y="0.9em" font-size="90">🍕</text>
</svg>
I added it into the document head like a regular SVG icon:
<link rel="icon" href="/assets/icon.svg" />
Here's the outcome:
Top comments (0)