🛠网站图标生成器

这页在做什么

网站图标不是一张图的事：标签页要 16 像素，手机主屏要 180 像素，做成可安装的应用还得分开给 192 和 512。 这页把同一枚图一次性出成全套档位，顺便把 link 标签和 site.webmanifest 写好， 你只需要把文件传到站点根目录、把代码贴进页面头部。

三种做法

1. 用字做图标：填一两个字，挑形状、底色、字色和字体。字越少越耐看，16 像素上两个字已经勉强。
2. 用现成的图：选一张方图或照片，决定裁成正方铺满还是整图放进方块、铺不满时留底色还是留透明。
3. 点生成全套，产物列表里每个文件都能单独下载，也可以一个 zip 全拿走。

为什么先让你看真实像素

图标最后的命运是被缩小：母图先画在 512 像素的方框上，再按面积平均逐档缩到 16、32、48…… 缩小直接取样会漏掉像素，细线条和笔画多的字会断、会糊；面积平均把每个目标像素盖住的源像素按覆盖长度加权求平均， 缩到多小都还是那一团颜色。页面上「原样」和「放大 6 倍」两栏就是同一张图，格线即像素边界。

favicon.ico 里装了什么

它是一个文件里塞好几档尺寸：先是 6 字节的方向头，再是每档 16 字节的目录项，后面才是图像本身。 宽和高各占 1 个字节，所以容器最大到 256×256——256 这个数在这两个字节里写成 0；512 那一档只能作为单独的 PNG 给出。 本页每一档都按 32 位不压缩位图存，外加一层 1 位透明掩码。 容器其实也允许直接放 PNG，但 MDN 明确建议 .ico 里用位图写法，说对 PNG 条目的支持是 Windows Vista 之后才加上的， 未必各处都认，所以本页不这么写。

贴回网页的代码

生成的那段 link 建议放在页面头部的其它 link 旁边。规范写的是： 同一页可以给多档图标，浏览器按 type、media 和 sizes 自己挑最合适的一张； 如果页面里一个 rel="icon" 都没有，浏览器才会去站点根目录试 /favicon.ico——规范在这一步用的词是「可以」， 所以别把希望全押在默认路径上，文件放上、代码贴上才稳。

各档尺寸的出处

• favicon.ico 里本页默认放 16、32、48 这三档，多档一起放可以让不同的场合各挑各的；link 用 sizes 把这些档位都列出来。
• apple-touch-icon.png 用 180 像素。苹果文档给的档位是 120、152、167、180， 并且说设备找不到正好那档时会取比它大的最小一张，所以只放 180 是够的。
• site.webmanifest 里的图标，MDN 列的 Chromium 装机条件要求同时有 192 像素和 512 像素两档。
• maskable 版是给「系统把图标裁成圆或方」的场合：规范把安全区定义成半径占图标 40% 的圆， 所以本页把图标本体缩到 56% 见方——这样连四个角也落在圆里，四周补满底色。

只在浏览器里算

选图片是本地读取，生成、缩放、编码、打包全在你这台机器的浏览器里完成；不上传、不写 localStorage， 关掉页面就什么都留下不了。PNG 由浏览器自带的编码器产出，.ico 和 zip 的字节由本页自己拼。