Generate Adaptive Favicon From Emoji

An adaptive favicon automatically switches between a light and a dark version based on the user's system color scheme preference. This is achieved using an SVG favicon with a prefers-color-scheme media query embedded inside, so the browser picks the right variant without any JavaScript.

Five artwork styles are supported:

• Twemoji — Twitter's open-source emoji set, widely recognised and clean.
• OpenMoji — Open-source emojis with a hand-drawn, expressive look.
• Blobmoji — Google's older blob-shaped emoji style, nostalgic and playful.
• Noto — Google's Noto Emoji set, balanced and cross-platform consistent.
• Fluent — Microsoft's modern, 3D-style emoji from the Fluent design system.

The adaptive SVG favicon embeds both variants, one for light mode and one for dark mode, and uses a prefers-color-scheme media query to switch between them. Choosing contrasting colors (e.g. a dark background for light mode and a light background for dark mode) ensures the emoji remains legible against the browser's tab bar in both themes.

favicon.ico is a legacy raster format supported by all browsers, including older ones. It bundles multiple fixed sizes (16x16, 32x32, 48x48) into a single file and serves as a reliable fallback. In the install snippet it is declared with sizes="32x32" which scopes it as a fixed-size icon so modern browsers do not pick it as a general-purpose icon.

favicon.svg is a modern vector format that scales to any size without quality loss and supports the prefers-color-scheme media query, making adaptive light/dark switching possible — something ICO cannot do. It is declared without a sizes attribute and placed after the ICO, so modern browsers see it as the preferred scalable icon and use it instead.

Older browsers that do not support SVG ignore the SVG link and fall back to the ICO automatically.

Alongside the browser favicons, the generator produces a 192x192 and a 512x512 PNG icon referenced in the bundled site.webmanifest. These are required for Android home screen shortcuts and PWA install prompts. A 180x180 Apple Touch Icon PNG is also included for iOS home screen bookmarks.

The emoji SVG artwork is fetched from a public CDN (e.g. jsDelivr for Twemoji), but all compositing, adding the background color, shape, and scale, happens entirely in your browser. No images or personal data are uploaded to any server, and nothing is stored.

Not every emoji is available in every artwork style, coverage varies by provider. If an emoji fails to load, try switching to a different style (e.g. Twemoji has the broadest coverage). A toast notification will appear if the fetch fails so you know to try another option.

It depends on the artwork style you choose. Each provider has its own license:

• Twemoji — licensed under CC BY 4.0. Commercial use is allowed as long as you credit Twitter/X (e.g. "Emoji artwork provided by Twemoji").
• OpenMoji — licensed under CC BY-SA 4.0. Commercial use is allowed, but derivative works must be shared under the same license and attribution is required.
• Blobmoji — licensed under Apache 2.0. Commercial use is allowed with no attribution requirement.
• Noto Emoji — licensed under Apache 2.0. Commercial use is allowed with no attribution requirement.
• Fluent Emoji — licensed under MIT. Commercial use is allowed with no attribution requirement.

When in doubt, verify the current license terms with each provider directly, as licenses can change over time.