SVG Favicon Emoji

SVG emoji favicons — the six-line trick that went viral

In early 2020 Lea Verou and Igor Sheludko tweeted a one-liner that turned an emoji into a complete favicon using only an inline SVG with a single <text> element. The hack is shockingly simple: browsers that support SVG favicons render the emoji using the operating system font, which means the tab icon adapts to Apple, Android, Microsoft or Twemoji style for free — no PNG export, no multi-size sprite, no separate file.

The minimum SVG is:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <text y=".9em" font-size="90">🚀</text>
</svg>

And you embed it directly in your HTML, with no separate file on the server, as a data URI:

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">

Why this works

SVG <text> falls back to the system font stack, and modern operating systems ship a color emoji font (Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji). The browser draws the glyph at the requested size and presents it as the tab icon. Because rendering is delegated to the OS, the emoji always looks "native" — Safari users see Apple emoji, Windows users see Microsoft, Android users see Google. The shape adapts to the platform with no extra work.

Browser support and fallbacks

Chrome 80+, Firefox 41+ and Safari 9+ render SVG favicons. Safari's support has been spotty across versions, especially on iOS where the tab icon and the home-screen icon are different concerns: SVG favicons work for the desktop tab but iOS home-screen icons still need a PNG apple-touch-icon. The safe pattern is to declare both:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

When to use it (and when not)

• Perfect for: rapid prototyping, MVPs, personal sites, internal dashboards, low-effort branding, per-page favicons (different emoji per route).
• Famous adopters: Lea Verou's blog, Vercel's @vercel/og docs, GitHub Pages templates, dozens of static-site generators.
• Avoid for: serious product branding (emoji rendering varies wildly between OS vendors — Apple's flat style vs Microsoft's 3D vs older Android), pixel-perfect logos, anything that needs sub-16px legibility.

FAQ

Does it work on iOS Safari? The desktop and iPad versions of Safari render the SVG favicon correctly. iOS home-screen icons (when a user "Adds to Home Screen") still require a real PNG via apple-touch-icon — the SVG path is ignored for that flow.

Does it adapt to dark mode? Yes, in a sense — the emoji glyph is rendered by the OS font, and color emoji fonts ship pre-colored. The icon doesn't recolor itself, but the colorful pixels naturally pop against both light and dark browser chrome.

Will the favicon print or appear in PDFs? Favicons aren't printed by browsers, but if you embed the SVG elsewhere in the page (e.g., as a logo) it will print as the OS emoji, including in print-to-PDF flows.

Can I get a single consistent look across platforms? Not with a pure-emoji approach. If you need byte-for-byte consistency, switch to Twemoji SVG (the open-source Twitter set) and inline its path data — but at that point you've replaced the six-line hack with a regular SVG icon.