rel="icon" 的 sizes 属性仅作标注，浏览器忽略其选择逻辑；图标选用取决于 href 文件真实尺寸、type 与服务器 content-type 匹配度及 link 标签顺序。
rel="icon" 的 sizes 属性根本不起作用
浏览器（Chrome、Firefox、Safari、Edge）全部忽略 sizes 属性对 rel="icon" 的影响——它不参与图标选择逻辑，只起标注作用。你写 sizes="192x192"，浏览器不会据此加载或优先选用该图标；真正起效的是：href 指向的文件**真实像素尺寸**、type 是否匹配、服务器返回的 Content-Type 是否正确，以及它在 HTML 中出现的**顺序**。
- 多个
<link rel="icon">并存时，浏览器只取第一个能成功加载且通过校验的项，后面的全被跳过 -
sizes格式必须是小写x，如"32x32"；写成"32×32"（中文乘号）或"32px x 32px"会直接导致整条<link>被忽略 -
type="image/x-icon"仅适用于.ico文件；若用于 PNG，哪怕文件存在，也会静默失败
必须为每个尺寸单独声明 link 标签
别指望一个 sizes 声明覆盖所有场景。现代适配靠的是显式并列声明：每个尺寸对应一条 <link rel="icon">，且 href 必须指向**物理尺寸完全匹配**的文件。
- 桌面标签页常用：16×16 和 32×32 → 对应
/favicon-16x16.png、/favicon-32x32.png - 高 DPI 屏幕（Retina/MacBook）需要更大基础尺寸：48×48、64×64、96×96
- PWA 启动图和 Android 书签依赖：192×192 和 512×512 →
/favicon-192x192.png、/favicon-512x512.png -
.ico文件仍需保留：用工具打包 16×16/32×32/48×48 多尺寸进单个/favicon.ico，作为 IE 和旧环境兜底
Apple 设备必须用 rel="apple-touch-icon" 单独处理
iOS/macOS 完全不读 rel="icon"，哪怕你写了 sizes="180x180" 的 PNG，Safari 添加到主屏幕时仍 fallback 或拉伸。必须用 rel="apple-touch-icon" 显式声明，并满足严苛条件：
- 只支持 PNG 格式，且**必须无透明背景**（纯色底，iOS 会自动加圆角和阴影）
- 尺寸严格对应设备：iPhone 用 180×180，iPad Pro（12.9″ 第三代起）用 167×167，老款 iPad 用 152×152
- 不要加
sizes属性——iOS 忽略它；Android Chrome 才认，但那是另一套逻辑 - 路径必须绝对：
href="/apple-touch-icon-180x180.png"，不能是assets/icon.png - 验证方式：真机 Safari 打开网页 →「分享」→「添加到主屏幕」，看图标是否清晰无白边
type 和 Content-Type 不匹配会导致图标静默消失
HTML 中写的 type 只是提示，服务器响应头里的 Content-Type 才是判决依据。哪怕 <link type="image/png"> 写得再准，只要 Nginx / Vercel / Cloudflare 返回 text/plain 或空值，图标就一定不显示。
- 验证方法：直接在浏览器地址栏访问
https://yoursite.com/favicon-32x32.png，检查 Network 面板的 Response Headers 中Content-Type: image/png是否存在 - Vite 用户：把图标放
public/目录下；Next.js 用户：放public/；Nginx 用户：确认 MIME 类型配置包含image/svg+xml和image/x-icon - SVG 图标要谨慎：
type="image/svg+xml"必须声明，且 SVG 文件不能含外部引用（如<image href></image>）或 JS，否则 Safari 可能拒载
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
