Use emoji as favicon in websites

Question

Emojis are awesome, so I was thinking how could add one as a favicon using link tag.

One possible solution:

I found one possible way in this blog post here. Based on that it's been achieved what I wanted so far with the following solution.

JavaScript code snippet:

const setFavicon = (emoji) => {
  const canvas = document.createElement('canvas');
  canvas.height = 32;
  canvas.width = 32;

  const ctx = canvas.getContext('2d');
  ctx.font = '28px serif';
  ctx.fillText(emoji, -2, 24);

  const favicon = document.querySelector('link[rel=icon]');
  if (favicon) { favicon.href = canvas.toDataURL(); }
}

setFavicon('🐢');

The link tag in HTML:

<link rel="icon" type="image/png" href="favicon.ico"/>

So my question:

Maybe creating favicon.ico file for this purpose would do the thing also. Is there any better way to achieve this without converting or having extra JavaScript snippets in your code? Thank you!

Answer 1

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

Answer 2

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.

Answer 3

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/