favicon 应该是多大尺寸？

浏览器标签页以 16 × 16 CSS 像素显示 favicon，在高分辨率屏幕上相当于 32 × 32，所以 ICO 中包含 16、32 和 48 像素三个版本。再加上 180 × 180 的 Apple touch icon，以及供 Web 清单使用的 192 和 512 像素图标，就覆盖了所有常见情况。请从至少 512 × 512 像素的图片开始。

现在还需要 favicon.ico 文件吗？

需要。即使没有任何标签指向它，浏览器、订阅阅读器和爬虫也会自动请求 /favicon.ico，而旧版浏览器只认 ICO。请在网站根目录放一个，与 SVG 和 PNG 图标并存。

可以用 SVG 做 favicon 吗？

可以。Chrome、Edge、Firefox 和较新的 Safari 都支持通过 type="image/svg+xml" 的 link 标签使用 SVG favicon。在这里上传 SVG，它会以 icon.svg 的形式与 ICO 回退文件一起打包，HTML 片段也会同时链接两者。

apple-touch-icon 是什么？

它是 iPhone 或 iPad 在有人把你的网站添加到主屏幕时使用的 180 × 180 像素 PNG。它应当使用纯色背景和直角，因为 iOS 会自己处理圆角，并把透明区域变成黑色。

为什么我的 favicon 不显示？

浏览器会长时间缓存 favicon，往往长达数天。先确认文件能在 link 标签所写的路径上访问到，然后强制刷新，或在无痕窗口中打开网站。给文件改名，或加上 favicon.ico?v=2 这样的版本参数，可以强制重新下载。

如何把 PNG 转换成 ICO？

把 PNG 拖到本页面，然后下载 favicon.ico。生成器会把它缩放为 16、32 和 48 像素，并把三个尺寸打包进同一个 ICO 文件，每个尺寸都以 PNG 形式存放在容器中。

site.webmanifest 有什么用？

它是一个小型 JSON 文件，告诉 Android 和 Chrome 你的网站名称、主题色、背景色，以及网站被添加到主屏幕或作为应用安装时使用的 192 和 512 像素图标。

我的标志会被上传到服务器吗？

不会。每个图标都在你的浏览器中绘制和编码，ZIP 也在你的设备上生成。不会向任何地方发送数据，页面加载后即使离线也能继续使用。

Favicon 生成器

用一张图片生成所有尺寸的 favicon、真正多尺寸的 .ico 和 Web 清单文件。所有处理都在本地完成，不会上传任何内容。

输入: PNG · JPEG · WebP · SVG
输出: ICO · PNG · webmanifest · ZIP

拖入你的标志

PNG、JPEG、WebP 或 SVG。正方形且至少 512 × 512 px 效果最佳。也可以直接粘贴图片。

用一张图片生成全部 favicon 文件

这个 favicon 生成器把一个标志变成如今网站所需的整套文件：内含 16、32 和 48 像素图标的 favicon.ico，16 到 512 像素的清晰 PNG，Apple touch icon，Android Chrome 图标，一份 site.webmanifest，以及可直接粘贴到页面中的 HTML 标签。你可以把图片调成正方形、添加内边距、圆角或放到纯色底板上，然后打包为一个 ZIP 下载。缩放和打包都在你的设备上完成，标志不会被上传到任何地方。

如何制作 favicon

把 PNG、JPEG、WebP 或 SVG 拖到页面上，或直接粘贴。至少 512 × 512 像素的正方形标志或 SVG 效果最清晰。
选择适应以完整保留图片并在周围留白，或选择填充将其裁剪为正方形。如需圆角底板，可添加内边距和圆角半径。
选择背景颜色，或保持透明。Apple touch icon 始终使用纯色背景，因为 iOS 会把透明区域显示为黑色。
填写 Web 清单的应用名称和颜色，然后点击下载 ZIP，或在预览中单独下载某个文件。
把文件上传到网站根目录，并将 HTML 标签粘贴到每个页面的 <head> 中。

现代浏览器实际需要哪些 favicon 文件？

关于 favicon 的建议里充满了 2012 年遗留下来的做法：几十种尺寸、Windows 磁贴 XML、Safari 固定标签页蒙版。如今的浏览器需要的要少得多。四个文件就几乎能覆盖目前在用的所有浏览器、手机和操作系统。

ZIP 中的其他文件只是为了完整：16、32 和 48 像素的 PNG 供那些按名称索要它们的工具和 CMS 使用，还有一个可选的 150 × 150 Windows 磁贴，用于旧式固定网站。多出的文件没有坏处，但你不需要把它们全部链接上。

favicon.ico: 通用的回退方案。即使没有任何标签指向它，浏览器也会自行请求 /favicon.ico，RSS 阅读器、书签管理器和爬虫也是如此。一个文件里包含 16、32 和 48 像素三个版本，每个都是 ICO 容器中的一张 PNG，自 Windows Vista 以来的所有浏览器都能读取。
icon.svg: 矢量 favicon，在任何尺寸和缩放级别下都清晰。只要链接了它，Chrome、Edge、Firefox 和较新版本的 Safari 就会使用。只有从 SVG 开始才能得到它；位图无法变成真正的矢量图。
apple-touch-icon.png: 一张 180 × 180 的不透明 PNG，当有人把你的网站添加到主屏幕时，iPhone 和 iPad 会显示它。iOS 会自行套用圆角蒙版，所以图标的角应为直角，背景应为纯色。
Manifest 图标: site.webmanifest 中列出的 192 和 512 像素 PNG。Android 用它们作为主屏幕快捷方式和已安装 Web 应用的启动画面，Chrome 在提示安装网站之前也会检查它们是否存在。

要粘贴的 HTML 标签

代码片段用 sizes="32x32" 而不是 sizes="any" 来链接 ICO。如果写成 "any"，即使有 SVG 可用，Chrome 也会优先使用 ICO。上传 SVG 时，片段也会链接它，这样支持 SVG favicon 的浏览器会使用 SVG，其余的则回退到 ICO。没有 SVG 时，改为链接 32 和 16 像素的 PNG。

theme-color meta 标签会为 Android 和 Safari 中的浏览器工具栏着色，site.webmanifest 则包含应用名称、颜色和大尺寸图标。请保持文件名不变，并把所有文件放在域名根目录下；如果放在别处，就相应修改片段中的路径。

设计一个在 16 像素下依然清楚的 favicon

化繁为简。一个 16 × 16 的图标总共只有 256 个像素。文字标志和细线条会糊成一团；单个字母、一个符号或去掉文字的标志图形要清楚得多。
选择在两种标签栏颜色下都醒目的对比度。浏览器标签栏会随主题呈浅色或深色。预览会把每个尺寸分别放在白色和近黑色底板上显示，这样你在发布之前就能发现在深色模式下消失的深色标志。
拿不准时就加底板。带少量内边距和圆角的纯色背景，能让细线条或透明的标志在任何标签栏上都清晰可见，放在主屏幕上也显得用心。
从大图开始。图片会以逐次减半的方式缩小，以保证边缘干净，但源图中没有的细节无论如何都补不出来。请提供 512 像素或更大的图片，或者 SVG。
检查颜色。如果品牌色在白色或深色标签栏上太淡，可以用对比度检查器测试；如果拿到的是另一种表示法的色值，可以用颜色转换器转换。

为什么不需要上传

大多数 favicon 生成器会把你的标志发送到服务器上缩放。这个工具在浏览器的 canvas 上绘制每个尺寸，用 JavaScript 逐字节写出 ICO 文件，再用一个小型 WebAssembly 模块构建 ZIP，因此图片从不离开你的设备，页面加载后即使离线也能继续使用。对于尚未发布的品牌，或是你还不能外传的客户标志，这一点很重要。

常见问题

favicon 应该是多大尺寸？: 浏览器标签页以 16 × 16 CSS 像素显示 favicon，在高分辨率屏幕上相当于 32 × 32，所以 ICO 中包含 16、32 和 48 像素三个版本。再加上 180 × 180 的 Apple touch icon，以及供 Web 清单使用的 192 和 512 像素图标，就覆盖了所有常见情况。请从至少 512 × 512 像素的图片开始。
现在还需要 favicon.ico 文件吗？: 需要。即使没有任何标签指向它，浏览器、订阅阅读器和爬虫也会自动请求 /favicon.ico，而旧版浏览器只认 ICO。请在网站根目录放一个，与 SVG 和 PNG 图标并存。
可以用 SVG 做 favicon 吗？: 可以。Chrome、Edge、Firefox 和较新的 Safari 都支持通过 type="image/svg+xml" 的 link 标签使用 SVG favicon。在这里上传 SVG，它会以 icon.svg 的形式与 ICO 回退文件一起打包，HTML 片段也会同时链接两者。
apple-touch-icon 是什么？: 它是 iPhone 或 iPad 在有人把你的网站添加到主屏幕时使用的 180 × 180 像素 PNG。它应当使用纯色背景和直角，因为 iOS 会自己处理圆角，并把透明区域变成黑色。
为什么我的 favicon 不显示？: 浏览器会长时间缓存 favicon，往往长达数天。先确认文件能在 link 标签所写的路径上访问到，然后强制刷新，或在无痕窗口中打开网站。给文件改名，或加上 favicon.ico?v=2 这样的版本参数，可以强制重新下载。
如何把 PNG 转换成 ICO？: 把 PNG 拖到本页面，然后下载 favicon.ico。生成器会把它缩放为 16、32 和 48 像素，并把三个尺寸打包进同一个 ICO 文件，每个尺寸都以 PNG 形式存放在容器中。
site.webmanifest 有什么用？: 它是一个小型 JSON 文件，告诉 Android 和 Chrome 你的网站名称、主题色、背景色，以及网站被添加到主屏幕或作为应用安装时使用的 192 和 512 像素图标。
我的标志会被上传到服务器吗？: 不会。每个图标都在你的浏览器中绘制和编码，ZIP 也在你的设备上生成。不会向任何地方发送数据，页面加载后即使离线也能继续使用。