How to use Emojis as Favicons

If you wanted to use an Emoji as a favicon but wasn’t sure how to do it or if it’s supported, then here are all the details you need to know.

Support

To simply use an emoji as a Favicon, we’ll need to use an SVG as our Favicon. This is supported in all ever-green browsers besides Safari.

Method

<link
  rel="icon"
  type="image/svg+xml"
  sizes="any"
  href="data:image/svg+xml,&#x3C;svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 100 100&#x22;&#x3E;&#x3C;text y=&#x22;.9em&#x22; font-size=&#x22;90&#x22;&#x3E;&#x1F96C;&#x3C;/text&#x3E;&#x3C;/svg&#x3E;"
/>

Adding this code snippet to your head section will give you a nice emoji favicon. Cool thing about this is that using sizes="any" gives us an option to support all resolutions and all sizes in just one line. This works only because we’re using image/svg+xml and SVG is “Scalable Vector Graphic”.

Update: 26th June 2022

I was reached out by @efratbartal on Twitter saying that the method I presented before didn't pass the w3 validator because of unescaped characters like '<' in the href attribute.
The example is now fixed and thanks so much @efratbartal for pointing that to me!

Last but not least, I hope everyone’s feeling well and keeping themselves safe! If you have any questions, I’m here and also on Twitter.
Feel free to ask or comment, I’d love to hear your feedback or help with any dilemmas you have :)

Thanks, Matan.