🖼️

Favicon 全套生成器

一张图搞定全平台网站图标！上传图片自动生成 16×16 / 32×32 / 48×48 / apple-touch-icon 180×180 / android-chrome 192×192 / 512×512 全套 PNG，逐个下载，另附 site.webmanifest 与 <link> 引用代码（一键复制）。原图非正方形自动提示并居中裁剪，纯本地处理不上传。

🖼️ 6 种尺寸一次出 🍎 apple-touch-icon 🤖 PWA manifest ✂️ 非正方形自动裁剪 🔒 纯本地处理

📤上传图片

🖼️ 点击选择图片

建议 ≥512×512 的正方形 PNG / JPG / SVG，越大越清晰

网站名称（manifest 用）

主题色（manifest 用）

💡使用提示

源图建议正方形 ≥512×512，PNG 最佳

非正方形自动居中裁剪，不会拉伸变形

文件部署全部放到网站根目录 /

数据安全图片只在本地处理，不上传

👁️尺寸预览与下载逐个下载 PNG

🖼️

上传一张图片后自动生成全套尺寸

源图：

site.webmanifest（PWA 清单）

HTML 引用代码（粘贴到 <head>）

📐

生成口径：上传图片经 FileReader 读入浏览器，用 canvas 按高质量平滑缩放输出 6 个尺寸 PNG；原图非正方形时取居中最大正方形裁剪（不拉伸、不变形），并在页面上明确提示。16/32/48 用于浏览器标签页，180 为 iOS 主屏图标，192/512 写入 site.webmanifest 供 Android / PWA 使用。所有文件建议部署到网站根目录，引用代码已按根路径（/）生成。全程本地处理，不接 AI、不上传图片。

一个网站到底需要多少种图标

现代浏览器的 favicon 早已不是一个 favicon.ico 能打发的：桌面标签页要 16×16 和 32×32（高分屏），快捷方式要 48×48，iPhone/iPad「添加到主屏」要 apple-touch-icon 180×180，Android 与 PWA 则通过 site.webmanifest 声明 192×192 与 512×512。缺了哪个，对应场景就会显示模糊或默认图标。本工具一次生成全部 6 个尺寸 + manifest + 引用代码，复制粘贴即完成全平台适配。

为什么不上传服务器处理

图片缩放用浏览器 canvas 就能高质量完成，没必要把 Logo（往往是未发布的品牌素材）传到服务器。本工具全程本地：FileReader 读图 → canvas 缩放 → dataURL 下载，速度快、无隐私顾虑，断网也能用。

使用方法

点击上传区选择一张图片（建议 ≥512×512 的正方形 PNG）；
若原图非正方形，页面会提示已自动居中裁剪；
右侧预览 6 个尺寸效果，逐个下载 PNG；
填网站名称与主题色，下载 site.webmanifest；
复制 HTML 引用代码粘贴到页面 <head>，把所有文件传到网站根目录即可。

更新记录

1.02026-10-16全新上线：一张图生成 16/32/48/180(apple-touch-icon)/192/512 全套 PNG；非正方形自动居中裁剪并提示；site.webmanifest 生成与下载（可配网站名/主题色）；<link> 引用代码一键复制；纯本地 canvas 处理不接 AI。

常见问题

生成的文件要放在网站哪个目录？

全部放到网站根目录（即 https://你的域名/ 下），因为引用代码与 manifest 里的路径都是 /favicon-32x32.png 这样的根路径。放好后刷新页面（必要时强制刷新清缓存）即可看到新图标。

还需要传统的 favicon.ico 吗？

现代浏览器都支持 PNG favicon，本工具未生成 .ico。如果必须兼容极老的 IE，可把 32×32 PNG 用本站的「图片转 ICO」类工具再转一份 favicon.ico 放根目录即可。

SVG 源图能上传吗？

可以。SVG 会被浏览器按矢量渲染到 canvas 再缩放，效果通常最好。注意部分含外部资源引用的 SVG 可能因安全策略无法绘制，此时请改用 PNG。

图片会被上传到服务器吗？

不会。FileReader + canvas 全程在浏览器本地完成，不接 AI、不上传任何数据，关闭页面即清空。