favicon不显示？先检查这三件事：1. 直接访问https://yourdomain.com/favicon.ico是否返回200；2. 开发者工具Network中确认favicon请求状态码及Content-Type响应头；3. 清除浏览器缓存或用无痕窗口验证，注意本地服务器可能不支持.ico MIME类型。
favicon 不显示？先检查这三件事
绝大多数 favicon 问题不是代码写错，而是路径、缓存或服务器响应没到位。别急着改 <link>，先做三件事：
- 在浏览器地址栏直接访问
https://yourdomain.com/favicon.ico—— 如果返回 404 或下载失败，说明文件根本没放对位置或没部署 - 打开开发者工具（F12）→ Network → 刷新页面 → 筛选
favicon请求，确认状态码是200，且响应头里有Content-Type（如image/x-icon或image/png） - 清除浏览器缓存（尤其是 Chrome 对 favicon 缓存极顽固），或用无痕窗口验证；若用本地开发服务器（如
python -m http.server），注意它默认不支持.icoMIME 类型，需手动配置或改用.png
用 <link rel="icon"> 声明图标时的参数取舍
现代浏览器支持多种格式和尺寸，但不是所有属性都必须写全。关键在于明确意图，避免冗余声明引发优先级冲突：
-
rel="icon"是唯一标准值，rel="shortcut icon"已过时，仅 IE6–8 需要，现在可完全省略 -
sizes属性只对type="image/png"或type="image/svg+xml"有效；对.ico文件写sizes="16x16"没意义，因为 .ico 本身可打包多尺寸 -
type强烈建议显式声明：用image/x-icon对应.ico，image/png对应.png，image/svg+xml对应.svg；漏掉可能导致某些浏览器忽略该条目 - 多个
<link rel="icon">会按顺序参与匹配，浏览器优先选最匹配当前设备像素比的尺寸；所以把高分屏图标（如sizes="192x192"）放在低分屏（sizes="16x16"）之后更稳妥
ICO、PNG、SVG 三种格式怎么选
没有“最好”，只有“最适合当前需求”的组合：
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
-
.ico：兼容性最强，老 IE 必须靠它；但制作麻烦（需多尺寸打包），无法透明渐变；适合只求稳、不追求设计细节的项目 -
.png：推荐主力格式；支持 Alpha 通道、易生成、尺寸灵活；搭配sizes可精准控制不同设备加载哪张；注意命名别用favicon.png这种泛名，容易和其它资源冲突，建议用favicon-32x32.png -
.svg：矢量、体积小、缩放无损；但仅 Chromium 110+、Firefox 117+、Safari 16.4+ 支持；不能作为唯一方案，必须搭配 PNG 或 ICO 降级；声明时务必写type="image/svg+xml"，否则会被当成普通图片忽略
Dash、Vue、Next.js 等框架里 favicon 的特殊处理
框架常封装了 HTML 注入逻辑，硬塞 <link> 标签可能被覆盖或延迟执行：
立即学习“前端免费学习笔记（深入）”；
- Dash：必须把图标文件放进
assets/目录，然后设app._favicon = "my_icon.png"；直接写<link>在index.html里无效，因为 Dash 动态生成页面 - Vue CLI / Vite：修改
public/favicon.ico即可，构建时自动复制到输出目录根路径；若想用 PNG，则需在public/index.html的<head>中手动加<link>，并确保路径以/开头（如href="/favicon-32x32.png"） - Next.js：静态图标放
public/favicon.ico；动态或 PWA 场景需配合next/head或 App Router 的metadata对象，例如export const metadata = { icons: { icon: '/favicon-32x32.png' } } - 所有框架下，如果用了 CDN 或代理层（如 Cloudflare），要确认其缓存策略没拦截
.ico或.svg请求，有时需单独配置缓存规则
.svg MIME 类型，或 CDN 把 /favicon.ico 当作 404 缓存了 24 小时——这种问题不会报错，只会静默失效。 
