使用方法
- 选择“图标来源”：“图片”，或“某种颜色上的字母或表情符号”。
- 选择图片，或输入“字母或表情符号”。设置“背景颜色”和“字母颜色”。
- 设置“主题颜色”和“网站名称”，然后点击“生成图标”。
- 下载 ZIP。把文件放在网站的顶层文件夹中，并把“HTML 标签”粘贴到每个页面的 head 中。
文件及其尺寸
favicon.ico 包含三张图片，分别为16、32和48像素，因此浏览器标签页、书签和 Windows 都能找到合适的尺寸。apple-touch-icon.png 为180像素，用于 iPhone 或 iPad 的主屏幕。android-chrome-192x192.png 和 android-chrome-512x512.png 是清单中列出的安卓图标。site.webmanifest 记录应用名称及其颜色。
透明与背景
网站图标保留透明区域，因此徽标会显示在浏览器所用的任何颜色上。苹果与安卓图标则填充背景颜色，因为苹果触摸图标透明的角在 iPhone 和 iPad 上会显示为黑色。
文件放在哪里
把文件放在网站的顶层文件夹中，使 /favicon.ico 和 /site.webmanifest 这两个地址有效。浏览器会长时间缓存图标：更改后，可在链接中加入版本号，或清除缓存，以看到新图标。
示例：深蓝色底上的字母 FT
选择“某种颜色上的字母或表情符号”，输入 FT，保持深蓝色背景。工具在圆角方形的中央绘制字母，并使其适应方形，因此即使在16像素的网站图标上也清晰可读。
常见问题
生成图标时图片会被上传吗？
不会。图标在您的浏览器中绘制，并在您的设备上打包为 ZIP 文件。页面加载后断开网络连接，再生成一套图标，即可核对这一点。
浏览器标签页图标使用哪个文件？
浏览器使用 favicon.ico，或页面中指向 PNG 或 SVG 文件的链接标签。本工具生成的标签指向 favicon.ico 和苹果图标，因此每种浏览器都能找到合适尺寸的图标。
为什么我的网站图标在16像素时显得模糊？
小图标的像素很少，细线和小字母会变模糊。请使用简单的图形、粗线条，或至多两个字母，并检查 ICO 文件中的16和32像素图片。
为什么苹果图标要有背景颜色？
带透明角的苹果触摸图标，在 iPhone 和 iPad 上该角会显示为黑色。本工具用您选择的背景颜色填满整个方形。
页面的 head 中应放什么？
把“HTML 标签”方框中的四行粘贴到每个页面的 head 元素中。它们分别链接 favicon.ico、苹果图标、清单文件和主题颜色。
Web 应用清单有什么用？
把 site.webmanifest 放在网站的顶层文件夹中。访问者把网站安装为应用时，浏览器会读取它：它给出应用名称、短名称和颜色，并列出两个安卓图标。
资料来源
数据和文字最近核对于2026年11月10日星期二。