sizes属性在现代浏览器中被全部静默忽略，真正起作用的是文件真实像素尺寸、type声明、声明顺序及manifest.json或media查询；必须提供.ico的16×16/32×32/48×48/256×256四图层、android要求192×192和512×512 png、ios需180×180等apple-touch-icon、macos dock依赖32×32和128×128 png且type不可省略。
sizes 属性在现代浏览器中基本不参与图标选择逻辑——Chrome 90+、Firefox 84+、Safari 15+、Edge 90+ 全部静默忽略它。你写 sizes="192x192"，浏览器既不报错，也不据此加载；真正起作用的是文件真实像素尺寸、type 声明是否匹配、声明顺序，以及是否配合 manifest.json 或 media 查询。
哪些尺寸必须提供（按平台硬性要求）
不是“推荐”，而是“缺一不可”：
-
/favicon.ico必须包含16x16、32x32、48x48和256x256四个图层 —— Windows 任务栏只读取其中的48x48和256x256，漏掉任一图层，图标就模糊或 fallback 到默认 - Android PWA 安装和主屏快捷方式只认
sizes="192x192"和sizes="512x512"的 PNG 文件，且文件头真实尺寸必须严格等于该值，不能是缩放图或命名误导 - iOS/macOS 主屏幕图标完全不看
rel="icon"，必须单独声明rel="apple-touch-icon"，且至少提供180x180（iPhone）、167x167（iPad Pro）、152x152（旧 iPad）三张，每张都需独立<link> - macOS Dock 图标依赖
32x32和128x128的 PNG，且type="image/png"不可省略；否则 Safari 可能跳过整条声明
为什么写了 sizes="32x32" 却没显示 32×32 图标
常见失效原因不是语法错，而是底层匹配机制被绕过：
- 文件实际尺寸是
64x64，但声明了sizes="32x32"→ 浏览器仍按 64×64 解析，可能模糊渲染 -
type缺失或错误：比如<link rel="icon" href="icon.png" sizes="32x32">没写type="image/png"→ Safari 和部分安卓 WebView 直接跳过 - 声明顺序错误：把
rel="icon" type="image/png" sizes="192x192"放在rel="icon" href="/favicon.ico"前面 → 浏览器取第一个能加载的，后面高清图全被丢弃 - 路径不是绝对路径：子页面如
/blog/下引用apple-touch-icon.png会请求/blog/apple-touch-icon.png并 404，iOS 就放弃加载
SVG 图标要不要加 sizes="any"
可以加，但作用非常有限：
-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any">在 Chrome/Firefox 标签页有效，但 Safari（包括 iOS）目前不支持 SVG 作为rel="icon"加载 -
sizes="any"对 SVG 是语义说明，不是必需；但若漏写type="image/svg+xml"，浏览器大概率当普通图片请求，然后因 MIME 不匹配而失败 - PWA 启动图、iOS 主屏、Windows 任务栏、macOS Dock 全都不支持 SVG 图标 —— 这些场景必须用 PNG 或 ICO
- SVG 优势在于单文件适配缩放，但高保真图标在移动端常因渲染引擎差异出现描边偏移或颜色异常，生产环境建议仅作补充，不替代 PNG
最易被忽略的一点：所有 sizes 值必须是纯英文小写 x 分隔的字符串，比如 "192x192"；写成 "192×192"（中文 ×）、"192px"、"192" 都会导致整条 <link> 被浏览器跳过——它不会提示，也不会 fallback，就是静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
