我还需要favicon.ico吗，还是PNG就足够了？
ICO是一种目录格式，将16、32和48合并为一个4.6 KB的文件。里面有什么，为什么PNG不能替代它，以及要发送的七个文件。
每隔几年就会有人宣布favicon.ico已死。然后，一个RSS阅读器或旧的Windows快捷方式请求/favicon.ico，得到404并显示一个空白页面图标。发送ICO的成本是4.6 KB。这就是整个论点，也是我们图标生成器仍然写一个的原因。
输入alpha.png，一个900x606的透明图像，输出七个文件：favicon.ico为4.6 KB，favicon-16x16.png为521 B，favicon-32x32.png为1.4 KB，apple-touch-icon.png为28.4 KB，以及两个android-chrome PNG，分别为31.9 KB和196 KB，还有一个371 B的site.webmanifest。您自己的浏览器会写出这七个文件。我们是这样构建的，因为这个应用根本没有API路由，这是每个服务器端favicon网站无法自我声明的句子。
一个.ico文件里面实际上有什么？
ICO是一种目录格式。文件以六个字节开头：一个保留字设置为0，一个类型字设置为1表示图标，以及后面跟着的图像数量。之后是每个图像一个16字节的条目，包含宽度、高度、颜色计数、一个保留字节、颜色平面、每像素位数、图像数据的字节长度及其从文件开始的偏移量。然后是有效载荷，连接在一起。微软的归档图标文章从1995年记录了这两个结构，分别是ICONDIR和ICONDIRENTRY，它们没有变化。
宽度和高度各占一个字节，这就是为什么256x256必须存储为0，以及为什么目录中根本无法容纳大于256的内容。我们的编码器为每个条目写入1个颜色平面和每像素32位，每个有效载荷都是一个普通的PNG。1995年的规范描述了一个DIB，后面跟着一个1位的AND掩码用于透明，这就是为什么古老的图标有那些硬的锯齿边缘。三个图像意味着6个字节的头部加上48个字节的目录。这是54个字节的记录，而4.6 KB中的其他内容都是PNG数据。
为什么一个favicon.ico包含16、32和48？
这些是我们打包的三种尺寸，它们并不是任意的。同一份微软文档告诉开发者在每个图标资源中包含16x16、32x32和48x48，然后详细说明选择规则：与请求尺寸最接近的图像获胜。标签条请求16。在2x显示中，同样的16 CSS像素位置需要32个真实像素，而Windows桌面快捷方式请求48。如果您的ICO仅包含16，快捷方式将得到一个被拉伸到48的16 px图像，看起来就是那样。
如果浏览器可以读取PNG，为什么还要发送ICO？
因为这两者以不同的方式被发现。我们的工具提供的四行代码片段以显式类型和尺寸提示命名PNG文件，任何解析`<head>`的客户端都会接受这些。MDN的`<link>`参考显示了相同的结构，几个图标链接的属性让浏览器选择。HTML标准也允许用户代理在没有声明图标链接时通过路径查找/favicon.ico，并且许多获取您URL的东西从未读取您的标记。SVG图标在这里很有吸引力，caniuse显示它们在全球的支持率为90.49%，而Safari仅在26.0版本中支持它们。这留下了一个真实的尾巴。
这七个文件是什么，它们的大小是多少？
| 文件 | 像素 | 大小 | 读取它的内容 |
|---|---|---|---|
| favicon.ico | 16、32和48打包 | 4.6 KB | 备用的/favicon.ico路径，Windows快捷方式 |
| favicon-16x16.png | 16x16 | 521 B | 1x的标签条，通过链接标签 |
| favicon-32x32.png | 32x32 | 1.4 KB | 2x的标签条，通过链接标签 |
| apple-touch-icon.png | 180x180 | 28.4 KB | iOS主屏幕，通过链接标签 |
| android-chrome-192x192.png | 192x192 | 31.9 KB | 清单图标数组 |
| android-chrome-512x512.png | 512x512 | 196 KB | 清单图标数组 |
| site.webmanifest | n/a | 371 B | 安装提示 |
512占主导地位。将ICO、两个小PNG、apple-touch-icon和192一起加起来，您总共不到67 KB，而那一个文件是196 KB。值得知道的是，哪些在页面视图中实际上会花费您任何费用，因为只有ICO和两个小PNG在这里起作用。
为什么我的透明logo坐在一个白色方块上？
因为生成器在绘制您的艺术作品之前会先填充画布，默认填充为#ffffff。该控制是一个颜色输入，因此底下总是有某种颜色。将其设置为您的品牌十六进制颜色，整个集合就与您的网站匹配。alpha.png带有alpha通道，而七个图像都以不透明形式输出，这让期望透明favicon的人感到惊讶。
边距滑块范围从0到30百分比，并按每个图标边缘的该比例内缩您的艺术作品，因此在10百分比时，32 px图标在每一侧保持3 px的边框。在这个比例下这是一个可见的量。非正方形源会被加黑：一个900x606的logo保持其纵横比，并在上下方添加背景条。如果这让您感到困扰，请先将其裁剪为正方形。裁剪工具有一个1:1的预设，每次接受一个文件，最大10 MB，并以硬编码质量92重新编码有损格式。如果您宁愿调整大小而不是裁剪，调整大小工具有25、50和75的百分比预设，带有覆盖、包含和拉伸适配模式。
我如何将ICO转换回PNG？
使用ICO转PNG。它解析容器，遍历目录条目并保留最大宽度的那个，然后将其写为PNG。指向上面的4.6 KB文件，您将得到一个48x48的图像，因为48是打包在里面的最大内容。它无法恢复文件中从未存在的细节。如果您需要更大的内容，放大器在您的浏览器中运行Real-ESRGAN，并始终输出PNG；我们的小测试small.png在400x269的情况下，2x设置下返回为800x538。重建或简单插值是否是正确的工具取决于图标的用途。值得知道的是：该模型仅在内部生成4x，因此2x是之后应用的下采样。我们的转换器覆盖了11种格式中的24对，并且不为其中任何一种写入ICO。图标来自图标生成器。
196 KB的图标太大了吗？
那是android-chrome-512x512.png，它是集合中最重的东西。它在有人将您的网站安装为应用时被获取，这正是W3C Web应用清单规范所管理的，因此它并不处于普通页面加载的关键路径上。您仍然可以缩小它。我们的压缩器提供两种PNG模式，表现截然不同：“PNG无压缩”以级别3运行oxipng并保持无损，而“PNG更小文件大小”则量化为256色调色板，使用imagequant。在alpha.png上，源为942.4 KB，无损通过给出383.9 KB，而调色板通过给出98.3 KB。一个平面logo通常可以在256种颜色下生存而不会被人注意。压缩还会剥离每一块元数据，包括EXIF和ICC，对于图标来说，这正是您想要的。
这是具体的下一步。打开图标生成器，放入您拥有的最大正方形源（它接受JPEG、PNG、WebP、AVIF、GIF和SVG，最大10 MB，一个文件），将背景颜色设置为您的品牌十六进制，边距保持为0并生成。将四个链接标签复制到`<head>`中，将favicon.ico上传到您的网站根目录，您就完成了。如果您想确认没有任何东西离开您的机器，请在运行时查看网络标签，或阅读我们的隐私页面。七个文件在您的服务器上的位置已单独详细说明。