HTML

Contents

• Emoji favicon
• SVG favicon

Emoji favicon

You can use an emoji as a favicon by encoding it in an SVG data URL.

<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"
/>

SVG favicon

The age of SVG favicons has arrived, enabling the creation of favicons that support both dark and light mode through media queries.

<svg>
  <style>
    path {
      fill: #000;
    }

    @media (prefers-color-scheme: dark) {
      path {
        fill: #fff;
      }
    }
  </style>
  <path />
</svg>