Favicon 生成器 - 创建 favicon.ico 和 PWA 图标

此 Favicon 生成器会生成什么

很久以前，favicon 就不再是单个文件了。浏览器标签页需要 16 像素，视网膜屏标签页需要 32 像素，Windows 桌面快捷方式需要 48 像素，iPhone 主屏幕需要 180 像素的 PNG，可安装的 Web 应用则需要清单中声明的 192 和 512 像素的图标。此工具取一张源图，一次性输出所有文件：favicon.ico、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png、android-chrome-192x192.png、android-chrome-512x512.png 以及 site.webmanifest，连同那四行负责关联它们的 HTML，打包成一个 ZIP。其中的 .ico 文件是手动构建，而非转交转换器处理。ICO 是一种容器格式，而非编解码器：一个 6 字节的目录头记录了内含多少张图片，随后每张图片有一个 16 字节的条目记录其宽度、高度、字节长度和绝对偏移量，最后跟随图片载荷。目前所有浏览器都接受在载荷中使用 PNG 数据，因此本生成器写入的是 PNG，而非那种行序自下而上、带有独立 1 比特透明掩码的旧式 BMP/DIB 编码。ICO 内放置了三张图片——16、32 和 48 像素——以便 Windows 和旧版浏览器直接使用所需尺寸，而不必糟糕地缩放单张图片。如果你以后会查看文件的二进制内容，该格式有个特性值得一提：宽度和高度各占 1 个字节，因此 256 的数值被记为 0，且根本无法表达更大的尺寸。缩放质量同样得到了重视。通过一次 drawImage 直接将 1024 像素的徽标缩小到 16 像素，等于让浏览器的双线性滤镜用 2x2 采样点来概括 64x64 区域，丢弃了几乎所有原始像素，生成那种杂乱斑驳、为手搓 favicon 所知的标志性效果。本工具会反复对图像进行对半缩减，单步缩小比例从不超过一半，因此每次处理都能平均整个邻域，将精细细节一路保留至 16 像素。圆角半径和内边距也作为渲染的一部分同步应用，确保在所有尺寸下圆润边缘都具有抗锯齿效果。