网站图标生成器
上传一张图片即可生成多尺寸 ICO、平台图标包与配置代码。
隐私安全：所有处理均在您的浏览器本地完成，数据绝不上传1. 图标来源
2. 裁剪与留白
小尺寸图标应保持简单轮廓，可参考下方 16×16 的 1:1 像素预览。
3. 平台与站点信息
输出平台4. 多尺寸与设备预览
128px 及以下按实际像素 1:1 展示，更大的尺寸为缩略显示；棋盘格代表透明区域，切换用途可对比 maskable 下的裁剪效果。
虚线圆为安全区边界，超出圆外的像素可能被系统裁掉。
5. 生成与下载
🔒 全部在浏览器本地完成图片不会上传到任何服务器；生成过程若耗时较长，按钮会显示「生成中…」。
6. 输出文件清单
ZIP 内为扁平结构，所有文件请放在站点根目录，文件名不要修改。
7. 配置代码
工作原理
- 1图片只用本地 File 读入并解码（优先 createImageBitmap 并自动校正方向，失败时回退到 objectURL 加 img 元素），源图超过 1024px 会先等比降采样，全程不发起任何网络请求。
- 2每个目标尺寸都在离屏 canvas 上重新绘制：先按内边距与缩放策略算出居中绘制矩形，圆角通过路径裁剪实现；maskable 变体改为铺满画布，保证关键内容落在中心 80% 安全区内。
- 3小尺寸增强直接操作像素：对 alpha 通道做形态学膨胀再提升对比度，让 16px / 32px 下的图形轮廓更实、更容易辨认。
- 4ICO 由浏览器内嵌 PNG 图层手工拼装：ICONDIR 文件头 + 每层 16 字节目录项 + 各层 PNG 数据，256px 图层的宽高字节按规范写作 0。
- 5ZIP 使用内置的 store 模式打包（CRC-32 校验 + UTF-8 文件名标志），manifest、browserconfig 与 README 均由字符串模板生成，无需任何第三方库，断网也能完整导出。
常见问题
生成的图标包应该怎么用？
解压后把全部文件上传到网站根目录（文件名不要修改，大量教程与工具链依赖这些固定命名），再把本页「配置代码」区域的 HTML 片段粘贴到网页 head 中，最后清空浏览器缓存刷新页面即可生效。manifest 与 browserconfig 需与图标文件放在同一目录。
为什么 apple-touch-icon 没有透明背景？
iOS Safari 不支持带透明通道的 apple-touch-icon，透明区域会被渲染成黑色。因此本工具在生成 180×180 的 Apple 图标时会强制填充你在「图标底色」中指定的颜色（默认为白色），保证添加到主屏后显示正常。
maskable 图标和普通图标有什么区别？
普通图标（purpose: any）会被系统按原样显示；maskable 图标允许系统任意裁剪成圆形、圆角方形等形状，因此关键内容必须落在中心 80% 的圆形安全区内，否则边缘可能被裁掉。本页的「maskable 安全区」预览可以帮你判断图案是否需要缩小。
16×16 的图标看起来很模糊，有办法改善吗？
16×16 只有 256 个像素，再复杂的图案也必然丢失细节。建议尽量使用简单、高对比的轮廓，并开启「小尺寸自动加粗」对小尺寸做轮廓增强；同时可以在预览区直接观察 16×16 的 1:1 实际像素效果来调整。
上传 SVG 图片为什么有时渲染不全？
SVG 会被先栅格化成位图再缩放到各个尺寸。如果 SVG 内部引用了外部字体或外部图片，这些资源在离线渲染时可能加载失败，导致部分内容缺失。建议改用只包含矢量图形的 SVG，或直接上传 PNG 图片。
图片会上传到服务器吗？
不会。解码、缩放、像素增强、编码与打包全部在浏览器本地完成，页面不发起任何网络请求，断网状态下也能正常使用，源代码中也不存在任何网络调用。