windows任务栏图标仅识别ico文件中的48×48和256×256图层，chrome/edge/firefox均忽略png的sizes属性；macos dock依赖带type="image/png"的32×32和128×128 png；android pwa只读manifest.json中icons数组的192x192和512x512；ios主屏幕图标仅认apple-touch-icon且需180×180等标准尺寸png。
Windows 任务栏图标只认 ICO 文件里的 48×48 和 256×256 图层
Chrome、Edge、Firefox 在 Windows 上显示任务栏图标时，不会读 sizes 属性，也不管你声明了 192x192.png —— 它只从 .ico 文件里提取对应图层。如果你的 favicon.ico 里没塞进 48×48 和 256×256 这两个尺寸，任务栏图标大概率是模糊、拉伸或直接 fallback 到浏览器默认图标。
- 用在线工具（如 favicon.io）生成 ICO 时，必须勾选“48×48”和“256×256”，不能只导出 16×16/32×32
- 本地用 ImageMagick 批量生成：
convert icon-256.png icon-48.png icon-32.png icon-16.png favicon.ico - 别指望 PNG +
sizes="256x256"能替代 ICO —— Windows WebView2 和旧版 Edge 会完全忽略它
macOS Dock 图标依赖 rel="icon" 的 32×32 和 128×128 PNG，但需 type 显式声明
macOS Safari 和 Chrome 会优先从 rel="icon" 声明中找 32×32 和 128×128 的 PNG，但前提是 type="image/png" 必须写，且文件头真实尺寸匹配。漏掉 type 或尺寸对不上，Dock 就退回 ICO 里的 32×32（如果存在），否则显示空白。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">✅ -
<link rel="icon" sizes="32x32" href="/favicon-32.png">❌（无type，Safari 可能跳过） - 文件名建议带尺寸标识，比如
favicon-128.png，避免误用 256×256 文件却声明sizes="128x128" - macOS 不支持 SVG 作为 Dock 图标，
type="image/svg+xml"声明会被忽略
Android PWA 启动图和桌面快捷方式只读 manifest.json，HTML 里的 link 标签不生效
哪怕你在 里写了十行 rel="icon"，只要 manifest.json 的 icons 数组没配好，Android 设备安装 PWA 后启动图就是灰色块，桌面快捷方式图标也糊成一团。浏览器根本不会去解析 HTML 中的 sizes 来 fallback。
-
manifest.json中icons至少要包含192x192和512x512两项，sizes字段值必须是字符串，如"192x192"，不是数字或带单位 - 确保
href是相对于 manifest 文件的路径，不是相对于 HTML；推荐全用绝对路径，比如"/icons/icon-192.png" - HTML 中仍需保留
<link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192.png">，这是给非 PWA 场景（如书签）用的，和 manifest 分工明确 - 检查
manifest.json是否被正确加载：DevTools → Application → Manifest → 点击 “Update on reload” 并刷新
iOS 主屏幕图标完全无视 link[rel="icon"]，必须用 apple-touch-icon 单独声明
iOS Safari 对 rel="icon" 视而不见，无论你写多少个 sizes、多高清的 PNG，它只看 rel="apple-touch-icon"。而且它不按 sizes 选图，只取第一个可加载的 apple-touch-icon 链接，然后硬缩放到设备所需尺寸——所以文件本身必须是 180×180（iPhone）、167×167（iPad Pro）等标准尺寸，不能靠声明“假装”有那个大小。
-
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">✅（推荐写法，不加sizes更稳妥） -
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">⚠️（某些旧版 Safari 解析sizes异常，易 404） - 文件必须是 PNG，无透明边距、无圆角、背景透明 —— iOS 会自动加圆角和阴影，你加了反而失真
- 路径必须可公开访问，且服务器返回
200 OK和Content-Type: image/png；Nginx 需显式放行.png类型
sizes 的逻辑判断。你得把每个系统要的物理像素尺寸，分别打到对应格式的文件里，再用对应的 link 标签挂上去 —— 没有“一图通吃”的 shortcut。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
