仅写 不够用，因 ios 忽略它而找 apple-touch-icon.png，android chrome 主屏幕需 sizes="196x196" png，safari 不支持 svg 作 rel="icon"，且旧版 safari 要求明确 type="image/png" 否则静默跳过。
直接放根目录的 favicon.ico 就能覆盖绝大多数桌面浏览器，但想在 iOS、Android、PWA 或高 DPI 屏上不翻车，必须手动加多组 <link> 标签——光靠自动发现或单个 ICO 文件会漏掉至少三类设备。
为什么只写 不够用
这个写法对 Chrome/Firefox/Edge 桌面端基本稳，但实际有硬伤：
- iOS 会忽略它，转而找
apple-touch-icon.png，且默认加圆角和反光，除非你显式声明rel="apple-touch-icon-precomposed" - Android Chrome 主屏幕图标依赖
sizes="196x196"的 PNG，favicon.ico里的 32×32 位图它根本不认 - Safari（macOS/iOS）不支持
rel="icon"加载 SVG，但支持rel="mask-icon"用于单色遮罩，这和普通图标是两套逻辑 - 某些旧版 Safari 会把没带
type="image/png"的 PNG 当成无效资源，静默跳过
必须写的四条关键 标签
按优先级和兼容性排序，这四行缺一不可：
-
<link rel="icon" href="/favicon.ico" type="image/x-icon">—— 兜底项，IE6–11、老版 Safari、部分国产浏览器全靠它 -
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">—— 高 DPI 桌面屏（如 MacBook Retina）首选，比 ICO 渲染更锐利 -
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon.png">—— iOS 必须项，“precomposed”禁用系统自动效果，否则你的扁平化设计会被强行加阴影 -
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-196.png">—— Android Chrome 主屏幕图标最低要求尺寸，低于 196×196 会被拉伸模糊
注意：sizes 值必须和文件实际像素完全一致，写 sizes="196x196" 但文件是 200×200，部分 Android 浏览器会拒用。
路径、缓存和服务器响应这三个地方最容易卡住
代码全对，图标还是不显示？八成栽在这三个环节：
- 路径用相对路径（如
href="images/favicon.png"）时，子路由页面（如/blog/post）会拼出错误请求地址；一律用根相对路径（/favicon.png）或绝对 URL - 浏览器对 favicon 缓存极深，改完图标后清缓存无效？试
href="/favicon.png?v=2"强制刷新，或者直接开无痕窗口验证 - 访问
https://yoursite.com/favicon-180.png返回 404 或 403？说明文件没传上去，或服务器没配 MIME 类型（Nginx 需加types { image/png png; }）
特别提醒：Next.js、Vite、Create React App 这类框架，public 目录下的文件虽可直接访问，但构建后可能被 hash 重命名，或开发代理规则拦截了 /favicon* 请求——别只信本地跑通，一定要查 Network 面板里真实发出的请求是否 200。
SVG 和 Web App Manifest 是加分项，不是必选项
如果已有完整 PNG/ICO 方案，再加这两项属于锦上添花：
-
<link rel="icon" type="image/svg+xml" href="/favicon.svg">—— Chrome/Firefox 支持，Safari 不支持rel="icon"加载 SVG，但可以配合rel="mask-icon"做 Safari PWA 单色图标 -
<link rel="manifest" href="/site.webmanifest">—— PWA 必需，里面定义icons数组（含 192×192 和 512×512 PNG），但仅当用户“添加到主屏幕”时才生效，不影响常规标签页图标
真正容易被忽略的是：iOS 的 apple-touch-icon 和 Android 的 196×196 图标不能共用一个文件——前者需要纯色背景（苹果规范要求无透明边距），后者允许透明。同一张 PNG 同时塞进两个 <link>，在 iPhone 上可能因边缘裁切异常而显示错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
