Use emoji as favicon in websites

Favicon are images, so just make a static image and use that.

You're not going to change it constantly, so there's no need to make people's computers spend the time running JS to generate an asset that is always the same, better to generate it once, save that as your favicon image file, and point to that. As a bonus, browsers will cache it, so instead of recomputing it every time, or even downloading it every time, as a favicon it'll only be downloaded once and then never again.

Also note that you don't need the .ico extension (it's the extension for an ancient image format), instead just use the extension the image is supposed to have, and set the type to the correct image mime type.

Another way to do it is:

<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>">

From: https://css-tricks.com/emojis-as-favicons/

Making a screenshot is probably the better and easier solution (as Mike mentioned). And there is one more advantage of this solution:

Emojis can look very different on different platforms.

An example:

You won't need to handle that problem, too..

Now that all major browsers support SVG favicons, it's possible to refer to an SVG that contains the emoji inside:

<!-- favicon.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
  <text y="32" font-size="32">🚀</text>
</svg>

Link it up like you'd normally do:

<link rel="icon" href="/favicon.svg" />