Complete Configuration Specification Guide for Frontend Site Favicon

A standard ICO file supports embedding multiple bitmaps of different sizes in a single container, and the common configuration includes three sizes: 16×16, 32×32 and 48×48. Different usage scenarios automatically match the corresponding size: 16×16 is used for browser tab bars, 32×32 for bookmark bars, and 48×48 for desktop shortcuts.

The multi-size storage of ICO files follows the ICO format specification, each size corresponds to an independent bitmap data block, and the browser reads the bitmap of the corresponding size according to the current rendering scenario, so there is no need to generate multiple independent files. Older IE browsers only support reading favicons in ICO format, so keeping favicon.ico in the root directory can be compatible with access from older versions.

Modern browsers such as Chrome, Firefox, and Edge all support favicons in PNG format. The declaration method uses the link tag to add the corresponding size attribute, and core configuration requires two specifications: 32×32 and 192×192. 32×32 matches high-resolution tab bar rendering in modern browsers, and 192×192 is used for native PWA application icons on Android.

The standard declaration code is <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> and <link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">. Browsers will automatically select the corresponding size to load according to the scenario.

Some modern browsers support favicons in SVG format. SVG can achieve color adaptation under different themes through built-in media queries to adapt to system dark mode switching. The principle of SVG adaptation is to add a media query for prefers-color-scheme in the SVG code, and define the icon fill color under light and dark modes respectively.

To declare an SVG favicon, use type="image/svg+xml" to specify the file format. It has a higher priority than traditional ICO and PNG, and browsers load SVG format first. Developers can use an SVG to ICO converter to convert the edited adapted SVG to ICO format to be compatible with more access scenarios.

Apple iOS provides a dedicated icon for web pages added to the home screen, namely apple-touch-icon. The current specification requires a 180×180 PNG icon. Early versions supported declarations of multiple different sizes, and iOS 12 and later versions prioritize the 180×180 size to match all Apple devices.

The standard declaration code is <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">. There is no need to add the size attribute, and the iOS system will automatically recognize the 180×180 size for adaptation. Rounded corners and highlight effects are automatically processed by the iOS system, and developers do not need to pre-process rounded corners.

PWA applications need to configure the manifest.json file to declare basic application information, which needs to include an icon field with the corresponding size, declaring a 512×512 application icon to meet PWA installation requirements. theme-color needs to be declared in both the meta tag and manifest, and is used for theme color matching of the browser address bar.

For a complete configuration, add <meta name="theme-color" content="#ffffff">, and add a field with the same name in manifest.json, keeping the value consistent with the meta tag, to adapt to the address bar rendering logic of different browsers.