TIL: You can use Emojis as Favicons

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
15 Oct 20
modified
15 Oct 20
author
Nathaniel
tags
favicon SVG emoji