使用方法

选择“文字”，输入一两个字符并设置颜色；或选择“图像”并选取 logo（最好为正方形，尺寸至少为 512 px）。
检查各个尺寸的预览，尤其是浏览器标签页中显示的 16 和 32 px 图标。
下载 ZIP 文件，并将其中的文件上传到网站根目录。
将 HTML 标签粘贴到网页的 head 部分，并根据需要修改 site.webmanifest 中的名称。

工作原理

浏览器和设备会在不同位置查找图标。此工具生成的图标集涵盖常见场景：favicon.ico 包含 16、32 和 48 px 图像，适用于浏览器标签页、书签，以及会自动请求 /favicon.ico 的旧版软件；16 和 32 px 的 PNG 文件通过 link 标签引用；180 × 180 的 apple-touch-icon 用于将网站添加到 iPhone 或 iPad 主屏幕；192 和 512 px 的图标通过 site.webmanifest 引用，适用于 Android 主屏幕和可安装的网页应用。

favicon.ico 文件会将图标以 PNG 图像的形式存储在 ICO 容器中，所有当前浏览器以及 Windows Vista 或更高版本都能读取。ICO 和 ZIP 文件由此页面中的代码生成，不会发送到服务器。

小尺寸图标需要采用简洁的设计：在 16 × 16 像素下，细线和小字会消失，因此醒目的字母或简化的标志图案比带文字的完整 logo 更合适。图像会经过多个高质量步骤缩小。apple-touch-icon 始终使用纯色背景，因为 iOS 会将透明区域显示为黑色，并会自行将图标的角裁圆。

上传新图标后，浏览器可能会因强缓存而继续显示旧 favicon 一段时间。强制刷新或直接打开 /favicon.ico 通常会有帮助。

示例

新项目的字母图标

在深绿色圆角方块上输入白色字母“TG”，即可制作出简洁的图标，在浏览器标签页的 16 × 16 px 尺寸下仍清晰易读，无需专门设计 logo。

使用现有 logo 制作图标

上传一张透明背景的 1024 × 1024 PNG logo，并选择“完整适配”，即可生成透明的标签页图标，以及带有品牌色背景的 apple-touch-icon。

宽版 logo

对于 1200 × 300 的文字 logo，选择“居中裁剪”只会保留中间的字母。选择“完整适配”虽然能保留全部内容，但图标会变得很小；单独使用方形标志图案通常效果更好。

常见问题

我还需要 favicon.ico 吗？

仍然有用。有些浏览器、feed 阅读器和工具即使没有 link 标签，也会请求网站根目录下的 /favicon.ico。现代浏览器也会使用 HTML 中引用的 PNG 图标。

文件应该放在哪里？

请将文件上传到网站根目录，也就是与首页同级的位置，这样 /favicon.ico 和 HTML 中的其他路径才能正常使用。如果使用子目录，请修改 link 标签和 site.webmanifest 中的路径。

为什么仍然显示旧 favicon？

浏览器会单独缓存 favicon，而且缓存时间很长。请尝试强制刷新、在新标签页中打开 /favicon.ico，或使用无痕窗口查看。重命名文件（例如 favicon-v2.ico）也能强制重新加载。

此工具会生成 SVG favicon 吗？

不支持。本工具生成 PNG 和 ICO 文件，这些格式适用于所有浏览器。如果你已有 SVG logo，也可以通过 type 为 image/svg+xml 的 link 标签自行添加，作为这些文件的补充。

隐私

图标、ICO 文件和 ZIP 文件均在浏览器中生成。你的图像和文字不会上传、存储，也不会纳入分析统计。