本工具生成什么
这个生成器将一张图片转换为一个完整、现代的 favicon 资源包 ——
包含供旧版浏览器使用的多尺寸 .ico、16 / 32 / 180 / 192 / 512
等多种 PNG 变体、可选的原始 .svg、用于 PWA 的 site.webmanifest，
以及可以直接粘贴到 <head> 中的 HTML 代码片段。所有内容均在
你的浏览器中生成；无需上传、无需服务器、无任何统计追踪。
资源包内容
favicon.ico—— 多图像格式（16 / 32 / 48），用于浏览器标签页、 书签以及旧版 Windows 快捷方式。favicon-16x16.png和favicon-32x32.png—— 现代浏览器使用的 PNG 变体。favicon.svg—— 仅当你的源图片为 SVG 且开启了”使用原始 SVG” 开关时才会包含。apple-touch-icon.png—— 180×180，不透明，用于 iOS 主屏幕。pwa-192x192.png和pwa-512x512.png—— 标准 PWA 图标。pwa-maskable-192x192.png和pwa-maskable-512x512.png—— 带有 W3C 推荐安全区域的可遮罩变体。site.webmanifest—— 已与上述图标关联的 PWA 清单文件。
内边距、背景和可遮罩安全区域的工作方式
每个平台都有各自的内边距（“边距”），让你可以在图标画布内留出 呼吸空间。“添加背景”开关会在你的源图后绘制一个不透明的方形 —— 当源图透明而目标平台需要不透明（如 Apple 主屏幕），或者只是为了 在浏览器标签页中获得更好的视觉对比时，这非常有用。可遮罩的 PWA 图标在平台边距之上还会使用一个额外的安全区域：中心约 80% 之外的 任何内容都可能在 Android、Windows 或 ChromeOS 应用圆形、圆角或 方圆形遮罩时被裁剪掉。
将资源包接入你的网站
- 将下载的压缩包解压到你的网站根目录（使文件位于
/favicon.ico、/site.webmanifest等路径下）。 - 将 HTML 代码片段粘贴到网站的
<head>中。 - 如果你从子路径提供静态资源（例如
/static/icons/）， 在生成之前请设置”资源路径”，这样代码片段和清单文件就会 使用正确的 URL。 - 如果你对清单文件做了本工具未提供的自定义（例如添加
categories或screenshots），请直接用文本编辑器打开site.webmanifest进行编辑 —— 它就是普通的 JSON。