网站图标生成器

Favicon 生成器可以把任意一张图片变成一整套覆盖各平台的网站图标 PNG——浏览器标签页、iOS 主屏幕、Android 设备、PWA 应用——并附赠把它们串起来的 HTML 代码。它面向希望拥有精致标签页形象、又不想把同一个 Logo 手工缩放六遍的站长和开发者。

这个工具会生成什么

上传一张图片，工具会生成六种当下关键尺寸的正方形 PNG：

尺寸	典型用途
16x16	浏览器标签页图标
32x32	Retina 标签页与书签图标
48x48	通用桌面回退图标
180x180	iOS 主屏幕的 Apple 触摸图标
192x192	Android 主屏幕与 PWA 图标
512x512	PWA 启动画面与应用商店列表

每种尺寸都会在预览网格里实时渲染，下载前就能看清图案的实际效果。每张卡片都有自己的下载按钮，另有独立面板显示可直接粘贴的 HTML。

裁剪方式为居中方形：原图比高更宽时，从左右各裁掉一条等宽区域；比宽更高时，从上下各裁。裁剪起点按向下取整计算，因此奇数像素的尺寸会朝左上方向偏移一个像素。

分步操作

1. 打开或拖入图片。 点击虚线拖放区选择文件，或把文件拖到上面。浏览器能解码的格式——PNG、JPEG、WebP、GIF、SVG——都可以。
2. 检查预览网格。 把最小的 16x16 和 512x512 对比一下。如果小图标糊成一团，先简化图案再继续。
3. 逐个下载尺寸。 使用每个预览下方的按钮。记住三个最大的文件共用 apple-touch-icon.png 这个名字，保存后请重命名 192 和 512。
4. 复制 HTML 代码。 点击代码面板上的复制按钮，整段代码就进入剪贴板。
5. 放好文件并粘贴代码。 把 PNG 放进网站根目录，再把代码粘贴到每个页面的 <head> 中，最好紧邻 </head> 之前。

HTML 代码与文件命名

生成的代码块是对各平台期望值的归纳，并不是什么神秘咒语：

• 三个 <link rel="icon" type="image/png"> 标签覆盖 16、32、48 像素。
• <link rel="apple-touch-icon" sizes="180x180"> 告诉 iOS 在用户把网站添加到主屏幕时使用哪张图。
• 192 和 512 的 Android 图标使用 rel="icon"。
• <link rel="mask-icon"> 指向 Safari 固定标签页用的 SVG，本工具并不生成它。
• <link rel="manifest"> 指向 Web 应用清单，同样不在本工具生成范围内。
• 两个 msapplication-* meta 设置 Windows 磁贴颜色和可选的配置文件。
• <meta name="theme-color"> 为移动端浏览器 UI 着色；白色是安全的默认值，但建议改成品牌色。

如果你已经在用某个会自动注入 favicon 的框架，只保留需要的行即可，不必粘贴整段。

代码假定使用特定文件名。把 16、32、48 的 PNG 下载为 favicon-16x16.png、favicon-32x32.png、favicon-48x48.png；180px 的下载默认就叫 apple-touch-icon.png；再把 192px 和 512px 重命名为 android-chrome-192x192.png 和 android-chrome-512x512.png。不改名的话，页面会引用不存在的文件，控制台里就会出现 404。

有两个被引用的资源本就不在范围内：Safari 蒙版图标 SVG 与 Web 应用清单。想要固定标签页样式或 PWA 可安装性，请单独创建，或者删掉那两行。

设计 16px 下仍清晰的图标

16x16 是最难的一关，细节丰富的 Logo 几乎都会失败。几条规则会有帮助：

• 用一到两个形状构成简洁剪影，彻底去掉标语和小号文字。
• 保持图形与背景的强对比。细灰线在标签页尺寸下会消失。
• 分别在浅色和深色标签栏上测试，因为浏览器主题各异。
• 如果 Logo 包含文字标识，图标只取其中的图形符号。
• 透明度在现代浏览器可用，但某些 Android 和 iOS 场景会自行加背景，请仔细检查 180 和 192 两个版本。

需要了解的局限

工具只输出 PNG——不生成 ICO、SVG 或 Web 应用清单。它不提供补边、背景色或逐尺寸重新定位，因此填满整块画布的 Logo 会被居中裁剪掉边缘。代码片段里的注释标注为 “Your Site”，不含你的真实域名；如果资源托管在子目录而非根目录，请自行调整路径。全部渲染都在客户端完成，源图很大时处理会偏慢，但绝不会被上传。

测试与部署

文件就位后，favicon 常因浏览器缓存顽固而显得没更新。请强制刷新页面，或用无痕窗口打开，才能看到新图标。标签页图标和书签图标是分开缓存的，两处都要检查。在 iOS 上，把网站添加到主屏幕，确认 apple-touch-icon 正确渲染而不是退化成网页截图。对 Android 与 PWA 安装，用浏览器的安装提示并到开发者工具里检查清单，确保 192 和 512 文件能正确解析。

请把图标放在网站根目录的稳定路径上，这样代码在包括嵌套页面在内的所有路由都有效。如果你的构建管线会给文件名加哈希，请排除图标文件或同步修改代码里的路径，因为被改成 favicon-16x16.abc123.png 的文件不会再出现在 /favicon-16x16.png。最后，把 theme-color meta 设成品牌色而不是默认白色——它会给移动端浏览器地址栏着色，是少数用户真正会注意到的图标相关设置。

相关工具

• 图片裁剪
• 图片格式转换
• Meta 标签生成器