Favicon 尺寸完全指南：所有平台规范

← 返回博客

Favicon 尺寸速查（2026）：3个必须提供的尺寸

· 7 分钟阅读

**⚡ 速查：3个必须有的 Favicon 尺寸**

• 32×32 PNG — 浏览器标签页（高 DPI 屏幕必备）
• 180×180 PNG — iOS 主屏添加快捷方式
• 192×192 PNG — Android Chrome / PWA 主屏图标

另加 512×512 PNG（PWA 启动画面）和 favicon.ico（旧浏览器后备），就覆盖了 99% 的场景。

不同平台对 Favicon 的尺寸要求差异很大。下面是完整对照表 + 可直接复制的 HTML 代码，5 分钟配好所有平台。

所有平台 Favicon 尺寸一览表

下表列出了所有主流平台的 Favicon 尺寸规范，包括格式要求：

各平台尺寸详解

浏览器标签页：16×16 与 32×32

16×16 像素是浏览器标签页中最常见的 Favicon 尺寸，也是 favicon.ico 文件历史上的标准尺寸。32×32 版本用于高 DPI（Retina）屏幕，确保图标在高分辨率显示器上清晰显示。建议将这两种尺寸都打包进一个多分辨率的 ICO 文件，同时提供独立的 32×32 PNG 文件。

在这么小的尺寸下，细节设计至关重要：简单的形状和高对比度颜色比复杂 Logo 效果更好。许多品牌会专门为 16×16 设计简化版本，而不是直接缩小完整 Logo。

iOS 主屏图标：180×180

当用户将网站添加到 iPhone 或 iPad 主屏时，系统会使用 apple-touch-icon。苹果设备当前的推荐尺寸是 180×180 像素（适用于 iPhone 6 及以上的 @3x 显示屏）。iOS 会自动为图标添加圆角，因此你提供的图片应该是正方形，不需要自己添加圆角。

旧版设备支持 152×152（iPad Retina）和 120×120（iPhone Retina）。若只提供一个尺寸，180×180 可以向下兼容所有场景。

Android Chrome：192×192 与 512×512

Android Chrome 使用 Web App Manifest 文件中声明的图标。192×192 用于主屏快捷方式图标，512×512 用于启动画面（Splash Screen）。这两个尺寸都是 PWA（渐进式 Web 应用）的必需尺寸——如果缺少 512×512，Chrome 不会生成启动画面，用户体验会受损。

Windows 磁贴：144×144

Windows 8/10 的"开始"菜单磁贴和 Edge 浏览器使用 144×144 的图标。通过 `` 标签指定。现代 Windows 11 和 Edge 也接受标准 Web App Manifest 中的图标，因此 192×192 通常已经足够。

Safari 固定标签页：SVG 格式

Safari 的固定标签页（Pinned Tab）使用单色 SVG 图标，通过 `` 标签引用。SVG 格式的优势在于它是矢量图形，无论显示尺寸如何都保持清晰。图标应该是纯黑色的轮廓形状（Safari 会根据用户的强调色自动填充颜色）。

完整 HTML head 代码示例

将以下代码添加到你的网页 `` 部分，覆盖所有主流平台：

site.webmanifest 文件示例

Web App Manifest 文件声明 Android Chrome 和 PWA 使用的图标尺寸：

{
  "name": "Your Site Name",
  "short_name": "Site",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

如何制作 Favicon（最快方法）

最快的方法：直接用 Favicon 生成工具，上传一张正方形图片，自动输出全部尺寸 + webmanifest 文件，一步到位。

如果图片不是正方形，先走一步：

1. 裁剪为正方形：用 图片裁剪工具 将 Logo 裁为 1:1，下载 PNG。
2. 一键生成全部尺寸：把正方形 PNG 上传到 Favicon 生成工具，自动导出 16×16、32×32、180×180、192×192、512×512 及 ICO 文件。
3. 放入项目根目录：将导出的文件放到网站根目录，按下方 HTML 代码粘贴到 `` 即可。

整个过程无需注册、无需安装软件，图片数据不离开浏览器。

一键生成所有尺寸的 Favicon 文件，自动输出 ICO + PNG + webmanifest，无需安装任何软件。

免费生成 Favicon →

Favicon 设计最佳实践

• 从大到小设计：先设计 512×512 的高分辨率版本，再向下缩放。不要先设计小图标再放大。
• 保持简洁：16×16 像素只有 256 个像素点，复杂的文字或图案在这个尺寸下无法辨认。提取 Logo 的核心视觉元素——通常是首字母或简化图形。
• 高对比度：图标需要在浅色和深色标签栏背景下都清晰可见，避免使用浅灰色或低饱和度颜色。
• 避免透明背景问题：在某些平台上，透明背景会被填充为黑色或白色。建议为 Favicon 添加合适的背景色，或测试透明背景在各平台上的实际效果。
• 测试实际效果：在部署前，在浏览器标签页、书签列表、iOS 主屏和 Android 主屏上分别测试实际显示效果。

FAQ

favicon.ico 和 PNG favicon 哪个更好？

现代浏览器都支持 PNG favicon，PNG 格式更轻量且更易于生成。但 favicon.ico 仍有其价值：它可以打包多个尺寸（16×16 和 32×32）到单个文件，且浏览器默认会在网站根目录查找 /favicon.ico，即使没有 HTML 声明也能加载。推荐做法是两者都提供：根目录放一个 ICO 文件作为默认后备，同时在 HTML 中用 `` 标签声明 PNG 版本。

为什么我的 Favicon 更新后浏览器还显示旧图标？

浏览器会积极缓存 Favicon，这是最常见的"更新不生效"原因。解决方法：在开发者工具中勾选"禁用缓存"后刷新页面；或者在 favicon 文件 URL 后加版本号参数（如 href="/favicon.png?v=2"）强制浏览器重新加载；也可以直接在地址栏输入 favicon 文件的 URL，手动强制刷新该文件。

SVG 可以直接用作 Favicon 吗？

可以，但兼容性尚不完整。Chrome、Firefox 和 Edge 的现代版本已支持 SVG favicon（通过 ``），Safari 仅在固定标签页中支持 SVG（通过 mask-icon）。SVG favicon 的优势是体积极小且在任何尺寸下都完美清晰。目前推荐的做法是：同时提供 SVG 和 PNG 版本，让浏览器按支持情况自动选择，并保留 favicon.ico 作为最终后备。

Favicon 最小需要多大才能显示清晰？

浏览器标签页中 Favicon 的最小显示尺寸通常是 16×16 像素，这也是你必须提供的最小尺寸。在高 DPI 屏幕上，浏览器会优先使用 32×32 版本。如果只提供 32×32 PNG 而不提供 16×16，浏览器会自动缩小显示，通常效果也不错，但针对 16×16 专门优化过的版本会更清晰。

如何制作 Favicon 不需要设计软件？

不需要安装任何软件。使用本站的Favicon 生成工具，上传一张正方形图片，一键自动输出所有尺寸（16×16、32×32、180×180、192×192、512×512）及 webmanifest 文件。如果图片不是正方形，先用图片裁剪工具裁成 1:1。整个过程无需注册，数据不离开浏览器。