不是所有浏览器都认 favicon.ico；现代浏览器基本支持但覆盖不全，Safari 完全忽略它，需配合 <link> 标签声明 SVG、Apple 图标和 Web App Manifest 才能覆盖主流环境。
favicon.ico 是不是所有浏览器都认这个文件名？
不是。现代浏览器基本都支持 favicon.ico，但仅靠它无法覆盖所有场景：Chrome、Edge、Firefox 在地址栏和标签页会优先用它；Safari（尤其是 iOS）完全忽略 favicon.ico，只读取 <link> 标签声明的 PNG 或 SVG；Android Chrome 会同时检查 favicon.ico 和 apple-touch-icon.png，但优先级不同。
所以不能只放一个 favicon.ico 就认为万事大吉。
必须加哪些 <link> 标签才能覆盖主流环境？
在 index.html 的 <head> 里按顺序写这四行，缺一不可：
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
说明：
立即学习“前端免费学习笔记（深入）”；
-
sizes="any"告诉浏览器这个favicon.ico是多尺寸容器，兼容性更好；不加可能被某些新版 Firefox 忽略 -
favicon.svg对高分屏和深色模式更友好，但 Safari 15+ 才开始支持，旧版 Safari 会退回到 PNG 或 ICO -
apple-touch-icon.png必须是 180×180 像素、无透明边距的 PNG，否则 iOS 添加到主屏幕时会自动加圆角和阴影，效果失控 -
site.webmanifest不是可选——Chrome/Edge 安卓端启动 PWA 时只认它定义的图标，里面必须包含icons数组，且至少有一项sizes: "192x192"和"512x512"
为什么加了 link 还是显示默认图标？常见排查点
不是代码没写，而是缓存或路径问题卡住了：
- 浏览器强缓存
favicon.ico—— 即使你删了文件，旧图标仍显示；解决办法：访问https://yoursite.com/favicon.ico直接看是否 404，或者用无痕窗口测试 -
href路径写错：全部用绝对路径（以/开头），避免相对路径在子页面（如/blog/post）下解析失败 - Web 服务器没配 MIME 类型：确保
.svg返回image/svg+xml，.webmanifest返回application/manifest+json，Nginx 需加types { application/manifest+json webmanifest; } - iOS 不读
<link rel="icon">：它只认<link rel="apple-touch-icon">，且要求图标文件名严格匹配，不能是icon-180.png
要不要生成一堆尺寸的 PNG？
不用堆 16×16 到 512×512 全套。实际只需三类：
-
favicon.ico：含 16×16、32×32、48×48 三个尺寸（用在线工具如 favicon.io 一键生成） -
apple-touch-icon.png：单独导出 180×180 PNG，背景填纯色（iOS 默认加阴影，透明底会难看） -
site.webmanifest里icons字段只列两个：192×192 和 512×512，足够覆盖安卓桌面和安装后启动图
SVG 图标虽好，但别用 CSS 动画或 JS 交互——所有浏览器加载 favicon 时都不执行脚本，动态内容会被忽略。
