cutbg
博客

网站图标尺寸：2025年你真正需要的尺寸

2026年10月12日

Favicon 生成器在浏览器中运行：免费、无需上传、无水印。

搜索"favicon size"，你会看到一大堆相互矛盾的数字：16x16、32x32、48x48、64、180、192、256、512。这些列表大多是十年前写的，从未更新过。实际上，一个现代网站只需要大约四个文件，你可以用网站图标生成器一次性生成所有文件——它完全在浏览器中运行，所以你的logo永远不会离开你的电脑。

以下是每个尺寸的实际用途，以及哪些你可以安全地跳过。

仍然重要的尺寸

16x16和32x32——浏览器标签页和书签

这是经典的网站图标。16x16是你在拥挤的标签页中看到的样子；32x32用于高DPI屏幕、书签栏和某些地址栏UI。这两个尺寸通常捆绑在单个favicon.ico文件中，该文件可以同时包含多个分辨率。Windows还会从同一个.ico中提取48x48用于桌面快捷方式，所以包含它的成本几乎为零。

180x180——Apple触摸图标

当有人在iPhone或iPad上点击"添加到主屏幕"时，Safari会查找180x180的apple-touch-icon.png。如果找不到，iOS会截屏你的页面并使用该截图，看起来很糟糕。这个PNG覆盖每个当前的iOS设备，因为系统会根据需要缩小尺寸。

192x192和512x512——Android和PWA

Android Chrome和可安装的网络应用从你的site.webmanifest读取图标。192是主屏幕图标；512用于启动屏幕和应用列表。如果你想让你的网站可安装，你需要两者。

SVG——可选但很好用

Firefox和Chrome都支持SVG网站图标，它在任何尺寸下都保持清晰，并可以通过文件内的媒体查询响应深色模式。这是一个额外的功能，不是替代品——Safari和旧版浏览器仍然需要栅格版本。

你可以跳过的内容

64x64、96x96、128x128、整套Windows磁贴图像和数十个遗留的apple-touch-icon-76x76风格文件。它们适用于大多已消失的设备。发送二十个图标文件会让你的代码库臃肿，却没有任何可衡量的收益。

HTML代码

将文件放在网站根目录中，并将其添加到<head>：

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

在清单中：

"icons": [
  { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
  { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]

设计16像素的图标

最难的部分不是导出，而是完整的logo在16x16尺寸下会变得模糊。有几个技巧可以帮助：

  • 使用片段，而不是整个logo。 一个字母、一个字形、一个形状。文字标记在标签页大小下无法阅读。
  • 从正方形开始。 如果你的来源是宽的logo，先将其裁剪为正方形，这样生成器就不会用空白将其添加黑边。
  • 保持对比度高。 细轮廓会消失。实心形状能存活下来。
  • 决定背景。 透明PNG适应浅色和深色浏览器界面；如果你的标记是深色的，考虑改为给它一个纯色瓷砖。如果你只有平面JPG，你可以在几秒内删除logo的背景。
  • 注意安全区域。 Android将图标遮罩成圆形和圆角方形，所以在512图稿边缘周围留出大约10%的填充。

如果你要将网站图标的背景与网站的品牌颜色匹配，图像颜色拾取器将从现有截图中提取精确的十六进制值——对theme-color元标记也很方便。

一次性生成整个集合

无需上传：将正方形PNG或SVG拖到免费的基于浏览器的网站图标生成器中，它会在本地生成.ico、Apple触摸图标和192/512 PNG，全部在你的标签页中。没有任何内容被发送到服务器，没有注册，你未发布的logo也不会最终存储在别人的存储桶中。

然后缩小浏览器，查看标签页，问唯一重要的问题：你能看出它是什么吗？

Favicon 生成器在浏览器中运行：免费、无需上传、无水印。