前端站点favicon完整配置规范指南

标准ICO文件支持在单个容器内内嵌多个不同尺寸的位图，通用配置会同时包含16×16、32×32、48×48三种尺寸。不同使用场景会自动匹配对应尺寸，16×16用于浏览器标签栏，32×32用于书签栏，48×48用于桌面快捷方式。

ICO文件的多尺寸存储遵循ICO格式规范，每个尺寸对应独立的位图数据块，浏览器会根据当前渲染场景读取对应尺寸的位图，不需要生成多个独立文件。老旧IE浏览器仅支持读取ICO格式的favicon，保留根目录favicon.ico可兼容旧版本访问。

现代Chrome、Firefox、Edge等浏览器均支持PNG格式的favicon，声明方式使用link标签添加对应size属性，核心需要配置32×32和192×192两种规格。32×32匹配现代浏览器高分辨率标签栏渲染，192×192用于安卓系统原生PWA应用图标。

标准声明代码为<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">和<link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">，浏览器会根据场景自动选择对应尺寸加载。

部分现代浏览器支持SVG格式favicon，SVG可通过内置媒体查询实现不同主题下的颜色适配，适配系统暗色模式切换。SVG适配的原理是在SVG代码内添加prefers-color-scheme的媒体查询，分别定义亮色和暗色模式下的图标填充颜色。

声明SVG favicon需要使用type="image/svg+xml"指定文件格式，优先级高于传统ICO和PNG，浏览器优先加载SVG格式。开发者可以使用SVG转ICO工具将编辑后的适配SVG转换为ICO格式，兼容更多访问场景。

苹果iOS系统为添加到主屏幕的网页提供专用图标，即apple-touch-icon，当前规范要求使用180×180尺寸的PNG格式图标。早期版本支持多个不同尺寸声明，iOS 12及之后版本优先使用180×180尺寸匹配所有苹果设备。

标准声明代码为<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">，不需要添加size属性，iOS系统会自动识别180×180尺寸做适配。圆角和高光效果由iOS系统自动处理，不需要开发者提前做圆角处理。

PWA应用需要配置manifest.json文件声明应用基础信息，其中需要包含对应尺寸的图标字段，对应声明512×512尺寸的应用图标，满足PWA安装要求。theme-color需要在meta标签和manifest中同时声明，用于浏览器地址栏的主题颜色匹配。

完整配置需要添加<meta name="theme-color" content="#ffffff">，同时在manifest.json中添加同名字段，值与meta标签保持一致，适配不同浏览器的地址栏渲染逻辑。