favicon.ico必须放在网站根目录，浏览器会自动请求该路径；需同时配置rel="icon"声明png/svg图标、rel="apple-touch-icon"专供ios主屏，且manifest.json的icons仅用于pwa安装，三者缺一不可。
favicon.ico 必须放在网站根目录
绝大多数浏览器（包括 Chrome、Edge、Safari 旧版本）会自动向 /favicon.ico 发起请求，无论 HTML 中是否声明。如果这个路径返回 404，控制台会出现明显错误，且图标可能完全不显示——哪怕你写了其他 <link> 标签。
实操建议：
- 把最兼容的
favicon.ico（16×16 和 32×32 双尺寸，ICO 格式）直接丢到项目根目录，比如https://example.com/favicon.ico - 不要试图用
<link rel="icon" href="/assets/favicon.ico">替代根路径，它无法覆盖自动请求行为 - 服务端需确保该路径可被公开访问（Nginx/Apache 配置中别误加 deny 规则）
现代设备要用 rel="icon" + type + sizes 显式声明 PNG/SVG
iOS Safari、Android Chrome、新版 Edge/Firefox 更倾向读取显式声明的高分辨率图标，尤其是 PWA 场景。只靠 favicon.ico 会导致 iPhone 添加到主屏时图标模糊或拉伸。
关键点：
- 必须写
rel="icon"，不能只写rel="shortcut icon"（后者已被视为过时，部分浏览器忽略sizes） - PNG 图标需指定
type="image/png"和精确sizes，例如sizes="192x192"或sizes="512x512" - Safari 15.4+ 支持
rel="icon" type="image/svg+xml"，但 iOS 仍不支持 SVG 作为添加主屏图标，所以 SVG 仅适合桌面端补充
示例片段（放在 中）：
<link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"><link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png">
iOS 添加到主屏必须用 apple-touch-icon
iOS Safari 完全忽略 rel="icon" 声明，只认 rel="apple-touch-icon"。漏掉这条，用户长按「添加到主屏幕」时，系统会 fallback 到截屏或缩放 favicon.ico，结果通常是严重失真。
注意事项：
- 尺寸至少提供
180x180（iPhone X 及以后机型默认使用），推荐统一用180x180PNG，无圆角、无阴影、透明背景会被 iOS 自动加效果 - 不要加
sizes属性值带引号（如sizes="180x180"是错的），正确写法是sizes="180x180"（引号合法，但某些旧版 Safari 解析异常；稳妥起见可省略，因 iOS 只读一个） - 路径必须是绝对路径或从根开始，相对路径容易 404
正确写法：
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
不要依赖 manifest.json 单独解决图标问题
manifest.json 的 icons 字段只在 PWA 安装或桌面 PWA 启动时生效，对常规网页标签页图标、书签图标、iOS 添加主屏等场景**完全无效**。很多开发者以为配了 manifest 就一劳永逸，结果发现 Safari 标签页还是显示文字或默认地球图标。
真正起效顺序是：
- 标签页图标：优先匹配
<link rel="icon">，fallback 到/favicon.ico - iOS 主屏图标：只看
<link rel="apple-touch-icon">，无视 manifest - PWA 安装图标：只读
manifest.json中icons，且要求src路径可跨域访问（不能是 blob: 或 data:）
所以三者要独立配置，缺一不可。最容易被忽略的是：iOS 不查 manifest，也不查 rel="icon"，只查那一条 apple-touch-icon —— 这个细节一旦漏掉，移动端体验就断层了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
