生成网站图标
把任意图片转换为一整套完整的网站图标——favicon.ico、Apple 触控图标、Android 和 PWA 所需的各种尺寸——外加一份 Web Manifest 和可直接粘贴进网站的 HTML 代码。
- 文件永不离开你的设备
- 免费，无需注册
- 无水印
- 加载后可离线使用
如何生成网站图标
- 1
上传一张正方形图片
512×512 或更大的 PNG 图片能得到最好的效果。
- 2
选择背景
透明背景，或为需要纯色背景的格式选一个纯色。
- 3
下载并安装
下载 ZIP，把文件放进网站根目录，把生成的 HTML 粘贴进你的 <head> 标签中。
为什么一个图像文件是不够的
一个单一的图标文件需要同时服务于 16 像素的浏览器标签页、180 像素的手机主屏幕、最大 512 像素的 Android 应用抽屉，以及 Windows 任务栏图块——这些场景在分辨率、显示比例处理和背景合成规则上差异巨大，没有任何一个单一的源分辨率能同时适应所有场景。历史上，这正是为什么许多网站要么只提供一个低分辨率的 `favicon.ico`，导致在其他地方显得模糊，要么干脆跳过移动端和 PWA 图标。从一份源文件生成所有尺寸并打包在一起，才能让图标在所有这些场景下同时显得清晰、正确，而不是在某一个场景下勉强合格、在其余场景下都出错。
Web Manifest 的存在则出于一个相关但不同的原因：它让 Android 和桌面版 Chromium 浏览器能够提供"安装应用"的选项，并在安装后以网站自己的图标和名称显示，而不是作为一个使用通用地球图标的书签。网站图标和 PWA 图标由平台的不同部分处理，这也是这里会同时生成普通图标集和 Manifest 文件的原因。
设计一个缩小到 16 像素依然能用的图标
浏览器标签页是网站图标最小、也是被看到次数最多的呈现场景，而且非常不留情面：在 16×16 像素下，最多只有空间容纳一到两个大胆的图形，基本没有空间留给超过一个字母或数字的文字。一个在正常尺寸下看起来精致的多元素 Logo，在标签页尺寸下通常会变成一团模糊的色块，因为让它可识别的那些细节，根本没有足够的像素可以呈现。
最可靠的源图像是单一的字形、字母组合图标，或简单图标，放在纯色或透明背景上，理想情况下提供 512×512 或更大的尺寸，这样每一个生成的尺寸都是干净的缩小，而不是放大。如果现有的 Logo 比较复杂，通常更好的做法是从中提取或简化出一个可识别的元素——一个字母组合、一个符号、一个有辨识度的形状——而不是把整个 Logo 直接缩小，指望它还能保持完整。
为什么同一份源图像还需要选择背景
透明背景的网站图标能同时干净地适配浏览器标签页的浅色和深色主题，只要图案本身不需要背景色，这就是正确的选择。但有些应用场景完全无法使用透明度——尤其是 Apple 触控图标，iOS 会先把它合成到一个纯色背景上，再套用自己的圆角蒙版，所以一份透明的源图像，最终会变成一个悬浮在黑色背景上的 Logo，而不是其他 iOS 应用图标那种干净的图块。提前选定一个纯色背景——最好匹配品牌色，而不是留成默认的白色或黑色——才能让图标在所有场景下都显得是经过设计的，而不只是在某些场景下碰巧正确。
常见问题
我的源图片应该是什么尺寸？
至少 512×512，正方形，且构图简单。网站图标在浏览器标签页里是以 16×16 的尺寸显示的——任何精细细节或小号文字在这个尺寸下都会糊成一团。一个大胆的单一图形或字母，效果会比一整套完整的 Logo 好得多。
我还需要 favicon.ico 吗？
实际上还是需要的。现代浏览器更倾向于使用你在 HTML 中声明的 PNG 尺寸，但许多工具、订阅阅读器和较旧的浏览器，无论你的标记代码写了什么，都会直接向网站根目录请求 `/favicon.ico`。多花几 KB 的空间，能让所有情况都兼顾到。
为什么 Apple 触控图标是 180×180 且没有透明度？
iOS 会以 180×180 的尺寸渲染主屏幕图标，并套用自己的圆角处理。它还会把透明像素合成到黑色背景上，这就是这个工具要填充背景色的原因——否则透明的 Logo 会出现在一块黑色方块上。
这些文件应该放在哪里？
放在网站的根目录，与 `index.html` 同级，这样 `/favicon.ico` 才能被正确访问。然后把生成的 HTML 粘贴进你的 `<head>` 标签。Manifest 文件正是让 Android 和桌面浏览器能把你的网站作为应用安装的关键。
为什么我的网站图标没有更新？
浏览器对网站图标的缓存异常激进——常常会忽略普通的强制刷新。可以尝试用隐私窗口打开，或者在 HTML 中给图标的 URL 加上 `?v=2` 之类的参数，强制重新获取。