favicon.ico 不必强制放在根目录，但最稳妥且兼容性最佳的做法是置于根目录；若使用其他路径或格式（如SVG、PNG），必须通过 <link rel="icon"> 显式声明并指定 type 属性，否则浏览器不会自动加载。
favicon.ico 文件必须放在网站根目录吗
不一定，但最稳妥的方式就是放根目录。浏览器默认会自动请求 /favicon.ico，哪怕你没写任何 <link> 标签——如果根目录下真有这个文件，它就会被加载；如果没有，控制台可能报 404，但不影响页面功能。
如果你用的是其他路径或格式（比如 favicon.svg 或子目录里的 images/icon.png），就必须显式声明：<link rel="icon" href="/images/icon.png">。否则浏览器不会主动去找。
- 根目录放
favicon.ico是兼容性最好的做法，IE6 都认 - 现代浏览器支持
.png、.svg，但rel="icon"默认只识别.ico，除非加type属性，比如type="image/svg+xml" - 不要指望服务器自动把
/logo.png当成图标——它不会被当作 favicon 加载，除非你明确 link 过去
rel="icon" 和 rel="shortcut icon" 有什么区别
rel="shortcut icon" 是 IE 早期的私有写法，现在所有主流浏览器都支持 rel="icon"，且 W3C 标准只认后者。rel="shortcut icon" 纯属历史遗留，可以删了。
但要注意：有些老项目里还混着两行，比如：
<link rel="shortcut icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
这不仅多余，还可能在某些构建工具里触发重复请求。保留一行 <link rel="icon" href="/favicon.ico"> 就够了。
立即学习“前端免费学习笔记（深入）”；
-
rel="icon"是标准写法，必须用 -
rel="shortcut icon"已废弃，删掉不心疼 - 如果用了
rel="apple-touch-icon"，那是给 iOS 添加书签用的，和 favicon 无关，别混淆
为什么换了图标但浏览器还是显示旧的
不是代码问题，是缓存。favicon 的缓存策略比普通资源更激进：浏览器可能长期记住旧图标，甚至关掉标签页再打开都不刷新。
解决方法不是改 HTML，而是强制破缓存 + 清理本地记录：
- 在
href后加查询参数，比如/favicon.ico?v=2，每次更新图标就改个数字 - Chrome 用户可直接访问
chrome://settings/clearBrowserData，勾选“图像和文件缓存”清掉 - 更彻底的办法：在开发者工具 Network 标签页里，右键 favicon 请求 → “Clear browser cache”，再硬刷（Ctrl+Shift+R）
- 注意：Service Worker 如果缓存了 /favicon.ico，也得手动 unregister 它
SVG 图标能当 favicon 吗？怎么写才靠谱
能，但得满足两个条件：浏览器支持 + 正确声明。Chrome 90+、Firefox 85+、Safari 15.4+ 支持 rel="icon" type="image/svg+xml"，但不支持带 CSS 或 JS 的 SVG，必须是纯静态矢量。
推荐写法（兼顾 fallback）：
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/favicon.png" type="image/png" sizes="32x32"> <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="48x48">
浏览器会按顺序选第一个能加载的。所以 SVG 放最前，PNG 和 ICO 做降级。
- SVG 必须是 UTF-8 编码，不能有 BOM，否则 Chrome 会拒载
- 别用
<link rel="icon" href="/icon.svg">不带type——这样浏览器当成未知类型，直接忽略 - 如果只提供 SVG，Safari 15.3 及更早版本会显示空白，务必留一个 PNG 或 ICO fallback
