如何在不注册的情况下从 PNG 制作 favicon 包？
我们的图标生成器从一个 PNG 写出的七个文件，每个文件的用途、它们在您的服务器上的位置以及为什么透明部分会变成实色。
favicon 不是一个文件。它是一组文件，因为浏览器标签、iOS 主屏幕和 Android 安装提示分别要求不同尺寸的图片。将一个 PNG 放入我们的 图标生成器，七个文件就会从另一端输出。以下是每个文件的用途、它在您的服务器上的位置以及哪些可以跳过。
整个过程在页面内部运行。这个应用程序没有 API 路由，也没有任何服务器操作，因此您的 logo 是通过 createImageBitmap 读取的，绘制到 OffscreenCanvas 中，并由您的浏览器编码为 PNG。无需账户，也没有承诺在一小时内删除您的作品。
这七个文件是什么，每个文件的作用是什么？
七个文件，一个源图像。下面的尺寸来自于使用 alpha.png 的实际运行，alpha.png 是一个 900x606 的透明 PNG，大小为 942.4 KB。您的字节计数会有所不同，因为它们取决于每个尺寸上保留的细节，但文件名和像素尺寸是由工具固定的。
| 文件 | 我们的运行中的尺寸 | 读取它的程序 |
|---|---|---|
| favicon.ico | 4.6 KB | 浏览器，从网站根目录自动获取。包含 16、32 和 48。 |
| favicon-16x16.png | 521 B | 标准密度屏幕上的标签条。 |
| favicon-32x32.png | 1.4 KB | 高密度显示器上的标签和书签。 |
| apple-touch-icon.png | 28.4 KB | 当有人将您的网站添加到主屏幕时，iOS 上的 Safari。180 像素。 |
| android-chrome-192x192.png | 31.9 KB | 在 site.webmanifest 中列为 192 图标。 |
| android-chrome-512x512.png | 196 KB | 在 site.webmanifest 中列出，用于安装提示和启动画面。 |
| site.webmanifest | 371 B | 浏览器读取 name、short_name、theme_color、background_color 和 display。 |
您不需要所有七个文件。如果您只关心桌面标签，favicon.ico 就足够了。Apple 文件在有人将您的网站保存到主屏幕时开始变得重要，而两个 Android PNG 只有在您实际发布清单时才有其位置。
这些文件放在哪里，头部需要什么？
所有七个文件都应放在网站根目录，因此它们的路径为 /favicon.ico、/apple-touch-icon.png 等。在 Next.js 中，这是公共文件夹。然后在您的头部添加四个标签：一个 180x180 的 apple-touch-icon 链接，两个 rel=icon 链接用于 32 和 16，以及一个指向清单的链接。该工具在结果旁边打印该代码片段，并提供复制按钮。
site.webmanifest 是 371 字节的 JSON，包含 name、short_name、两个 Android 图标、theme_color、background_color 和 display 设置为 standalone。内部的图标路径是绝对写的，如 /android-chrome-192x192.png，因此将包放在 /assets/icons/ 中会悄然破坏它们，您需要编辑两个 src 值。还有一个陷阱：在面板中将两个名称框留空，清单将以字面名称 "My App" 发货，这就是手机在您的图标下打印的内容。
为什么那段代码中没有 favicon.ico？
因为浏览器会在没有被告知的情况下请求它。无需标签。HTML 规范的 rel=icon 部分 描述了 /favicon.ico 的约定：当文档声明没有图标链接时，浏览器会自行尝试该根路径。这就是为什么 .ico 可以在没有任何标记的情况下工作，也是为什么该文件必须位于根目录。放在 /images/ 中的副本永远不会被请求。如果您确实需要它在其他地方，请添加一个指向您路径的显式图标链接，这样猜测就停止了。
favicon.ico 中实际上包含什么？
.ico 是一个容器。我们的文件包含三个 PNG，分别以 16、32 和 48 像素呈现，后面是一个 6 字节的头部和每个图像一个 16 字节的目录条目，总共 54 字节的结构包裹在图像数据周围。这就是为什么一个 4.6 KB 的文件可以覆盖三个尺寸：浏览器读取目录，然后提取与其绘制的内容匹配的条目。该目录的字节布局，以及为什么没有比 256 更大的内容适合其中 是其自身的一部分。Windows 从 Vista 开始就理解 .ico 中的 PNG 负载，当前浏览器无怨无悔地处理它们。
为什么我的透明 PNG 变成了实色背景？
因为每个图标画布在您的 logo 落到上面之前都会被填充。背景控制是一个 input type=color，它不携带 alpha 通道，因此填充始终是不透明的，默认值是 #ffffff。您源文件的任何透明度都被压平到该颜色上。这里没有透明选项。在您按下生成之前，选择与标记将要放置的表面相匹配的颜色。
形状也很重要。alpha.png 是 900x606，图标是正方形，因此艺术作品被适配到正方形中，长轴宽度为全宽，背景颜色填充其上方和下方的带。如果这些带让您烦恼，请先在 裁剪工具 中将图像裁剪为正方形，该工具可以处理一个最大 10 MB 的文件，并在其八个纵横比中提供 1:1 预设。图标面板中的边距滑块范围从 0 到 30%，并在四个边均匀内嵌艺术作品。
196 KB 对于图标文件来说太大了吗？
android-chrome-512x512.png 的 196 KB 在 521 字节的 16px 文件旁边看起来很可怕。有两件事可以减轻压力。该图标不会在普通页面视图中被获取，因为标签只需要小图标，而从画布编码器直接生成的 PNG 也没有经过优化：convertToBlob 写出一个有效的文件，而没有经过专用优化器的过滤和调色板工作。它是同一个浏览器编码器，负责我们 JPG 到 PDF 测量 中的文件大小。
您可以通过将 PNG 再次运行通过 压缩工具 来缩小它。在同一个 942.4 KB 的 alpha.png 上，无损模式（oxipng level 3）达到了 383.9 KB，下降了 59%，而没有改变任何像素。较小文件模式（imagequant）达到了 98.3 KB，下降了 90%，通过将图像减少到调色板。一个平面 logo 只有少量颜色，正是调色板不会让您看到任何损失的地方。如果您的图标是照片，请保持无损。
我需要注册吗，我的 logo 会被上传吗？
无需注册，也无需上传。该代码库中没有 API 路由和服务器操作，页面发出的唯一请求是对其自身资产的同源获取。在您生成时打开网络面板，观察它保持安静。我们的 隐私页面 用比这段文字更少的字数表达了这一点。
限制是一次一个文件和 10 MB，拖放区域接受 PNG、JPEG、WebP、AVIF、GIF 和 SVG。SVG 首先在其自身尺寸或 512 像素中较大的尺寸上进行光栅化，因此即使是 64px 的源文件仍然会生成干净的 512 图标。该渲染将文件加载到 <img> 元素中，这是 从 SVG 中丢弃外部字体和链接位图的相同受限路径。所有内容作为一个 favicon-package.zip 下载，包含所有七个文件。如果您的 logo 作为超大导出到达，请先 调整大小，以免将 20 兆像素的横幅输入到 16 像素的正方形中。
接下来做这个：打开 图标生成器，拖放您的 logo，设置背景颜色以匹配图标将要放置的位置，生成，解压到您的网站根目录，将四个标签粘贴到您的头部，并在 site.webmanifest 中添加 "start_url": "/"。然后强制重新加载网站，查看标签。如果 16px 版本显示为模糊，请返回并简化标记，然后再更改其他任何内容。如果 iOS 主屏幕是您的优先事项，Apple 的 配置 Web 应用程序 注释值得一读。