Favicon 检查器

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

全面检查

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

兼容性检测

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

优化建议

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

Favicon 格式说明

经典格式

favicon.ico

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

favicon.png

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

favicon.svg

矢量格式,支持暗黑模式

移动设备

Apple Touch Icon

iOS设备主屏幕图标

Android Chrome

Android PWA图标

Web App Manifest

PWA配置文件

完整配置示例

<!-- 基础 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 图标 -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

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

<!-- Android Chrome 图标 -->
<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 标签 -->
<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 文件应该进行压缩优化。