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!