Why not just put the emoji in an SVG text element

A common shortcut is an SVG favicon with the emoji inside a <text> element. It works, but the browser draws the emoji with the visitor's system font, so the icon looks different on Windows, macOS, Android and Linux, and some systems show an empty box. It also gives you no ICO, no Apple touch icon and nothing for Google Search.

favicon.zip uses Twemoji vector artwork instead. The emoji becomes real paths in icon.svg, so the favicon looks identical everywhere and needs no font at all.

What you get

  • icon.svg with the emoji as vector paths, plus your background and corner rounding.
  • favicon.ico with 16, 32 and 48px layers, each rendered at its own size.
  • apple-touch-icon.png on an opaque background, since iOS turns transparency black.
  • PWA icons, a maskable icon and the manifest.

Making an emoji read at 16px

  • Pick emoji with one bold shape and few details. Faces, hearts, stars and single objects survive small sizes. Flags and scenes turn to noise.
  • A solid background behind a transparent emoji keeps it visible on both light and dark tabs.
  • Reduce padding so the emoji fills more of the square. Browser tabs give you very few pixels.
  • Skin tone modifiers are supported where the emoji has them.

Licence

Twemoji artwork is licensed CC-BY 4.0. The attribution line ships inside favicon-setup.md in the zip, so the credit travels with the files.

Questions

Can I use an emoji favicon on a commercial site?

Twemoji is CC-BY 4.0, which allows commercial use with attribution. The attribution text is included in the generated package.

Why does my emoji look different from the one on my phone?

Every platform draws emoji in its own style. favicon.zip uses Twemoji so the favicon looks the same for every visitor, rather than following each system's set.

Can I generate an emoji favicon from code?

Yes. POST {"emoji": "..."} to the HTTP API, or ask a coding agent connected to the MCP server.