All posts
All posts

How to use Emojis as Favicons

· 2 min read

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.

A browser support matrix taken from https://caniuse.com/link-icon-svg

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.