favicon不显示的根本原因是浏览器强缓存、路径错误或格式兼容性问题；需检查图标能否直连访问、network中状态码是否200、服务器是否放行/favicon.ico路径，并优先使用多尺寸ico而非伪ico。
Favicon 不是加了 <link> 就一定能显示，浏览器缓存、路径错误、格式兼容性这三处最容易卡住。
为什么 <link rel="icon"> 加了却看不到图标
常见现象是刷新后仍显示默认图标或空白。根本原因不是代码写错，而是浏览器对 favicon.ico 有强缓存策略：即使你替换了文件，它可能还在用旧版本；或者服务器没正确返回 200 状态码（比如返回 404 或 301 重定向）。
- 先直接访问图标地址，例如
https://yoursite.com/favicon.ico，看是否能下载到有效 ICO 文件 - 用浏览器开发者工具的 Network 面板过滤
favicon.ico，确认状态码是200，且响应头包含Content-Type: image/x-icon - 临时在
<link>中加个时间戳参数强制刷新缓存：href="favicon.ico?v=2" - 如果部署在 Nginx/Apache 上，确保静态文件路由没把
/favicon.ico拦截或重写
rel="shortcut icon" 还需要写吗
不需要。这个写法是 IE6–8 的历史遗留，现代浏览器（Chrome/Firefox/Safari/Edge）只认 rel="icon"。但如果你的项目还要支持 IE9 及更老版本，可以保留双写：
<link rel="icon" href="favicon.ico" type="image/x-icon"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
不过要注意：两个 <link> 的 href 必须完全一致，否则某些旧版浏览器会忽略第一个。
要不要准备多个尺寸和格式
要，但取决于目标设备。桌面浏览器基本只读取 16×16 或 32×32 的 ICO；iOS 设备（Safari）必须用 rel="apple-touch-icon" + PNG；Android Chrome 则优先读取 sizes="192×192" 的 PNG。
- 最简兼容方案：一个
favicon.ico（含 16×16 + 32×32 + 48×48 多尺寸），加一行<link rel="icon" href="favicon.ico"> - 全平台推荐方案：
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"><link rel="manifest" href="site.webmanifest">
- ICO 文件必须用真实 .ico 格式，不能把 PNG 改后缀应付——Windows 和旧浏览器会直接失败
用 SVG 当 favicon 可行吗
Chrome 95+、Firefox 103+、Safari 16.4+ 支持，但有硬限制：SVG 必须是单色（currentColor 或明确指定 fill）、无外部引用、无脚本、无动画，且需声明 type="image/svg+xml"。
示例写法：
<link rel="icon" type="image/svg+xml" href="icon.svg">
问题在于：IE 完全不支持；部分安卓 WebView 会 fallback 到默认图标；而且一旦 SVG 里用了 <use></use> 或 viewBox 计算异常，图标就变空白。所以生产环境建议只作为补充，不要替代 ICO。
真正容易被忽略的是：图标文件放在根目录时，很多 CMS 或前端路由（如 Vue Router history 模式）会拦截 /favicon.ico 请求，导致 404。这时候必须在服务器配置中显式放行该路径，而不是靠 HTML 里的 href 路径去绕。
