在 2026 年做好 Favicon 意味着在现代功能和向后兼容性之间取得平衡。本指南将一切浓缩为可操作的清单。
2026 年 Favicon 清单
- favicon.ico（32×32）— 放在根目录。通用后备方案。
- favicon-32x32.png — 用于现代浏览器标签页（Retina）。
- favicon-16x16.png — 用于标准 DPI 浏览器标签页。
- apple-touch-icon.png（180×180）— 用于 iOS 主屏幕。
- android-chrome-192x192.png — 用于 Android 和 PWA。
- android-chrome-512x512.png — 用于 PWA 启动画面。
- site.webmanifest — PWA 清单文件，引用 Android 图标。
- HTML <link> 标签 — 在每个页面的
<head>中。
设计最佳实践
保持简洁
在 16×16 像素下，精细细节完全消失。最好的 Favicon 是：
- 单个字母或符号
- 前景和背景之间高对比度
- 粗体、干净的形状，没有渐变或细线
使用透明背景
纯色背景在现代浏览器 UI 中显得过时。透明 PNG 能自然融入任何浏览器主题 — 浅色模式、暗黑模式或自定义主题。
例外：Apple Touch Icon 应该使用纯色背景，因为 iOS 会将透明区域填充为黑色。
为浅色和暗黑模式都设计
暗黑模式已经成为标配，测试你的 Favicon 在浅色和暗色背景上的效果。暗色 Favicon 在暗色浏览器标签页上是看不见的。考虑使用支持 prefers-color-scheme 的 SVG Favicon（参见我们的SVG Favicon 指南）。
从大图开始，逐步缩小
始终在 512×512 或更大尺寸设计，然后导出为各个所需尺寸。如有需要手动优化 16×16 版本 — 自动缩小有时会产生模糊的结果。
技术最佳实践
文件位置
- 将
favicon.ico放在域名根目录 — 浏览器会自动在那里查找 - 其他文件可以放在
/favicons/子目录中以保持整洁 - 在 HTML 中使用绝对路径（
/favicon.ico，而非favicon.ico）
缓存策略
- 为 Favicon 文件设置长缓存头（1 年）— 它们很少变化
- 更新时使用缓存破坏查询字符串：
href="/favicon.ico?v=2" - 或重命名文件：
href="/favicon-v2.ico"
SEO 最佳实践
Google 搜索结果
Google 在搜索结果中显示 Favicon。确保你的出现：
- 提供 48px 倍数的 Favicon（48×48、96×96 等）
- 不要在
robots.txt中屏蔽 Favicon 文件 - Favicon 必须在与网站相同的域名上
- 必须是正方形图片
常见反模式
| 反模式 | 为什么不好 | 应该怎么做 |
|---|---|---|
| 只提供 favicon.ico | 缺少 iOS/Android/PWA 支持 | 提供完整尺寸套件 |
| 使用带文字的完整 Logo | 在 16px 下无法辨认 | 使用符号或字母组合 |
| 把 JPEG 重命名为 .ico | 浏览器可能拒绝 | 使用正确的格式转换 |
| 只从 CDN 提供 Favicon | Google 可能不会索引 | 在同一域名上托管 |
| 没有 Favicon | 不专业，影响 SEO | 添加一个 — 只需 5 分钟 |
测试你的 Favicon 配置
- 浏览器标签页 — 检查 Chrome、Firefox、Safari、Edge
- 书签 — 收藏页面并检查图标
- iOS 主屏幕 — 在 iPhone 上添加到主屏幕
- Android 主屏幕 — 在 Android 上添加到主屏幕
- Google 搜索 — 使用 Search Console 检查 Favicon 索引
想看看竞争对手怎么处理 Favicon？使用 Mzu favicondl 即时检查任何网站的 Favicon 配置。