必须用 rel="icon"，不可用 rel="shortcut icon" 或 rel="apple-touch-icon"；需声明 type 属性、使用绝对路径、优先提供 .ico 多尺寸文件并补充 png；注意缓存、服务器配置及移动端额外要求。
rel="icon" 的写法和常见错误
必须用 rel="icon"，不能写成 rel="shortcut icon" 或 rel="apple-touch-icon"（后者是独立用途）。现代浏览器只认 rel="icon" 作为标准 favicon 关联方式；旧写法可能在某些场景下被兼容，但行为不可靠，尤其在 PWA 或桌面安装场景下会失效。
常见错误包括：
- 漏掉
type属性导致 MIME 类型推断失败（比如 .ico 文件没声明type="image/x-icon"） - 路径写成相对路径但未考虑 HTML 所在层级（如子目录页加载根目录下的
/favicon.ico必须用绝对路径） - 多个
<link rel="icon">标签并存时，浏览器按顺序取第一个合法且可加载的，后面即使尺寸更优也忽略
支持的格式和尺寸怎么选
Chrome、Edge、Firefox 支持 .ico、.png、.svg；Safari 目前不支持 .svg 作为 favicon（仅支持 apple-touch-icon 场景）。
推荐组合方案：
- 主图标用
.ico：兼容所有浏览器，包含 16×16 和 32×32 多尺寸（Windows 任务栏、地址栏小图标都依赖这个） - 补充高清 PNG：加一条
<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png">，供 Android PWA 使用 - 不要只放
sizes="192x192"而不配.ico，否则 IE 和老 Edge 会 fallback 到默认文档图标
为什么加了 link 但图标还是不显示
最常被忽略的是缓存问题：浏览器对 /favicon.ico 有强缓存策略，哪怕你改了 HTML 中的 href，它仍可能请求旧路径或旧文件。排查顺序如下：
- 打开开发者工具 → Network 标签页 → 刷新页面 → 筛选
favicon，看是否返回 404 或 304 - 检查响应头中是否有
Cache-Control: no-cache或max-age过长；本地开发可用href="/favicon.ico?v=2"强制刷新 - 确认服务器是否拦截了
.ico请求（Nginx/Apache 常配置为拒绝非白名单后缀，需显式放开image/x-icon） - SVG 图标必须是「无交互、无脚本」的静态内容，含
<script></script>或外部引用的 SVG 会被多数浏览器拒载
移动端和 PWA 场景要额外加什么
单纯 rel="icon" 不足以支撑 iOS 添加到主屏幕或 Android 安装 PWA。必须配合：
- iOS 需要
<link rel="apple-touch-icon" href="/apple-touch-icon.png">，且要求 PNG、无透明边框、尺寸至少 180×180 - PWA 必须有
manifest.json，其中icons字段定义不同尺寸的 PNG，且该文件需通过<link rel="manifest" href="/manifest.json">声明 - 注意：iOS 不读取
manifest.json，所以apple-touch-icon是 iOS 独立必需项，漏掉就无法正确显示添加到主屏幕的图标
实际项目里，一个图标资源往往要导出至少 4 种：16×16.ico、32×32.ico、180×180.png（iOS）、192×192.png（PWA），少一个就可能在某个环境掉链子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
