必备 Favicon 尺寸：2025 年快速决策指南

网上关于 favicon 尺寸的建议从 4 种到 20 多种不等。大多数网站并不需要全部。本指南直击要点，告诉你针对特定项目到底需要哪些 favicon 尺寸，帮你节省时间，降低复杂度。

你真正需要的 4 种 Favicon 尺寸

在分析了数千个网站和设备使用模式后，以下是覆盖 99% 使用场景的必备 favicon 尺寸：

1. favicon.ico（多尺寸容器）

尺寸： 包含 16x16 和 32x32 像素 为什么必需： 通用浏览器支持，自动检测 文件格式： ICO 用途： 浏览器标签页、书签、浏览历史

2. 180x180 像素（Apple Touch Icon）

尺寸： 180x180 像素 为什么必需： iOS 主屏幕、Safari 书签 文件格式： PNG 用途： iPhone/iPad "添加到主屏幕"

3. 192x192 像素（Android Chrome）

尺寸： 192x192 像素 为什么必需： Android 主屏幕、Chrome 快捷方式 文件格式： PNG 用途： Android 设备、PWA 最低要求

4. 512x512 像素（PWA 和面向未来）

尺寸： 512x512 像素 为什么必需： 渐进式 Web 应用、高分辨率显示 文件格式： PNG 用途： PWA 启动画面、应用商店

快速实现代码

以下是你需要添加到 <head> 标签中的最简 HTML：

<!-- 基础 favicon 设置 - 覆盖 99% 的设备 -->
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">

就这样。这四个文件将在所有现代设备和浏览器上正确显示你的 favicon。

什么时候可能需要额外尺寸

正在构建渐进式 Web 应用？

在 web manifest 中添加这些：

144x144 - Windows 磁贴
384x384 - 中间 PWA 尺寸

需要支持旧系统？

考虑添加：

16x16 PNG - 非常旧的浏览器
32x32 PNG - 旧的高 DPI 显示器
48x48 - Windows 桌面快捷方式

想要完美覆盖？

完整集合包括：

16x16, 32x32, 48x48, 64x64, 96x96, 128x128, 144x144, 152x152, 167x167, 180x180, 192x192, 256x256, 384x384, 512x512

但请记住：每增加一个尺寸都会增加复杂度，但收益递减。

尺寸决策流程图

你的网站是 PWA 吗？
├─ 是 → 使用全部 4 个基础尺寸 + manifest 尺寸
└─ 否 → 继续
   │
   是简单网站/博客吗？
   ├─ 是 → 只用 favicon.ico
   └─ 否 → 继续
      │
      移动流量超过 50% 吗？
      ├─ 是 → 使用全部 4 个基础尺寸
      └─ 否 → 使用 favicon.ico + 192x192

真实网站尺寸对比

以下是主流网站实际使用的情况：

网站	尺寸数量	实际使用的尺寸
Google	3	favicon.ico, 192x192, 512x512
Facebook	4	favicon.ico, 180x180, 192x192, 512x512
Amazon	2	favicon.ico, 192x192
Netflix	3	favicon.ico, 192x192, 512x512
GitHub	5	favicon.ico, 180x180, 192x192, 512x512, SVG

注意这个规律了吗？即使是科技巨头也保持简单。

文件大小指南

保持 favicon 轻量以获得更好的性能：

Favicon 尺寸	目标文件大小	最大可接受
favicon.ico	< 5 KB	15 KB
180x180 PNG	< 3 KB	8 KB
192x192 PNG	< 4 KB	10 KB
512x512 PNG	< 15 KB	30 KB

常见尺寸错误

错误一：只使用大尺寸

问题： 512x512 图标缩小到 16x16 会模糊 解决方案： 始终包含带有嵌入小尺寸的 favicon.ico

错误二：忘记移动端尺寸

问题： 用户保存到主屏幕时显示通用图标 解决方案： 包含 180x180（iOS）和 192x192（Android）

错误三：过度优化文件大小

问题： 过度压缩的图标看起来像素化 解决方案： 在质量和文件大小之间取得平衡；favicon 会被缓存

错误四：使用错误的尺寸

问题： 使用 200x200 或 256x256 而不是标准尺寸 解决方案： 坚持使用平台标准尺寸

快速测试清单

测试你的 favicon 实现：

桌面浏览器标签页 - favicon.ico 是否显示？
移动浏览器 - 图标在移动版 Chrome/Safari 中是否可见？
添加到主屏幕 - 在 iOS 和 Android 上都试一下
书签测试 - 添加书签并检查图标
分享预览 - 某些平台使用较大尺寸进行分享

格式 vs 尺寸：哪个更重要？

尺寸决定你的 favicon 在哪里显示格式决定兼容性和质量

优先顺序：

首先确保尺寸正确
对 favicon.ico 使用 ICO 格式
对所有其他尺寸使用 PNG
只有在基础工作完成后才考虑 SVG

5 分钟 Favicon 设置

从 512x512 主图开始
使用任意 favicon 生成器生成 4 个基础尺寸
将 HTML 代码添加到网站的 head 中
在一个桌面和一个移动浏览器上测试
上线 - 不要过度思考

尺寸特定技巧

对于 16x16 和 32x32（favicon.ico）

使用简单形状，避免细节
在实际尺寸下测试可见性
避免文字，除非是 1-2 个字符

对于 180x180（iOS）

设计时考虑圆角（iOS 会自动应用）
使用纯色背景（透明会变成白色）
确保良好的对比度

对于 192x192 和 512x512（Android/PWA）

为自适应图标支持透明
在各种 Android 启动器背景上测试
保持重要元素居中

按尺寸划分的性能影响

加载多个 favicon 尺寸的影响很小：

4 个基础尺寸： ~25KB 总计，4 个请求
10 个完整尺寸： ~60KB 总计，10 个请求
20+ 尺寸： ~120KB 总计，通常不必要

Favicon 会被积极缓存，所以只有初始加载需要关注。

最终建议

90% 的网站： 使用 4 个基础尺寸。搞定。

PWA： 在基础 4 个上添加 144x144 和 384x384。

最大兼容性： 使用生成器工具创建所有尺寸，但要理解你是在为边缘情况优化。

记住：在每个可能的设备和浏览器版本上实现完美的 favicon 覆盖是不可能的。专注于对你实际用户重要的尺寸，正确实现它们，然后继续处理网站更有影响力的方面。

最好的 favicon 实现是能够可靠地为你的用户工作，而不会使代码库过于复杂的那种。从基础开始，只有在有特定需求时才添加更多。

需要测试你的 favicon 在不同尺寸下的效果？试试 Favicon.im，即时预览任何网站的 favicon 在各种尺寸下的显示效果。