link 的 sizes 属性仅对 rel="icon" 有效但被所有主流浏览器无视，实际图标选择依赖文件真实尺寸、type、声明顺序及 manifest.json 中 icons 的 sizes 字段。
link 的 sizes 属性只对 rel="icon" 有效，但浏览器基本不读它
你写 sizes="192x192" 或 sizes="16x16 32x32"，Chrome、Firefox、Edge、Safari（含 iOS）全都不拿它做图标选择依据。它不会报错，也不会被忽略——而是被彻底无视。标准里写了它是“提示尺寸”，但现实是：浏览器只看文件真实像素尺寸、type 值、声明顺序，以及 manifest.json 里的 sizes 字段。
哪些地方加 sizes 是白忙活
常见无效写法包括：
-
<link rel="shortcut icon" href="favicon.ico" sizes="16x16">——rel="shortcut icon"已过时，sizes在这种上下文里完全无意义 -
<link rel="icon" href="icon.svg" sizes="any">—— 多数桌面浏览器不支持 SVG favicon，iOS 更不认这个声明 - 只写一个带
sizes的<link>就以为搞定 PWA 图标 —— 没配manifest.json，PWA 根本不会加载图标 -
<link rel="apple-touch-icon" sizes="180x180" href="apple.png">—— iOS 只认rel="apple-touch-icon"这个值，sizes不参与匹配，纯属冗余
真正起作用的 sizes 在哪
唯一被浏览器实际解析并用于图标匹配的 sizes，只出现在 manifest.json 的 icons 数组里：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
{"src": "icon-192.png", "sizes": "192x192", "type": "image/png"}
除此之外，<link> 中的 sizes 仅起到“多声明提高命中率”的辅助作用 —— 浏览器虽不按它选图，但多个 <link> 并列时，可能因顺序或加载成功率影响最终展示结果。所以建议这样写：
-
<link rel="icon" href="/favicon.ico">（兜底，自动识别 ICO 内多尺寸） -
<link rel="icon" type="image/png" href="/icon-32.png" sizes="32x32">（虽sizes不生效，但显式声明能提升兼容性） -
<link rel="apple-touch-icon" href="/apple-touch-icon.png">（iOS 强制路径，不看sizes）
最容易被忽略的硬约束：ICO 文件必须自带多尺寸
哪怕你写了十行带 sizes 的 <link>，只要 favicon.ico 文件里只嵌了 16×16 像素，Windows 任务栏、书签栏就只能显示模糊小图 —— sizes 不会触发缩放，浏览器连试都不试。生成 ICO 文件时必须打包 16×16、32×32、48×48（甚至 256×256）多个尺寸进同一文件，否则桌面端图标体验直接崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
