用 ImageMagick 制作网站 favicon.ico

以往我制作 favicon.ico 都是随便搜索一个在线网站上传文件再转换，后来发现使用 imagemagick ^[1] 命令在本地转换 .png 文件大概是最老派也最简单的做法。

Shell

magick favicon.png -define icon:auto-resize=256,128,64,48,32,16 favicon.ico

macOS 可以通过 Homebrew ^[2] 安装这个命令。

Shell

brew install imagemagick

我有段时间偷懒，会直接在 <head> 中指定使用 .png 文件作为 icon。

HTML

<link rel="icon" type="image/png" href="/favicon.png">

不过浏览器通常也会默认请求网站根目录下的 favicon.ico，不提供一个的话还是会出现碍眼的 404。

.ico 文件也有 .png 不具备的优势，它其实类似 .icns ^[3]，允许同时包含多个尺寸的图像，上面的 magick 命令就自动打包了 256 x 256 到 16 x 16 这六种尺寸。

还可以通过 imagemagick 自带的 identify 命令查看它具体包含了哪些尺寸图像。

Shell

identify favicon.ico

当然这样做也不是没有缺点，那就是最后转换的 .ico 文件会异常的大。

一个简单的 .png 文件经过极致压缩后可以做到 1k 左右，打包成多尺寸 .ico 后就膨胀到了 100k，这点暂时就没有什么好的解决方法了。

footnotes

用 ImageMagick 制作网站 favicon.ico ​