网站的最佳网站图标尺寸

favicon 适用于许多物理像素：选项卡中的 16 × 16、Retina 书签栏上的 32 × 32、iPhone 主屏幕上的 180 × 180、PWA 开始屏幕上的 512 × 512。单一图像无法很好地满足所有这些需求。使用我们的[favicon生成器]（工具：favicon-generator）、[PNG到ICO转换器]（工具：png-to-ico）、[SVG到ICO转换器]（工具：svg-to-ico）和[实时favicon测试器]（实用程序： favicon-tester）来创建和验证您的图标集，并阅读[配套指南]（指南：favicon-sizes-explained）以获取简明演练。

缩放小光源会产生模糊。在不进行测试的情况下将详细分辨率降低至 1024 × 1024 会丢失细纹。该修复程序由一小组特制的导出或集成了常见桌面框架的多尺寸 .ico 组成。

发布旧博客文章中列出的所有尺寸是一种浪费。发帖太少会在平台上留下明显的空白。下面的矩阵反映了在 2026 个浏览器上测量的实际查询。

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

桌面选项卡通常显示 16×16 像素的 CSS 图标，根据显示密度，该图标对应于设备的 16×16 或 32×32 像素。

书签栏和固定选项卡通常使用 32x32 或 48x48。 Chromium 可以自动选择最接近 favicon.ico 的内置框架。

三种常见的选项卡尺寸（16、32、48）可以轻松地容纳在单个多尺寸 .ico 中。这就是 .ico 容器仍然是最有效的桌面交付格式的原因。

Windows“开始”菜单、任务栏图钉和文件资源管理器快捷方式可能会请求 24×24、32×32、48×48、64×64、128×128 或 256×256，具体取决于上下文和显示缩放。

Microsoft 将 16、24、32、48、64、128 和 256 记录为 Windows 应用程序的方便集。 Web favicon 受益于将至少 16 到 256 个分组为 favicon.ico。

macOS 更喜欢使用 .icns 作为本机应用程序，但也很乐意使用 .ico 和 PNG 作为 Web 快捷方式。 iOS 忽略主屏幕图标的 .ico，并希望通过 Apple-Touch 图标使用专用的 PNG 180×180。

Web 应用程序清单需要具有某种用途并且可以选择隐藏的图标。常见尺寸为 192×192 和 512×512 PNG。

Android Chrome 使用清单图标进行 UI 安装和启动屏幕。 512 × 512 源完全缩小；仅 192×192 的显示在高端手机上看起来很柔和。

iOS 不会读取主屏幕位置的清单图标。您必须声明<link rel="apple-touch-icon"sizes="180x180"href="/apple-touch-icon.png">。

16×16 — 浏览器选项卡（1× 密度）。 32 × 32 — Retina 显示屏上的选项卡和书签。 48 × 48 — 一些 Windows UI 上下文和旧书签使用。

64 × 64 和 128 × 128 — 更高比例的 Windows 快捷方式。 256 × 256 — Windows 固定图块和高分辨率预览。

180 × 180 — Apple-Touch 图标 (iOS / iPadOS)。 192 × 192 和 512 × 512 — PWA Android 的清单图标和安装提示。

个人博客：favicon.ico 截至 32/16/48。如果您不关心修饰 iOS 主屏幕，这是可以接受的。

公司营销网站：.ico 捆绑包加上 180×180 Apple-Touch 图标加上 32×32 PNG <link> 用于不言自明的 Retina 选项卡。

PWA可安装：完整的.ico，Apple-Touch图标，清单192 + 512，SVG可选，可扩展Chrome UI。

Electron 桌面应用程序：Windows .ico，16 至 256；如果您在浏览器之外分发，则单独使用 macOS .icns。

多种尺寸 favicon.ico (16, 32, 48, 64, 128, 256) 至 /favicon.ico。

apple-touch-icon.png，尺寸为 180 × 180，适用于 iOS 主屏幕。

Android 安装表面的 512×512 PNG 位于 site.webmanifest。

这三者涵盖了现实世界中约 95% 的图标请求。当您想要在现代选项卡中无限缩放和深色模式样式时，请添加 SVG。

如果 .ico 内有 PNG 16x16，我是否需要它？不可以，除非您需要显式的 <link rel="icon"sizes="16x16"> 进行调试。

还需要 120x120 吗？这是旧的 iOS 尺寸。现代 Safari 预计分辨率为 180x180。

favicon 64x64 怎么样？适用于 Windows 的 .ico 内部；很少需要作为独立的PNG。

我可以忽略 256x256 吗？仅当您从不关心高分辨率 Windows 快捷方式预览时。大多数团队都包含它。

iOS 图标具有圆角并且看起来被裁剪：这是 iOS 隐藏 - 具有安全填充的设计，而不是文件中的错误。

安装 PWA 显示通用图标：清单图标丢失或小于 192×192 最小值。使用 Chrome DevTools → 应用程序验证 JSON。

Retina Mac 上的软件选项卡图标：确保 favicon.ico 包含 32×32 帧，而不仅仅是 16×16。

巨大的 .ico 下载：您已嵌入未压缩的 BMP 256×256。在容器内使用 PNG 压缩进行重建。

CSS 像素不是物理像素。 2× 屏幕上的 16×16 选项卡位置通常会加载 32×32 位图以提高清晰度。

这就是为什么在高 DPI Retina MacBook 和 Windows 笔记本电脑上包含 16 和 32 图像的 favicon.ico 优于单个 16×16 PNG。

Android PWA 在设备的全分辨率启动屏幕上显示清单图标：192×192 的源扩展到 1440p 手机看起来很柔和； 512 × 512 整齐地缩小。

iOS 将自己的遮罩和圆角半径应用于 Apple-Touch-Icon 资源。采用安全填充设计，确保重要边缘不会被圆圈切割。

测试时，在浏览器缩放为 100%、操作系统缩放为 200% 的情况下捕获选项卡。如果两者看起来都很清晰，则您的尺寸矩阵可能是正确的。

下载 favicon.ico 并在列出内置框架的工具中打开它。确认存在 16、32、48 以及至少一张大图像。

获取 apple-touch-icon.png 并在任何图像检查器中检查尺寸 - 预计为 180×180，而不是过时模板中的 120×120。

打开site.webmanifest并验证[]图标是否包含192×192和512×512以及正确的路径和图像/png类型。

将您的网站加载到 Chrome DevTools → 应用程序 → 清单中。丢失或无效的条目会在用户看到中断的安装对话框之前显示警告。

保留一个电子表格，将每个文件映射到其使用者（选项卡、iOS、PWA、Windows）。将来，您在品牌重塑时将不再需要对资产文件进行逆向工程。

新类别的设备正在慢慢出现在该国favicon。如今，512×512 清单图标比单独的 192 个图标更好地覆盖了可折叠和平板电脑设置用户界面。

避免使用特殊尺寸（96×96、120×120），除非特定平台文档仍然强制使用它们——它们会增加创意负载，但没有太多好处。

将主矢量或 1024 × 1024 栅格存储在您的设计存储库中，即使您从未发布过它。未来的平台可能需要更大的清单图标。

自动从母版重新生成，以便当出现新的推荐尺寸时，您可以重新运行脚本，而不是手动将其导出到 Photoshop。