favicon.ico 不必强制放在根目录，但浏览器默认请求 /favicon.ico，未命中则不显示且不回退；需显式声明路径或提供多格式图标（png/svg/ico）并正确配置 mime 类型与缓存。
favicon.ico 文件必须放在网站根目录吗
不一定，但最稳妥的方式是放根目录。浏览器会默认向 /favicon.ico 发起请求，无论当前页面路径如何——哪怕你访问的是 /admin/dashboard.html，它仍会尝试 GET https://example.com/favicon.ico。如果返回 404，就不会显示图标，也不会 fallback 到其他声明。
如果你没法把文件放根目录（比如静态资源全托管在 CDN 或子路径下），就必须显式声明路径：
<link rel="icon" href="/assets/favicon.ico">
注意：href 路径必须是相对于当前 HTML 文档的绝对路径（以 / 开头）或完整 URL，相对路径（如 images/favicon.ico）容易因页面嵌套层级出错。
支持多尺寸和现代格式怎么写
只用 favicon.ico 已不够：Safari iOS、Android Chrome、PWA 都需要 PNG 或 SVG，且要求明确尺寸和 MIME 类型。靠一个文件“蒙混过关”会导致部分设备不显示或模糊。
推荐组合写法（兼容性 + 清晰声明）：
<link rel="icon" type="image/x-icon" href="/favicon.ico"><br><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><br><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><br><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><br><link rel="manifest" href="/site.webmanifest">
关键点：
-
sizes属性对.png必须写，对.ico可省略（.ico 本身可含多尺寸） -
apple-touch-icon不是苹果专属——很多 Android 浏览器也读它；sizes写错（如写成180不带x180）会被忽略 -
manifest文件虽非必需，但 PWA 和桌面安装依赖它定义icons数组，否则添加到主屏幕时可能回退到apple-touch-icon
为什么加了 link 标签还是不显示
常见原因不是代码写错，而是缓存或路径问题。浏览器对 favicon 缓存极强，甚至硬刷新（Ctrl+R）也不清，必须强制刷新（Ctrl+Shift+R）或隐身窗口验证。
排查顺序：
- 打开浏览器开发者工具 → Network 标签页 → 过滤
favicon，看请求是否 200，响应头是否有Content-Type: image/x-icon（.ico）或image/png（PNG） - 直接在地址栏输入图标 URL（如
https://yoursite.com/favicon.ico），确认能下载并正常打开 - 检查服务器是否屏蔽了
.ico文件类型（Nginx/Apache 常见，默认不处理.ico，需显式配置 MIME 类型） - 确保
<link>在内，且没被 JS 动态插入（部分浏览器只解析初始 HTML 中的 favicon 声明）
SVG favicon 现在能用了吗
可以，但有明确限制：仅 Chromium 93+（2021 年中以后）和 Safari 15.4+ 支持 rel="icon" type="image/svg+xml"。Firefox 目前不支持，会直接忽略该标签。
若坚持用 SVG（比如需要矢量缩放或主题色适配），必须保留 fallback：
<link rel="icon" type="image/svg+xml" href="/favicon.svg"><br><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><br><link rel="icon" type="image/x-icon" href="/favicon.ico">
注意：favicon.svg 必须是**无交互、无脚本、纯展示**的 SVG（不能含 <script></script>、<foreignobject></foreignobject> 或外部引用），否则会被拒绝加载。另外，Windows 任务栏和传统桌面快捷方式仍只认 ICO 或 PNG，SVG 对这部分无效。
真正容易被忽略的，是服务端对 .svg 的 MIME 配置——漏配 image/svg+xml 会导致 404 或被当作文本下载，而不是渲染为图标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
