Lea Verou had a dang genius idea to use an emoji as a favicon. The idea only recently possible as browsers have started supporting SVG for favicons. Chuck an emoji inside an SVG <text> element and use that as the favicon.
Here’s the one-liner in use:
<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>">Demo Project Demonstrating Emoji as a Favicon
I made a quick little demo project so you can see it at work. See the deployed project to actually see the favicons. That works in Firefox and Chrome. Safari only does those “mask” style icons in SVG so this doesn’t work there. Maybe it could though? I dunno I’ll let you try it.
Here’s a video in case you just wanna see it.
Related Concepts
- Ada Rose Cannon added a badge that can increment.
- Taylor Hunt dropped some code on how he uses the current Git branch name to create an SVG favicon (related to the “different favicon for development” idea)
- You could duck a
prefers-color-schememedia query in the SVG if you wanted to do something special for dark mode (although emojis generally work well on any background)
If you’re just throwing together a quick site, do not forget to set
<meta charset="UTF-8">before using this. Otherwise your icon will just look like weird characters.Question: Does Google use the thumbnail correctly in mobile search results? They have been showing the favicons for some time now.
Great question. I don’t know! I have a weird feeling it won’t work on Google SERPs but that’s 100% guess.
All great ideas! Glad to see official browser support for SVGs as favicons.
I’ve been using emojis as favicons for about a year now (and emojis in code for much longer!).
My trick before knowing this one is simply using a PNG version of emojis, which works perfectly as expected! The only caveat, along with the SVG solution, is that you’ll get the same static emoji across all platforms. Whereas traditionally, emojis implemented using Unicode will render dynamically for Apple vs. Android vs. Microsoft, etc. I actually prefer it this way since I enjoy Apple’s emojis the most :)
Emojipedia is a handy resource for all things emoji – particularly for Unicode support across the many different platforms.
With all this being said, I’d love to see more support for Unicode and other fonts, potentially being used for favicons, one day too!
I feel like I missed a memo. I was more excited to find out that modern web browsers now all support SVG for favicons!
Haha that’s a cute idea! Can devinitely use this for my personal blog thank you.
The icon is partially cut off from the right on Windows in Chrome. Can this be fixed by improving site code or is this a browser bug?
If it’s cut off, you can adjust the x,y position of svg text.
For example:
(x coordinate is shifted -0.1 em to the left so that the right side is not cut off)
Note that this isn’t supported in Safari.