favicon需在HTML的<head>内且置于其他资源前，最简有效写法为<link rel="icon" href="/favicon.ico">，推荐用绝对路径和.ico格式以确保兼容性。
favicon 在
必须放在 内，且推荐放在所有其他资源（如 <link rel="stylesheet">）之前。浏览器会按顺序解析，靠后放可能被忽略或延迟加载。
最简有效写法是：
<link rel="icon" href="/favicon.ico">
注意：href 值建议用绝对路径（以 / 开头），避免子目录下页面路径解析失败；.ico 格式兼容性最好，几乎所有浏览器都认。
支持 PNG 和 SVG favicon 的写法与兼容性差异
现代浏览器支持 .png 和 .svg，但行为不一致：
立即学习“前端免费学习笔记（深入）”；
-
.png：需显式声明type="image/png"，否则部分旧版 Safari 可能忽略 -
.svg：Chrome / Firefox 支持，但 Safari 目前（截至 v17）仍不支持rel="icon"加载 SVG，仅支持rel="mask-icon"（仅 macOS/iOS PWA 场景） - 多尺寸可并存，浏览器选最匹配的，例如：
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"><br><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
常见不显示 favicon 的原因和排查点
不是代码写错，而是这些细节卡住：
- 服务器没正确返回
favicon.ico：访问https://yoursite.com/favicon.ico直接看 HTTP 状态码，404 或 403 就白搭 - 缓存太顽固：浏览器对 favicon 缓存极深，改了图标后清缓存无效？试试无痕窗口，或加版本参数：
href="/favicon.ico?v=2" - HTTPS 页面引用 HTTP 资源：混合内容会被现代浏览器直接屏蔽，确保
href协议一致 - 图标尺寸不对：
.ico文件必须包含至少一个 16×16 或 32×32 的位图，纯 64×64 的 .ico 可能被某些浏览器拒用
Next.js / Vue / React 等框架里怎么配
静态文件路径和构建逻辑会干扰默认行为：
- Next.js：把
favicon.ico放进public/目录，然后在app/layout.tsx或pages/_document.tsx中手动加<link>标签（不能只靠 public 目录自动挂载） - Vue CLI / Vite：默认读取
public/favicon.ico，但若自定义了index.html，得确认里面写了对应<link>；Vite 用户注意：开发时热更新不触发 favicon 刷新，仍要清缓存 - React（Create React App）：同理，放
public/favicon.ico，但首次 build 后修改图标，需删掉build/重构建，否则旧文件残留
