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.
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.
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
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 :)