Emoji Favicon Generator

How the Emoji Favicon Maker works

Emoji favicon generator: the one-line SVG

SVG favicons are supported in every current browser except Safari, which quietly falls back to whatever else you provide. That combination makes this a genuinely practical technique rather than a party trick.

How it works. The <link rel="icon"> element takes any image URL, and a data URI is a URL. Put an SVG document in it — a <text> element with the emoji, optionally over a <circle> or <rect> — and the browser renders it as the tab icon at whatever size it needs. Because SVG is resolution independent, one declaration covers the tab, the bookmark bar and a retina display.

The encoding is where it goes wrong. A raw SVG dropped into an href will break: # starts a fragment, so a hex colour truncates the URI, and <, > and " are not safe unescaped. encodeURIComponent handles all of it. Base64 also works and is what most old snippets use, but it is about a third larger and completely unreadable — for something this small, percent-encoding is strictly better.

Centring the text. text-anchor: middle centres horizontally and dominant-baseline: central centres vertically, so the emoji sits in the middle of the 100×100 viewBox regardless of its size. Without the baseline property the emoji sits on the text baseline and appears to fall out of the bottom of the icon — the single most common thing to get wrong here.

Emoji render as the platform draws them. The SVG does not carry the artwork; it references a character, and the operating system supplies the glyph. Your 🎯 is Apple's on a Mac, Google's on Android and Microsoft's on Windows. That is usually fine, and occasionally a reason to use a real image instead: if the exact appearance is part of your brand, this is the wrong technique.

Sixteen pixels is the real constraint. Browser tabs render the icon at 16 CSS pixels. Detailed emoji turn to mush at that size, and a second character is unreadable. Simple, high-contrast, single-shape emoji survive; a coloured backdrop helps a great deal by giving the glyph a consistent edge against both light and dark browser chrome.

Safari and the fallback. Safari does not render SVG favicons from a data URI, so it uses whatever other icon it can find, or nothing. If Safari matters, ship a small PNG alongside and list it second — browsers pick the format they support. Safari does read <link rel="mask-icon">, which takes a monochrome SVG.

Dark mode. SVG favicons can carry their own <style> with a prefers-color-scheme media query, so the icon can change with the browser's theme. That is a real advantage over a PNG, and worth remembering if your logo disappears against dark browser chrome.

Related tools