Generate Adaptive Favicon From Text

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.

All fonts available in the Google Fonts library are supported. The selected font is fetched at generation time and the text is converted to vector paths, so the downloaded favicon does not require the font to be installed on the viewer's device.

There is no hard character limit, but favicons are displayed very small (typically 16x16 or 32x32 px). For best legibility, use one or two characters, a single letter, abbreviation, or symbol works best. Longer strings will shrink and may become illegible at small sizes.

The adaptive SVG favicon embeds both color variants and uses a prefers-color-scheme media query to switch between them. Choosing contrasting colors, for example a dark background with light text for light mode, and a light background with dark text for dark mode, keeps the favicon legible against the browser's tab bar in both themes.

Four shapes are available for the favicon background:

• Square — a plain rectangle with no rounding.
• Rounded — a rectangle with rounded corners, similar to app icons.
• Circle — a perfect circle background.

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.

Yes. All fonts available on Google Fonts are released under open-source licenses that permit commercial use. The vast majority are licensed under the SIL Open Font License (OFL) or the Apache License 2.0, both of which allow free use in personal and commercial projects with no attribution required in most cases.

Because this generator converts text to vector paths, the font itself is not embedded in the output, only the resulting shapes are. This further simplifies licensing for end-users.

You can verify the specific license for any font on the Google Fonts attribution page.

Font files are fetched from the Google Fonts CDN, but all rendering, converting your text to vector paths, applying colors and shapes, and generating the favicon files happens entirely in your browser. Your text and the resulting images are never uploaded to any server, and nothing is stored.