A cute little emoji as favicon trick

I recently discovered Bear Blog via one of the million newsletters I subscribed to. I'm a big fan of hyper-minimal products that do one thing thoughtfully and efficiently. Kudos to them!

I've claimed my own little Bear Blog here, though I'm not quite sure what to do with it:

• https://georgemandis.bearblog.dev/

I'm not quite sure what to do with it, but there it is.

I also like that they have this "discover" page that seemed to be an aggregation of all the people hosting their own blogs and content on the service:

• https://bearblog.dev/discover/

But what I really like is this cute, clever little trick to implement an emoji as your favicon! This doesn't work on Safari (or anything iOS by extension I imagine), but it does seem to work everywhere else on desktop.

So, hat-tip to Bear Blog for this fun little trick:

<link rel="shortcut icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Ctext%20y='.9em'%20font-size='90'%3E🥸%3C/text%3E%3C/svg%3E">

This actually opens the door to more informative favicons. You could...

• Indicate states of readiness (🔴🌕🟢)
• That something is trying to chat with you (🗣️💬)
• That something failed or succeeded (🚫✅)

Very fun!

If you enjoyed reading this consider sponsoring my work on GitHub, subscribing to my newsletter or sharing it on Hacker News.

Published on Wednesday, September 20th 2023. Read this post as plain-text.