Most browsers support SVG favicons, and SVGs' support any text in a <text> element. So with a little styling you can use an emoji as a favicon.
Here's the code used for the favicon on this (endtimes.dev) site:
<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 code originally came from Lea Verou on Twitter via CSS Tricks.
Using an SVG, and especially an SVG that contains a single emoji, is way smaller in size than the average favicon. (though I don't have a definite number for this, they tend to be around 10kb). Plus the SVG can easily be inlined, removing one web request.
You can also change the emoji based on user preferences like dark mode. The code below will change the emoji to a sun for light mode and a moon for dark mode.
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cstyle%3E %23m %7B opacity:0; %7D%0A@media (prefers-color-scheme: dark) %7B %23m %7B opacity:1; %7D %23e %7B opacity:0 %7D%0A%7D %3C/style%3E%3Ctext id='m' y='.9em' font-size='90'%3E🌝%3C/text%3E%3Ctext id='e' y='.9em' font-size='90'%3E🌞%3C/text%3E%3C/svg%3E">
…or you can change the emoji based on some event, check out emoji clipboard for an example.
Top comments (0)