Favicon 尺寸、格式与 HTML 标签

favicon 虽然只是个小文件，但浏览器、手机和已安装的 Web 应用各自需要不同的尺寸。本指南介绍网站需要哪些文件、如何在 HTML 中声明它们，以及如何设计在 16 像素下依然清晰可辨的图标。

什么是 favicon

favicon（“favourites icon”的缩写，意为“收藏夹图标”）是在标签页、书签和历史记录列表中用来标识网站的小图像。把网站添加到主屏幕时，手机会使用更大的版本；已安装的 Web 应用使用其清单中的图标；一些搜索引擎还会在搜索结果旁显示 favicon。由于这些地方使用的尺寸各不相同，网站通常会提供一小组文件。

ICO、PNG 与 SVG 格式的 favicon

格式	包含的内容	须知
ICO（`favicon.ico`）	一个文件中包含多个尺寸，通常为 16、32 和 48 像素	最古老的格式。即使页面没有链接到它，许多浏览器也会从网站根目录请求 `/favicon.ico`，因此它是很有用的后备方案。
PNG	每个文件一个尺寸，支持透明	用 `sizes` 属性声明，以便浏览器选择合适的文件。也用于 Apple 触摸图标和清单图标。
SVG	可缩放到任意尺寸的矢量图形	目前大多数桌面浏览器都支持，但并非所有浏览器都支持，因此请同时保留 ICO 或 PNG 文件。SVG favicon 可以通过 CSS 适配深色主题。

ICO 文件是一种小型容器：文件头列出每张图像及其尺寸和位置，图像本身可以用 PNG 数据存储。LeedyBox Favicon 图标生成器会生成一个包含 16、32 和 48 像素 PNG 图像的 favicon.ico，并为其他尺寸生成 PNG 文件。

常见尺寸及其用途

尺寸（像素）	典型文件	典型用途
16 × 16	favicon-16x16.png，也包含在 favicon.ico 中	标准屏幕上的标签页和书签
32 × 32	favicon-32x32.png，也包含在 favicon.ico 中	高像素密度屏幕上的标签页、部分快捷方式
48 × 48	包含在 favicon.ico 中	某些系统上较大的快捷方式图标和桌面图标
180 × 180	apple-touch-icon.png	iPhone 和 iPad 的主屏幕图标
192 × 192	android-chrome-192x192.png	Android 的主屏幕图标，在清单中列出
512 × 512	android-chrome-512x512.png	Web 应用的安装对话框和启动画面

请从至少 512 × 512 像素的正方形源图或 SVG 文件开始。源图太小，就必须放大才能生成较大的图标，看起来会发虚。不是正方形的徽标需要在周围添加空白，或者进行裁剪。

Apple 触摸图标不应使用透明背景：某些 Apple 设备会把透明区域显示为黑色。请改用一种颜色填充背景。iPhone 和 iPad 会自行把四角处理成圆角，因此文件可以是普通的正方形。关于 Alpha 通道的背景知识，请参阅PNG 和 JPG 中的透明度原理。

HTML 标签与 Web 应用清单

把文件放在网站的根目录中，并在每个页面的 <head> 中添加以下标签：

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

如果还有 SVG 格式的 favicon，请添加 <link rel="icon" href="/favicon.svg" type="image/svg+xml">。清单（site.webmanifest）是一个小型 JSON 文件，包含网站名称、简称、192 和 512 像素的图标、主题色、背景色，以及 standalone 等显示模式。如果文件放在其他文件夹中，请修改标签和清单中的所有路径。

为极小尺寸而设计

保持简洁。在 16 像素下，细线、小字和精细的细节都会糊成一片。简化的标志、单一形状或一两个字母，效果都比带标语的完整徽标更好。
使用强对比。图标与背景之间明显的亮度差异，比精确还原品牌色更重要。
少留边距。空白会让可见的图标变小。较大的图标留一点边距可能有好处，但小 favicon 占满方框的大部分时更容易辨认。
检查实际尺寸。在标签页中以 100% 缩放查看图标，而不要只看放大的预览。

浏览器深色主题

许多人使用深色的标签栏。透明背景上的深色徽标在那里几乎会消失不见，而白色徽标在浅色主题中也可能看不见。常见的解决办法是在徽标后面加一个实心或圆角的背景形状、加一圈浅色描边，或使用通过 prefers-color-scheme 媒体查询改变颜色的 SVG favicon（在支持 SVG favicon 的地方）。LeedyBox 生成器会同时显示浅色和深色标签栏，方便您对比两者。

更新 favicon 与浏览器缓存

浏览器会缓存 favicon，有时会缓存很长时间，因此新图标上传后可能不会立即显示。强制刷新或使用无痕窗口可以看到新版本。为了让回访用户更快获取新图标，请更改文件名，或在标签中的 URL 后加上版本号，例如 /favicon-32x32.png?v=2。书签和搜索结果中的图标可能需要更长时间才会更新。每次更改后，请在您关心的浏览器和设备上测试效果。

常见问题

还需要 favicon.ico 吗？

并非必需，但它是一个简单的后备方案：许多浏览器和其他工具会在网站根目录中查找 /favicon.ico。它只占几 KB。

可以用 JPG 作为 favicon 吗？

浏览器通常可以显示，但 JPG 不支持透明，而且其压缩可能会让细小的细节变模糊。PNG、ICO 或 SVG 文件更适合用作图标。

为什么新的 favicon 没有显示出来？

最常见的原因是旧图标仍在缓存中，或者 HTML 标签中的路径与文件实际上传的位置不一致。请在浏览器中直接打开每个文件的 URL，检查能否正常加载。