The Google Chrome development team shipped basic support for SVG favicons, already available in Chrome Canary and expected to be released in Chrome 80. Firefox supports SVG favicons since its version 41.
There are some good examples out there about taking advantage of this, like Thomas Steiner's implementation to make a light and dark mode favicon using media queries.
Since SVG can render text and emojis are text, I made a little experiment to have an emoji as favicon. After some tweaks, it worked!
To do so, I set the favicon size (32 pixels) as both font-size and vertical baseline:
<!-- favicon.svg -->
<svg xmlns="https://www.w3.org/2000/svg">
<text y="32" font-size="32">🚀</text>
</svg>Then I include the favicon SVG file in the head of my page:
<!-- index.html -->
<link rel="icon" href="/favicon.svg">Flatten emojis in Firefox
Some time ago I implemented emoji silhouettes as in this article.
As an SVG can be modified via CSS, I set the text color as transparent using fill and use its text-shadow to color its background.
<!-- favicon.svg -->
<svg xmlns="https://www.w3.org/2000/svg">
<style>
text {
fill: transparent;
text-shadow: 0 0 0 white;
}
</style>
<text y="32" font-size="32">🚀</text>
</svg>The result is a flat emoji as favicon!
It only works in Firefox, though.
