图标生成器

上传一张 PNG 或 SVG，自动生成 favicon、PWA 与 App 图标包，并智能处理留边与安全区。

上传 PNG 或 SVG

支持 PNG 与 SVG。建议使用透明 PNG 或静态、简洁 SVG，推荐最小尺寸 512×512。

将 PNG/SVG 图标主图拖拽到这里

或点击选择文件

版式设置

留边模式

背景模式

预览圆角样式

背景颜色

Manifest 设置

应用名称短名称

主题色背景色

显示模式起始路径

预览

原图预览

上传 PNG 或 SVG 后显示预览。

主体识别边界

上传 PNG 或 SVG 后显示预览。

favicon 预览

—

Apple 图标预览

—

PWA 图标预览

—

Maskable 预览

—

输出规格

以下文件将自动生成，可单独下载，也可一键 ZIP 打包。

favicon-16x16.png

16×16

favicon-32x32.png

32×32

favicon-48x48.png

48×48

apple-touch-icon.png

180×180

icon-192x192.png

192×192

icon-512x512.png

512×512

icon-maskable-192x192.png

192×192

icon-maskable-512x512.png

512×512

icon-256x256.png

256×256

icon-1024x1024.png

1024×1024

favicon.ico

48×48

site.webmanifest

JSON

下载

支持下载完整图标包 ZIP，也可单独下载 manifest 和单个文件。

{
  "name": "Toolbye App",
  "short_name": "Toolbye",
  "theme_color": "#2563eb",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "icon-maskable-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "icon-maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

使用方法

上传一张 PNG 或 SVG 主图，工具会自动识别主体边界。
选择留边模式与背景选项，并查看 favicon、App、maskable 预览。
下载 ZIP 图标包（含 PNG、favicon.ico 与 web manifest）。

favicon、PWA 与 maskable 有什么区别？

Favicon

浏览器标签页小图标，尺寸小，要求主体轮廓清晰且不要贴边。

PWA 图标

用于安装到桌面/主屏幕的图标，常见尺寸是 192×192 和 512×512。

Maskable 图标

Android 启动器会做形状裁切，主体需保持在更安全的中心区域。

常见图标生成错误

主体贴满边缘

如果直接满铺缩放，不同设备裁切时容易丢失关键内容。

透明空白过大

过大的透明边会让输出看起来过小，工具会根据主体自动重算版式。

上传了不支持的格式

当前工具支持 PNG 与 SVG。若 SVG 结构复杂，建议简化后再上传，或改用 PNG。

原图尺寸过小

原图过小时导出 512/1024 图标会变糊，建议使用更高分辨率。

图片会上传到服务器吗？

当前实现中，图片分析、图标渲染、manifest 生成与 ZIP 打包都在浏览器本地完成。

该流程不会将上传图片发送到专用图像处理 API。

常见问题

支持上传什么格式？

支持 PNG 与 SVG。建议优先使用透明 PNG 或静态、简洁 SVG。

为什么图标不建议贴满边缘？

不同平台会做不同裁切，保留安全边距能避免主体被切掉。

favicon 和 app icon 有什么区别？

favicon 面向浏览器小尺寸标签，app icon 面向安装与桌面场景。

什么是 maskable icon？

用于可裁切启动器图标，必须保证主体位于更安全的中心区域。

我的图片会被上传吗？

当前版本的核心流程在本地浏览器执行，正常使用下不会上传到图像处理服务。

原图至少要多大？

建议至少 512×512，最好使用 1024×1024 或更高分辨率。

为什么透明 PNG 更适合做图标？

透明通道有助于识别主体真实边界，并得到更稳定的自动留边结果。

SVG 可以改颜色吗？

可以。将图标颜色切到“自定义”后，可使用预设色或 HEX 值，按单色覆写 SVG 图标。