原图预览
上传 PNG 或 SVG 后显示预览。
Favicon 与 PWA 图标生成器
上传一张 PNG 或 SVG，预览网站和 PWA 图标，再下载包含 favicon.ico、PNG 图标和 site.webmanifest 的 ZIP。
- 免费使用
- 无需登录
- 支持 PNG 与 SVG
- 支持 favicon 与 PWA 输出
图标生成工作区
在主面板中上传 PNG 或 SVG，并调整留边、背景、manifest、预览与下载。
上传 PNG 或 SVG
支持 PNG 与 SVG。建议使用透明 PNG 或静态、简洁 SVG，推荐最小尺寸 512×512。
将 PNG/SVG 图标主图拖拽到这里
或点击选择文件
版式设置
在主面板中上传 PNG 或 SVG，并调整留边、背景、manifest、预览与下载。
留边模式
背景模式
预览圆角样式
背景颜色
Manifest 设置
支持下载完整图标包 ZIP，也可单独下载 manifest 和单个文件。
显示模式
预览
上传 PNG 或 SVG 后显示预览。
预览
上传 PNG 或 SVG 后显示预览。
主体识别边界
上传 PNG 或 SVG 后显示预览。
favicon 预览
—
Apple 图标预览
—
PWA 图标预览
—
Maskable 预览
—
输出规格
以下文件将自动生成，可单独下载，也可一键 ZIP 打包。
下载
支持下载完整图标包 ZIP，也可单独下载 manifest 和单个文件。
favicon 预览
4favicon-16x16.png
16×16
favicon-32x32.png
32×32
favicon-48x48.png
48×48
favicon.ico
48×48
Apple 图标预览
1apple-touch-icon.png
180×180
PWA 图标预览
2icon-192x192.png
192×192
icon-512x512.png
512×512
Maskable 预览
2icon-maskable-192x192.png
192×192
icon-maskable-512x512.png
512×512
输出规格
3icon-256x256.png
256×256
icon-1024x1024.png
1024×1024
site.webmanifest
JSON
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"
}
]
}如何使用下载的图标包
ZIP 包含 10 张 PNG 图标、favicon.ico 和 site.webmanifest。这些是网站与 PWA 图标资源，不是完整的原生应用项目。
ZIP 内的文件
favicon-16x16.pngfavicon-32x32.pngfavicon-48x48.pngapple-touch-icon.pngicon-192x192.pngicon-512x512.pngicon-maskable-192x192.pngicon-maskable-512x512.pngicon-256x256.pngicon-1024x1024.pngfavicon.icosite.webmanifest
- 解压 ZIP 并上传到网站。以下示例将所有文件放在网站根目录。
- 将下面的引用添加到页面 HTML 的 head 内。
- 导出前设置应用名称、颜色和启动地址。将 site.webmanifest 与它引用的四张 PWA PNG 放在同一目录；图标路径相对于清单文件解析。
- 打开图标与清单的网址，确认能正常加载，并在目标设备上检查效果；仅添加图标并不等于完成可安装 PWA 的配置。
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">若使用 /icons/ 等子目录，请相应修改 HTML 引用，并让清单与 PNG 保持同目录。将 start_url 设为实际应用入口。ZIP 不包含上传的源 SVG。
使用方法
- 上传一张 PNG 或 SVG 主图，工具会自动识别主体边界。
- 选择留边模式与背景选项，并查看 favicon、App、maskable 预览。
- 下载 ZIP 图标包（含 PNG、favicon.ico 与 web manifest）。
favicon、PWA 与 maskable 有什么区别？
Favicon
1浏览器标签页小图标，尺寸小，要求主体轮廓清晰且不要贴边。
PWA 图标
2用于安装到桌面/主屏幕的图标，常见尺寸是 192×192 和 512×512。
Maskable 图标
3Android 启动器会做形状裁切，主体需保持在更安全的中心区域。
常见图标生成错误
主体贴满边缘
如果直接满铺缩放，不同设备裁切时容易丢失关键内容。
透明空白过大
过大的透明边会让输出看起来过小，工具会根据主体自动重算版式。
上传了不支持的格式
当前工具支持 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 图标。