favicon.ico不一定须放根目录，但浏览器默认会向根目录请求；若自定义路径，必须显式声明，推荐用rel="icon"而非过时的shortcut icon。
favicon.ico 文件必须放在网站根目录吗
不一定，但这是最稳妥的做法。浏览器在找不到 <link rel="shortcut icon"> 时，会自动向根目录发起 /favicon.ico 的 GET 请求——这个行为由规范固化，无法禁用，且不走缓存逻辑（即使返回 404 也会重试）。如果你把图标放在 /assets/favicon.png，又没写 <link>，浏览器根本不会去那里找。
实操建议：
- 开发阶段直接把
favicon.ico放到项目静态资源根路径（如 Nginx 的root目录、Vite 的public/、Next.js 的public/） - 若必须自定义路径，务必显式声明
<link rel="icon" href="/assets/favicon.png">，且rel值推荐用"icon"而非过时的"shortcut icon" - 不要依赖
rel="shortcut icon"：它只是历史别名，现代浏览器以rel="icon"为准，且shortcut在 HTML5 中已无意义
ico、png、svg 图标格式怎么选
不是所有格式都“能用”，而是不同格式对应不同场景和兼容性边界。Chrome 92+、Firefox 87+、Safari 15.4+ 已支持 <link rel="icon" type="image/svg+xml" href="/logo.svg">，但 IE 和旧版 Safari 完全不识别 SVG favicon。
实操建议：
- 兼顾兼容性：提供
.ico（多尺寸打包进单文件，支持 16×16 / 32×32 / 48×48）作为兜底，再叠加.png或.svg提升高清屏体验 - 避免只用
.png：虽然 Chrome/Firefox 支持，但部分安卓 WebView 和微信内置浏览器仍只认.ico - SVG 用法要加
type属性：<link rel="icon" type="image/svg+xml" href="/logo.svg">，否则浏览器当普通 PNG 处理，可能渲染失败
为什么改了 favicon 但标签页还是旧图标
这不是代码问题，是浏览器强缓存 + 隐私策略共同导致的。favicon 缓存独立于页面资源，HTTP 缓存头（如 Cache-Control）对它基本无效；更麻烦的是，某些浏览器（尤其是 Chrome）会在用户手动收藏该站点后，把图标“钉死”在书签栏，后续任何更新都不触发刷新。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
实操建议：
- 强制刷新：在地址栏输入
chrome://settings/clearBrowserData→ 勾选“Cached images and files” → 清除（仅临时有效） - 破缓存技巧：给图标 URL 加查询参数，如
href="/favicon.ico?v=2"，每次更新就改v值（注意：服务端需确保该路径真实存在且可访问） - 真·一劳永逸：在
中同时声明多个尺寸和类型，让浏览器自主选择最优项，例如：<link rel="icon" type="image/x-icon" href="/favicon.ico"><br><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"><br><link rel="icon" type="image/svg+xml" href="/logo.svg">
Next.js、Vue、React 等框架里怎么注入 favicon
框架通常会劫持 HTML 构建流程，直接在 public/index.html 里写 <link> 可能被覆盖或忽略——特别是 SSR 场景下，服务端生成的 HTML 和客户端 hydrate 后的 DOM 可能不一致。
实操建议：
- Next.js：优先用
app/layout.tsx中的元素，或使用next/head（Pages Router）；避免只改public/favicon.ico不声明<link> - Vue CLI / Vite：在
public/index.html写<link>是安全的，但确保路径以/开头（如/favicon.ico），否则构建后可能解析为相对路径出错 - React（无框架）：老老实实手写
<link>到index.html的，并确认构建工具没删掉它（比如某些 Webpack 插件会清空未引用的<link>）
最容易被忽略的一点：移动端 PWA 添加到主屏幕时，用的是 manifest.json 里的 icons 字段，和 <link rel="icon"> 完全无关。如果 iOS 用户看到的是旧图标，大概率是你没更新 manifest.json 里的图标路径或尺寸声明。
