Emojis as Favicons

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.

Now that all modern browsers support SVG favicons, here's how to turn any emoji into a favicon.svg:

<svg xmlns="https://t.co/TJalgdayix" viewBox="0 0 100 100">
<text y=".9em" font-size="90">💩</text>
</svg>

Useful for quick apps when you can't be bothered to design a favicon! pic.twitter.com/S2F8IQXaZU

— Lea Verou (@LeaVerou) March 22, 2020

Demo Project

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-scheme media query in the SVG if you wanted to do something special for dark mode (although emojis generally work well on any background)

The post Emojis as Favicons appeared first on CSS-Tricks.

from CSS-Tricks https://ift.tt/2QK4Pi7
via IFTTT