图标工坊
一张 Logo 进，一套图标出：浏览器标签、导航 Logo、iPhone 主屏幕、Android / PWA、Chrome 扩展、圆形头像。每一档都按平台公开的规则渲染与命名，并在真实界面里预览它在实际显示尺寸下还认不认得出。
把图片拖进来，或点击选择
支持 JPG / PNG / WebP / AVIF / GIF（动图只取第一帧），单张建议边长 2560px 以上。
建议直接上传 1024×1024 的方形 Logo 源图；非正方形也能用，会自动等比内嵌并留白。
你会拿到哪些文件
最容易踩的三个坑
iOS 图标不能有透明通道
带 alpha 的 PNG 传给 apple-touch-icon.png，系统会把透明像素填成黑色 —— 深色手机上一圈黑边，看起来像图做坏了。本页对这几档强制铺底色。
maskable 只留中间 80%
Android 自适应图标按厂商形状（圆、方圆、水滴）裁切，只保证中间 80% 可见：512 档的安全区直径只有 410px。把字或关键图形顶到边缘，装到桌面上就会被切掉。
16px 下只有剪影能活下来
favicon 在标签页里就是 16×16，整块只有 20 个像素。细线、渐变、小字在这里全部消失，只剩色块。生成后请把预览放大到 8 倍看轮廓，认不出就换更简的造型。
常见问题
生成结果没问题、但线上不生效的，多半在这里图片会被上传吗？
不会。解码、内嵌、编码全部走浏览器 Canvas，页面里没有任何接收文件的接口 —— 打开开发者工具的 Network 面板可以核对：除了页面自身的静态资源，不会出现带着你图片的请求。
一套 20 个文件都要上线吗？
不用全放。最少是 favicon.ico（旧环境只认它）加上一档 PWA 图标（192 或 512），其余按你实际要覆盖的平台补。iOS 主屏幕那组给了 4 档（180 / 167 / 152 / 120），只做 iPhone 的话留 180 就够。
换了图标，浏览器标签页还是旧的那个？
favicon 是缓存最顽固的资源之一，寿命常常比 HTML 长得多。本地先硬刷新（⌘/Ctrl + Shift + R）；线上还要等 CDN 与浏览器两层缓存过期。想立刻验证，就临时在 link 的 href 后面加个 ?v=2。
favicon.ico 与 PNG 都要吗？
都要，而且不用拆。favicon.ico 兜的是「只请求根目录 /favicon.ico」的旧环境，里面已经内嵌 16 / 32 / 48 三档，浏览器按当前显示密度自己挑一档；两张 PNG 是给现代浏览器与 RSS 阅读器的显式声明。
favicon.svg 与 logo.svg 为什么放大还是糊？
因为这两档是「位图内嵌 SVG」，不是真矢量。位图无法转换成矢量 —— 描摹出来的路径在 16px 下全是噪点，不如老实内嵌。它们存在的意义是先让文件名与引用方式对上，正式上线请让设计导出真矢量的 SVG 覆盖同名文件。
源图要多大？不是正方形能用吗？
建议 1024 × 1024 的方形 Logo，正好覆盖最大的一档输出。非正方形也能用：一律等比内嵌到画布中央，缺的方向留白，绝不拉伸，留白多少由「内边距」控制。
卡片上「源图偏小」是什么意思？
这一档的目标画布比你源图的有效区域还大，出来的像素只能是插值放大，看着会糊 —— 问题在输入，不在导出。两条路：换更大的源图，或者打开「不放大」按原生像素嵌入。
选了方形，下载下来的头像怎么是方的？
它本来就是方的。512 那一档导出的是一张方形画布，圆形由平台在你上传之后自己裁。如果你把「形状」切成圆形，导出的 PNG 四角是透明的；遇到不认 alpha 的头像位就会露馅，不确定就保持方形。
拖内边距滑杆，卡片会一直重算吗？
会重算，但只跑一遍：停手之后合并成一次渲染，中途再改会取消上一轮。重算期间旧结果留在原地，全部算完才整体替换，所以拖滑杆不会让整页塌成骨架屏。
ZIP 里除了图标还有什么？
一份 README.txt：源图名与尺寸、裁剪范围（如果裁过）、这次的渲染参数（形状 / 内边距 / 底色 / 是否透明），加上完整文件清单与两段接入代码。包名形如 icons-20261024-1208.zip，带本地时间戳。