必须仅用rel="icon"，禁用rel="shortcut icon"；ico需content-type为image/x-icon，png需sizes="nxn"且服务器返回image/png；svg需type="image/svg+xml"及对应mime；apple设备需rel="apple-touch-icon"，pwa需manifest.json；缓存问题须改href路径解决。
rel="icon" 是唯一有效的取值，别写 shortcut icon
Chrome 90+、Firefox 84+、Safari 15+ 和 Edge 90+ 全部忽略 rel="shortcut icon"。它不是兼容写法，而是历史残留；同时声明 rel="shortcut icon" 和 rel="icon" 可能导致浏览器取第一个链接（比如加载了错误尺寸或格式的文件），甚至干扰 PWA 的 manifest.json 解析。
必须只用：<link rel="icon" href="/favicon.ico" type="image/x-icon">
- 服务器返回的 Content-Type 必须是
image/x-icon（.ico）或image/png（.png），否则 Chrome 静默跳过，控制台不报错 - 本地开发用
file://协议时，Chrome 直接禁用 favicon 加载——必须起服务，例如npx serve -
href路径要用根相对路径（如/favicon.ico），不能用./favicon.ico，否则子页面（如/blog/）会 404
sizes 属性只对 PNG/SVG 生效，且格式必须严格为 "NxN"
sizes 不是装饰字段，它是浏览器选图的关键依据。但它对 type="image/x-icon" 完全无效——因为 .ico 文件本身可内嵌多尺寸，浏览器自动提取。
正确写法示例：<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
- 错误写法包括：
sizes="32"、sizes="32px"、sizes="32×32"（中文乘号）、sizes="16x16 32x32"（不支持空格分隔） - 只提供
sizes="16x16"PNG，在 Retina 屏或 Android PWA 安装界面中会被跳过，显示空白图标 - 高 DPI 设备（如 MacBook Pro、iPhone）需要至少
192x192和512x512尺寸的 PNG，否则模糊或 fallback 到低分辨率
Apple 设备和 PWA 启动图标不走 rel="icon"
iOS/macOS Safari 完全不识别 rel="icon"，必须单独加 rel="apple-touch-icon"；Android Chrome PWA 安装图标则依赖 manifest.json，HTML 中的 rel="icon" 对它无影响。
关键声明示例：
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" sizes="180x180"><link rel="manifest" href="/site.webmanifest"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
-
apple-touch-icon推荐 180×180 PNG，无圆角、无透明边距（iOS 自动加效果） -
site.webmanifest必须包含icons数组，定义192x192、512x512等尺寸，且src路径需与 HTML 中一致 - Windows 10/11 的磁贴图标靠
msapplication-TileImage，但已逐步被 manifest 替代，非必需
SVG favicon 要谨慎启用，type 和 MIME 必须严格匹配
Chrome 110+、Firefox 90+、Safari 16+ 支持 SVG favicon，但要求极严：必须声明 type="image/svg+xml"，且服务器响应头 Content-Type 必须为 image/svg+xml，缺一不可。
推荐顺序：<link rel="icon" href="/favicon.svg" type="image/svg+xml"> 放在最前，再 fallback 到 PNG/ICO。
- 没写
type或写错（如image/svg），Chrome 110+ 直接拒绝加载 - Nginx/Apache 若未配置
.svg的 MIME 类型，返回text/plain，图标彻底失效 - SVG 图标无法内嵌多尺寸，所以仍需配合
sizes="any"（仅 Safari 支持）或保留 PNG fallback
href 路径，比如加时间戳：/favicon-20260609.svg。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
