为什么我的 Favicon 不显示？

1. 检查 HTML link 标签

第一步是确认文档 head 里有正确的 link 标签。缺了或写错，图标就不会显示。

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

确认 href 路径和实际文件位置一致。不显示时，对照网站根目录再核一次相对路径。

2. 清浏览器缓存

浏览器会大力缓存图标，所以改完代码也可能暂时看不到。可以试：

• 强制刷新（Windows/Linux：Ctrl+Shift+R，Mac：Cmd+Shift+R）
• 清除该站点的缓存和 Cookie
• 用无痕/隐私窗口打开
• 等 24–48 小时让缓存自然过期

如果这些之后仍不显示，多半不是缓存问题。

3. 核对文件路径和位置

确认图标文件确实在预期位置。文件缺失或目录不对就不会显示。

常见放置位置：

• 网站根目录： /favicon.ico or /favicon.png
• public 目录： /public/favicon.ico （静态站点生成器常用）
• assets 目录： /assets/favicon.ico

HTML 里的路径必须和服务器上的实际位置一致。

4. 核对格式和尺寸

不支持的格式或错误尺寸也会导致不显示：

• ICO： 传统格式，所有浏览器可用（16×16 或 32×32）
• PNG： 现代浏览器支持（16×16、32×32、48×48、96×96、192×192、512×512）
• SVG： 现代浏览器支持，可缩放、不依赖分辨率

先确保文件格式和尺寸正确。不行就先用标准 ICO 或 PNG 试。

5. 检查服务器配置

服务器配错也会导致不显示：

• 确认 .ico、.png、.svg 的 MIME 类型配置正确
• 确认服务器允许请求这些文件
• 确认没有重定向规则挡住图标请求
• 确认 HTTPS/HTTP 一致（没有混合内容警告）

如果是服务器问题，联系主机商或检查服务器配置文件。

6. 在不同浏览器里测

有时一个浏览器不显示，别的却正常：

• 在 Chrome、Firefox、Safari、Edge 里测
• 检查手机浏览器（iOS Safari、Chrome Mobile）
• 确认书签和浏览记录里也能看到图标
• 桌面和手机视图都测一下

如果只在特定浏览器不显示，查该浏览器的要求和已知问题。