F
Favicon.pub

Favicon 检查器

检查网站的 Favicon 配置是否完整，包括各种格式和尺寸的图标文件。输入要检查的网站网址：

全面检查

检查网站的所有 favicon 文件，包括各种格式和尺寸

兼容性检测

验证不同平台和设备的 favicon 兼容性

优化建议

提供详细的优化建议和最佳实践指导

Favicon Checker 是做什么的？

这款免费工具检测一个网站的 favicon 配置是否完整。它会检查经典 favicon 文件、Apple 触屏图标、Web 应用清单和常见 meta 标签，并标出任何缺失或配置错误的项目。

适用于任何公开网站：输入域名或 URL，立即得到一份报告——哪些 favicon 文件已存在、哪些还需要补。

检测器会发现的问题
  • 缺少 favicon – 找不到 favicon.ico 或 PNG 图标
  • 尺寸错误 – 文件尺寸与浏览器预期不符
  • 链接失效 – favicon 文件返回 404 或加载失败
  • 缺少 apple-touch-icon – 没有 iOS 主屏幕图标
  • 缺少 PWA 图标或 Web 应用清单
如何使用 Favicon Checker
  1. 输入要检测的网站 URL。
  2. 点击 Check，等待几秒。
  3. 逐区查看结果：Classic Favicon、Touch Icons、Web App Manifest 和 Meta Tags。
  4. 修复所有标记为错误的项目，然后再次检测。
检测通过后，在各浏览器中逐一验证

检测器确认的是文件与 HTML 正确无误——但每个浏览器缓存图标的方式不同。用这份按浏览器逐项确认清单，验证新图标真正生效。

  • Chrome 和 Edge：两者共用 Chromium 图标缓存。在地址栏打开 chrome://favicon/https://your-site.com 查看缓存图标；如果还是旧图，用强制刷新（Ctrl+Shift+R）或无痕窗口强制重新获取。
  • Firefox：缓存最激进，一个图标可以留住几天。用带 ?v=2 之类参数的图标地址在隐私窗口打开以绕过缓存，或在 设置 → 隐私与安全 → 缓存的网页内容 里清除。
  • Safari（macOS）：从 14 版起才在标签页显示图标，且忽略 ?v= 参数。用新的隐私窗口测试，或在重新检查页面后通过 Safari 菜单 → 清除历史记录 清理。
  • iOS 主屏幕：apple-touch-icon.png 只在「添加到主屏幕」那一刻抓取。删除旧快捷方式再重新添加——只改文件永远不会更新已存在的图标。
  • Google 搜索结果：搜索结果里的图标来自索引副本而非浏览器缓存。修改后请在 Google Search Console 重新提交首页索引，通常几天内完成更新。
相关工具
Favicon 格式说明

经典格式

favicon.ico

传统ICO格式，兼容所有浏览器

favicon.png

现代PNG格式，支持透明背景

favicon.svg

矢量格式，支持暗黑模式

移动设备

Apple Touch Icon

iOS设备主屏幕图标

Android Chrome

Android PWA图标

Web App Manifest

PWA配置文件

完整配置示例

<!-- Basic Favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest">

<!-- Android Chrome Icon -->
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">

<!-- Meta Tags -->
<meta name="theme-color" content="#ffffff">
<meta name="application-name" content="Your App Name">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
常见问题

为什么需要多种格式的 Favicon？

不同的浏览器和设备支持不同的格式和尺寸。提供多种格式可以确保在所有平台上都能正确显示图标。

ICO 格式还有必要吗？

虽然现代浏览器都支持 PNG 格式，但 ICO 格式仍然是最兼容的选择，特别是对于旧版浏览器。

什么是 Web App Manifest？

Web App Manifest 是一个 JSON 文件，定义了 PWA（渐进式 Web 应用）的配置信息，包括图标、名称、主题色等。

如何优化 Favicon 的加载速度？

使用适当的文件大小，避免过大的图标文件。ICO 文件应该包含多个尺寸，PNG 文件应该进行压缩优化。