Favicon 套件生成器
在浏览器中将一张图片转换成完整的多平台 favicon 套件，包含 PNG、Web 清单和 head HTML 代码片段。
Favicon 套件生成器 — 拖入一张 PNG、JPG、SVG 或 WebP 图片，立即获得完整的 favicon 套件：16、32、48、180（Apple touch）、192 和 512 px（Android/PWA）的方形 PNG 图标，外加可直接粘贴的 site.webmanifest 以及把它们全部链接起来、用于 head 部分的 HTML 代码片段。每个尺寸都使用高质量的 Canvas 缩放渲染，可单独下载，也可打包一次性下载。所有处理都在你的浏览器本地完成——图片绝不会上传。
Favicon 套件生成器 是什么？
Favicon 套件生成器是一款免费的网页版工具，可将一张源图片转换成现代网站所需的全部 favicon 文件。它面向希望快速获得即插即用图标集的网页开发者、设计师和站长，适用于 HTML、WordPress、PWA 和 Apple 设备，无需安装软件，也无需注册。拖入一张图片后，它会渲染出 16、32、48 px 标准 favicon、180 px Apple touch 图标，以及 192 和 512 px Android/PWA 图标，并生成匹配的 site.webmanifest 和一段可直接复制、用于 head 部分的 link 与 meta 标签代码片段。当你想把 logo 完全在自己设备上打包成可直接部署的 favicon 文件时，随时都能用上它。
如何使用 Favicon 套件生成器
- 将 PNG、JPG、SVG 或 WebP 图片拖到拖放区，或点击它从设备中浏览并选择文件。
- 等待工具自动渲染全部六个方形尺寸；源图片预览和每个生成的图标会显示在下方。
- 点击源图片或任意图标缩略图，打开缩放灯箱，查看它在该像素尺寸下的效果。
- 点击某个尺寸的下载按钮，仅保存单个图标，例如只下载 32 px favicon 或 512 px PWA 图标。
- 复制 site.webmanifest 和 <head> HTML 代码片段，将图标接入你的网站，然后粘贴到项目中。
- 点击“下载套件”，一次性保存全部 PNG 以及 site.webmanifest 文件。
示例
从 Logo 生成完整 favicon 套件
拖入一张方形 PNG 标志，即可得到 favicon-16x16.png、favicon-32x32.png、favicon-48x48.png、apple-touch-icon.png、android-chrome-192x192.png 和 android-chrome-512x512.png，连同 site.webmanifest 一起放入 public 文件夹。
接入到 HTML head 中
复制生成的 <head> link 与 manifest 标签代码片段，粘贴到页面的 <head> 标签之间，让浏览器和 PWA 在不同场景下选用正确的图标。
只获取 Apple 和 PWA 图标
让整套套件渲染完成后，单独下载 180 px 的 Apple touch 图标以及 192 和 512 px 的 Android/PWA 图标，而不必保存整个套件。
常见问题
- 它会生成哪些文件？
- 它会生成六个方形 PNG 图标（16、32、48、180、192 和 512 px）、一个 site.webmanifest 清单，以及一段把它们链接起来的可复制 <head> HTML 代码片段。每个 PNG 可单独下载，也可作为一个套件一起下载。
- 我可以上传哪些图片格式？
- 你可以拖入或浏览选择一张 PNG、JPG、SVG 或 WebP 图片。工具会读取这一张源图片，并据此渲染出所有输出尺寸。
- 图标是 PNG 还是 ICO 文件？
- 所有生成的图标都是 PNG。工具为每种尺寸分别生成独立的方形 PNG 文件，而不是合并成一个 ICO 文件——这正是现代浏览器和 PWA 所期望的。
- 如果我的图片不是方形，会被拉伸吗？
- 不会。每种尺寸都会保留原始宽高比，通过高质量的 canvas 缩放将其居中放置在方形内，并用透明边距填充剩余空间。
- 我的图片会被上传到服务器吗？
- 不会。所有处理都通过 Canvas API 在你的浏览器本地完成。你的图片绝不会被上传，因此它会完全私密地保留在你自己的设备上。