Generate Adaptive Favicon From Image

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.

SVG, PNG, and JPG files up to 5 MB are supported. SVG is the recommended format because it is vector-based, so each output size is rendered at native quality rather than being upscaled from a raster source.

For raster images (PNG or JPG), 512x512 pixels or larger is recommended. The generator will downscale your image to produce all required sizes, so starting larger preserves sharpness. For SVG files, size does not matter since they are resolution-independent.

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. It also supports the prefers-color-scheme media query, which makes 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.

No. All processing happens entirely in your browser using WebAssembly and the Canvas API. Your files never leave your device and are not stored anywhere.

No. The dark icon is optional. If you only upload a light icon, a standard (non-adaptive) set of favicons is generated. Uploading a dark icon enables the adaptive SVG favicon that switches automatically based on the user's system preference.

When a raster image (PNG or JPG) is used, it is embedded inside the adaptive SVG as a base64-encoded <image> element stretched to fill a 512x512 canvas. The outer SVG container still scales to any display size, but the pixel data inside does not. The icon may appear soft or blurry at very small sizes like 16x16 or 32x32.

SVG icons are embedded differently. Their vector content is inlined directly, so the adaptive SVG stays fully resolution-independent and renders crisp at every size. For the best-looking adaptive favicon, SVG sources are strongly recommended.