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

posts favicon SVG emoji