给一个网站加个图标，本该是两分钟的事。实际上要七个不同尺寸的文件、一种再没有软件写得出来的老格式、一个 iPhone 专用的图标、另一个会被安卓按自己的形状裁掉的图标，还有半打要粘到页面里正确位置上的代码。这就是为什么网站图标生成器这么多，也是为什么它们全都以“请交出您的标志”开场。
这一个不要。您的图片在这里读取、按每个尺寸重画一遍，压缩包也在标签页里打好。那个 .ico 文件是一个字节一个字节拼出来的，因为没有哪个浏览器写得出它：这是我们实测过的，不是想当然。
如果您给的是 SVG，那么每个尺寸都会被重新绘制，而不是放大或缩小。对一张矢量图来说这正是该做的事，而它也是做一整套图标最好的原料。
怎么用
- 把您的图片放进来。最理想的是一张边长至少 512 像素的正方形图；SVG 更好，每个尺寸都会重画得清清楚楚。
- 选一下不是正方形的图该怎么处理，以及那些不支持透明的图标要不要垫白底。
- 点“生成并下载”。只下来一个压缩包，里面有九个文件和一份写着要粘贴代码的备忘。
支持的格式
这四类在所有最新的浏览器里都打得开。SVG 地位特殊，处理方式也特殊：它是按每个尺寸重画的，不是缩放的。
PNG 图片（.png）
除 SVG 之外最好的选择：它保留透明，而这对标签页图标很要紧。边长最好在 512 像素以上。
SVG 矢量图（.svg）
最理想的原料：每个尺寸都从图形本身重新绘制，而不是从像素放大。SVG 必须自带尺寸或者绘图区域，而且不能引用任何外部字体或图片，否则浏览器会忽略它们。
JPEG 照片（.jpg、.jpeg）
能用，但 JPEG 没有透明：您的图标永远会带一个方方正正的底色。做标志的话，还是 PNG 或者 SVG 更合适。
WebP 图片（.webp）
哪里都打得开，也保留透明。至于产出的图标，一律是 PNG：这是浏览器唯一必须写得出来的格式，也是所有系统在 .ico 里都认的唯一一种。
它的限制
每个文件 20 MB
做图标的原图没有理由很重：超过二十兆字节，那就不是一个标志而是一张照片了，而产出的压缩包还是同一个。这个上限省得让手机白忙一场。
每张图约 1670 万像素
在 iPhone 和 iPad 上，画布的面积很长时间都被限死在 4096 乘 4096 像素，超过就分配失败。工具在分配之前先检查面积，干脆地拒绝。
原图太小，没法变好
如果您的图片边长不到 512 像素，那些大尺寸的图标就是放大出来的，也就是糊的。没有哪件工具能凭空造出不存在的像素，而这一件会在屏幕上告诉您，不会一声不吭地还给您一个软塌塌的图标。
.ico 是手工拼出来的，里面装的是 PNG
没有哪个浏览器写得出 .ico 文件：这是我们量出来的，跟画布要这个格式，它给回一个 PNG。所以这个容器是围着三张 PNG 图片、一个字节一个字节搭起来的。.ico 里放 PNG，Windows Vista 起就支持，Firefox 从 9 起支持；至于其他浏览器，我们只找到用法上的证据，没找到厂商的文档，我们宁可把这件事写出来。
压缩包里不带任何日期
zip 文件通常会记录每个文件的日期和时间。那会是这个压缩包唯一携带的、关于您的信息。所以我们往里写一个固定的日期，就是这个格式允许的最早那个；用同一张图做两次，两个压缩包字节对字节完全一样。
会动的图片会被拒绝
图标天生是静止的，而画布里只装得下一帧。与其一声不吭地留下动画的第一帧，工具宁可停下来把话说清楚。
关于这个工具的问题
我的图片会被发到什么地方吗？
不会，而且您不必听我们的。按 F12 打开浏览器的开发者工具，切到“网络”标签页，清空列表，然后把图片放进来。一行都不会冒出来。您也可以把网断掉：工具照常工作，连压缩包也照样打得出来。
给什么样的图片效果最好？
有 SVG 就给 SVG：那样每个图标都会按最终尺寸重画得清清楚楚。没有的话，给一张边长至少 512 像素的正方形 PNG，底色透明。别用细节特别多的图：缩到十六像素见方，精细的图形就是一团。好的网站图标几乎总是一个简单的形状加一个分明的对比。
为什么要九个文件，不能只要一个？
因为各家系统要的东西不一样。浏览器要一个标签页用的小图标，而且会不打招呼就到网站根目录去找 favicon.ico。iOS 要一个 180 像素的主屏幕图标，如果它是透明的，就把它压在黑底上。安卓要一个可裁切的图标，按当下的形状去裁。可安装应用的清单文件另外要两个。这些需求没有一个是任性，而压缩包里的备忘会告诉您每个该放到哪儿。
为什么压缩包里不带日期？
因为 zip 文件通常会记录每个文件的日期和时间，而那会是这个压缩包唯一携带的、关于您的信息。所以我们往里写一个固定的日期，就是这个格式允许的最早那个。这是个小细节，但它是个前后一致的小细节：一件什么都不收的工具，没有理由在还给您的文件里写下关于您的东西。它还有一个讨人喜欢的副作用：用同一张图做两次，两个压缩包字节对字节完全一样。
浏览器既然写不出 .ico，你们是怎么做出来的？
手工做的。我们先去验证而不是想当然：跟画布要 .ico 格式，它一声不吭地给回一个 PNG。所以这个文件是一个字节一个字节拼起来的，有一个图标目录头、每个尺寸一条描述项，后面接三张 PNG 图片。这是三十来行代码，省得为一个三十年前的格式内嵌一个库。
我的图不是正方形。会怎么样？
工具会提醒您，并把选择权交给您。整幅放入会保住您全部的图形、四周加上留白：对一个标志来说这几乎总是对的选择，因为什么都没被切掉。居中裁切会把整个方框填满，但会切进边上，这适合照片，很少适合标志。
图标会保留透明吗？
会，除了两个，而这不是我们的选择。iPhone 主屏幕图标如果是透明的，iOS 会把它压在黑底上；可裁切图标会被安卓按系统形状裁掉，透明背景下结果乱七八糟。所以这两个会垫上白底，而您可以把它关掉。其余的都保持透明。