favicon 缺失或损坏是 Stack Overflow 上最常见的问题之一——而答案几乎总是以下十种之一。从上到下过一遍这份清单,你一定会找到原因。
1. 浏览器缓存(第一大原因)
浏览器缓存 favicon 的力度极大——远远超过普通页面。即使你已经修复了问题,旧的(损坏的)图标也可能持续数天。按以下顺序测试:
- 强制刷新:Ctrl/Cmd + Shift + R
- 无痕/私人窗口——如果在那里能显示,那只是你的缓存问题
- 直接访问文件:打开
https://yourdomain.com/favicon.ico。如果能看到图片,说明文件没问题,是缓存/链接问题。 - 清除 favicon 缓存:在 Chrome 中,打开
chrome://favicon/已经不再有效,因此请使用无痕窗口或另一个浏览器。
2. 文件路径错误
<link> 中的 href 必须指向文件实际所在的位置。前导斜杠(/favicon.ico)表示站点根目录。如果你的网站从子文件夹提供服务,路径必须与之对应。
<!-- ❌ wrong if file is in /assets/ -->
<link rel="icon" href="favicon.ico">
<!-- ✅ absolute path from site root -->
<link rel="icon" href="/favicon.ico">
<!-- ✅ or the real location -->
<link rel="icon" href="/assets/favicon.ico">3. 缺少 <link> 标签
某些浏览器会自动回退到 /favicon.ico,但你绝不应依赖这一点。始终在 <head> 中显式声明图标:
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />4. MIME 类型错误
如果你的服务器将 .ico 作为 image/png 提供(或反过来),某些浏览器会拒绝渲染。.ico 应为 image/x-icon 或 image/vnd.microsoft.icon;PNG 应为 image/png。
5. 文件未部署
听起来显而易见,但请检查文件是否真的进入了生产环境。在新标签页中打开文件 URL。404 表示它不在那里——重新构建和部署,并确认构建流水线将 favicon 复制到了输出目录。
6. 源图片不是正方形
favicon 必须是正方形。如果你的源图片不是 1:1,浏览器可能显示拉伸或空白的图标。先裁剪。 Favicon.one 生成器会强制输出正方形。
7. 各框架的坑
Next.js App Router
图标文件要放在 app/(而不是 public/)中才能被自动检测。请参阅我们的 Next.js favicon 指南。
Next.js Pages Router
文件放在 public/,标签放在 pages/_document.tsx。
Webpack / Vite
确保将 favicon.ico 放在你的 public/ 或 static/ 目录中,并在 HTML 模板中引用。
8. HTTPS / 混合内容
如果你的网站是 HTTPS 但 favicon 通过 HTTP 引用,浏览器会将其作为混合内容拦截。始终使用 HTTPS URL 或相对路径。
9. Service worker 缓存了旧版本
如果你的 PWA 有 service worker,它可能在提供引用旧 favicon 的缓存 HTML。更新并重新注册 service worker。
10. SVG favicon 不受支持
SVG favicon 并非每个浏览器都支持(尤其是 Android 上的旧版 Chrome)。在提供 SVG 的同时,务必提供 PNG/ICO 兜底。
仍然卡住?运行 Favicon 检查器
将你的 URL 粘贴到 Favicon 检查器中,它会准确告诉你哪些图标和标签缺失或损坏——无需猜测。
需要一个干净的 favicon 包来替换损坏的? 在 Favicon.one 免费生成一个。