Emoji icon

Using an emoji as favicon with SVG

by

SVG favicons are being supported by browsers, SVG can render text and emojis are text as they are part of the unicode standard.


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!

A browser tab using a rocket emoji as favicon

To do so, I set the favicon size (32 pixels) as both font-size and vertical baseline:

<!-- favicon.svg -->
<svg xmlns="http://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="http://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!

A firefox tab using a rocket emoji silhouette as favicon

It only works in Firefox, though.

A chrome tab using a rocket emoji silhouette as favicon