Emoji as a favicon, no need for a designer...
Did you know you can use an emoji as your favicon?
Modern browsers support SVG favicons, and SVG can render text and en emoji is text 🤯
<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>"
/>I learned this neat little trick from @chriscoyier, who got it from @LeaVerou!
- @LeaVerou's Original tweet
- @chriscoyier article on CSS Tricks
For fun, and to test out the @GatsbyJS Plugin Starter, I created @raae/gatsby-plugin-svg-emoji-favicon 🎉
But I often find myself reaching for it; favicons make any project seem more polished!
It's a good little plugin to look at to learn how to add content to the head tag of your pages.
Â
All the best,
Queen Raae
Â
PS: Learn how to add test to your plugins on tonight's unauthorized and rum-fueled treasure hunt in the sharky waters around the Gatsby islands, and contribute a test or two to the favicon plugin if you'd like.