favicon.ico 必须放在网站根目录（如 /favicon.ico）才能被浏览器默认自动识别；若放子目录则需显式声明 标签，否则地址栏不显示图标且控制台可能静默忽略 404 错误。
favicon.ico 放在哪才能被自动识别
浏览器默认只在网站根目录找 favicon.ico，路径必须是 /favicon.ico（注意开头的斜杠）。如果放在子目录比如 /assets/favicon.ico，不加声明就找不到。
常见错误：把图标上传到 ./images/favicon.ico 后以为能自动生效——实际不会。服务器返回 404 时，浏览器通常静默忽略，你根本看不到报错，但地址栏就是不显示图标。
- 最省事做法：把
favicon.ico直接丢进网站根目录（和index.html同级） - 开发时用本地服务器（如
python -m http.server）要注意：它不支持根路径自动映射，必须手动加<link>标签才有效 - 图标尺寸建议至少提供
16×16和32×32两种，Windows + Chrome 有时会拉伸低分辩率图导致模糊
HTML 中怎么写 标签才兼容主流浏览器
靠自动发现不可靠，显式声明更稳妥。现代写法要覆盖多种场景：地址栏、标签页、书签栏、甚至 PWA 安装界面。
关键不是“要不要加”，而是加哪些类型、用什么属性。只写一个 <link rel="icon" href="favicon.ico"> 已经不够用了。
- 基础兼容：必须带
rel="icon"，type="image/x-icon"可选但推荐加上（尤其 IE 和旧 Edge） - 高清屏支持：追加
<link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png"> - 苹果设备专用：加
<link rel="apple-touch-icon" href="apple-touch-icon.png">（注意不是icon，是apple-touch-icon） - 不要用
shortcut icon—— 这是过时写法，Chrome 90+ 已忽略
为什么 PNG 图标在 Safari 地址栏里是白底而不是透明底
Safari（尤其是 macOS 上）对 <link rel="icon"> 的 PNG 图标会强制加一层白色背景，即使你导出的是带 alpha 通道的图。这不是 bug，是它的渲染策略。
解决办法不是调图，而是换声明方式：
- 对 Safari 有效的写法是用
rel="mask-icon"，配合color属性指定遮罩色：<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5"> - 这个只对 Safari 的「固定标签页」生效，不影响其他浏览器，所以可以和其他
<link>共存 - SVG 格式必须是单色路径（不能有渐变/滤镜），且需内联或 CORS 可访问；直接引用本地
.svg文件在某些部署环境下会失败
用 Webpack/Vite 等构建工具时 favicon 怎么配才不丢
构建工具默认不处理 favicon.ico，除非你明确告诉它“这是静态资源”。否则打包后图标路径错乱、404、或者被哈希重命名但 HTML 里没同步更新，都很常见。
- Vite：把
favicon.ico放进public/目录，然后在index.html里用绝对路径引用，例如<link rel="icon" href="/favicon.ico"> - Webpack：用
HtmlWebpackPlugin的favicon选项，或在template中硬编码<link>并确保CopyPlugin把图标拷到输出目录 - Next.js：放在
public/favicon.ico，并在pages/_document.tsx或app/layout.tsx中显式插入<link>，别依赖自动发现
最易被忽略的一点：服务端部署后，检查 HTTP 响应头。如果服务器返回了 Content-Security-Policy 且没允许 img-src 'self'，连 favicon.ico 都可能被拦截——这时候控制台 Network 标签页能看到明显的 blocked 状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
