HTML

• 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>