Note — this site no longer does this, instead I've replaced it with a basic favicon.ico
Most browsers support svg favicons, and svg supports 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 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>">
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.
- published
- 12 Oct 2020
- modified
- 12 Oct 2020
- author
- Nathaniel
- tags
postsfaviconSVGemoji