- /
- Blog/
- 如何快速制作多尺寸Favicon/
如何快速制作多尺寸Favicon
目录
在有悟文章 《如何设定网站的Favicon》中提到，网站建设时，需要为网站应用多尺寸图标，以便在各平台、浏览器上更好地标识网站，添加网站识别度。
有悟只有幼儿园小班的平面设计水平，本文同样不会讨论『什么样的图标才是精美的』这类问题。而是假设你已经有了一份精美设计的图标，但此时需要为网站生成多个尺寸文件，又不想买商业软件来制作网站图标，仅是在拿到设计师的设计稿时可以快速生成，那本文一定非常适合你。
如何快速制作多尺寸图标文件 #
假设你手上已经有一个 svg 格式图标文件，或者大尺寸的 png 格式图标文件。
你可以使用桌面图片编辑器对图片逐一调整大小并分别保存，也可以使用商业图标制作软件生成多尺寸图标文件集。 当然也有命令行工具可以生成。(不要害怕使用命令，你只要修改其中的参数、输入的文件名即可。)
需要用到 inkscape 、 imagemagick （imagemagick 必装），这两个工具均可以通过命令行安装，macos 上使用 brew 安装，winodw 上使用 scoop 安装。
下面内容将涉及的方法：
- 使用 inkscape 将 svg 转换成 png
- 使用 imagemagick 将 svg 转换成 png
- 使用 imagemagick 将大尺寸 png 图片缩小
- 使用 imagemagick 将多个 png 文件生成 ico 图标
使用 inkscape 将 svg 格式转换为 png #
~/Projects/youwu.today git:(develop)
➜ inkscape logo.svg -w 1024 -o logo-1024.png
Background RRGGBBAA: ffffff00
Area 0:0:24:24 exported to 1024 x 1024 pixels (4096 dpi)
参数说明：
-w 表示转换的图片宽度，-o 是指定图片保存位置，路径结尾的 .png 表示输出的图片格式。如果路径上包含目录，需要事先创建。
使用 imagemagick 将 svg 转为 png #
~/Projects/youwu.today git:(develop)
➜ magick convert -density 4000 -background none logo.svg -resize 1024 logo-10242.png
imagemagick 命令比较复杂一些，需要声明 -background none 来开启透明背景，-density 来设置密度，不然图片发虚。而且这个参数与 -resize 的大小有关，输出结果文件名称的后续表示要生成的 图片格式
因为图标通常是宽高相等，所以使用了 -resize 1024，如果宽高不相等，使用类似于 1024x768 这种格式来设置 size。
使用 inkscape 将 svg文件批量转换成多尺寸图标 #
将 svg 文件转换成多个尺寸的 png 图片文件
按照有悟文章《 如何设定网站的Favicon 》中『合并以上所提到的图标尺寸』一节所列的图标大小，我们使用 inkscape 来生成所有尺寸的文件。
mkdir inkscape
inkscape logo.svg -w 16 -o ./inkscape/favicon-16.png
inkscape logo.svg -w 32 -o ./inkscape/favicon-32.png
inkscape logo.svg -w 48 -o ./inkscape/icon-48.png
inkscape logo.svg -w 96 -o ./inkscape/icon-96.png
inkscape logo.svg -w 144 -o ./inkscape/icon-144.png
inkscape logo.svg -w 192 -o ./inkscape/icon-192.png
inkscape logo.svg -w 256 -o ./inkscape/icon-256.png
inkscape logo.svg -w 384 -o ./inkscape/icon-384.png
inkscape logo.svg -w 512 -o ./inkscape/icon-512.png
inkscape logo.svg -w 120 -o ./inkscape/apple-touch-icon-120.png
inkscape logo.svg -w 152 -o ./inkscape/apple-touch-icon-152.png
inkscape logo.svg -w 167 -o ./inkscape/apple-touch-icon-167.png
inkscape logo.svg -w 180 -o ./inkscape/apple-touch-icon-180.png
只需几秒，上述命令就可以执行完毕。
使用 imagemagick 生成 favicon.ico 文件。
magick ./inkscape/favicon-32.png ./inkscape/favicon-16.png ./inkscape/favicon.ico
提示：可以将上面命令保存到脚本中。
使用 imagemagick 生成多尺寸图标 #
上面已经介绍如何使用 imagemagick 来将 svg 转换成 png。但比较麻烦的是 -density 参数，需要针对不同 resize 调试不同的 density 值。为了方便，先使用 imagemagick 将 svg 转换成一张大尺寸 图1024x1024 的 png 片，然后再用 imagemagick 将该 png 批量生成多个缩小版。
当然你也可以使用 imagemagick 将 svg 转换成各种大小的 png，只是你需要针对不同大小的 png 设置对应的 density 比较麻烦。
假设按照上面所述的方法，将 svg 转换成一张 1024x1024 png 图版作为原文件，那么可以用 imagemagick 下面的命令来缩小图片文件。
命令格式为： magick convert 原文件.png -resize 宽x高 输出文件名.图片格式
mkdir magic
magick logo.png -resize 16 ./magic/favicon-16.png
magick logo.png -resize 32 ./magic/favicon-32.png
magick logo.png -resize 48 ./magic/icon-48.png
magick logo.png -resize 96 ./magic/icon-96.png
magick logo.png -resize 144 ./magic/icon-144.png
magick logo.png -resize 192 ./magic/icon-192.png
magick logo.png -resize 256 ./magic/icon-256.png
magick logo.png -resize 384 ./magic/icon-384.png
magick logo.png -resize 512 ./magic/icon-512.png
magick logo.png -resize 120 ./magic/apple-touch-icon-120.png
magick logo.png -resize 152 ./magic/apple-touch-icon-152.png
magick logo.png -resize 167 ./magic/apple-touch-icon-167.png
magick logo.png -resize 180 ./magic/apple-touch-icon-180.png
magick ./magic/favicon-32.png ./magic/favicon-16.png ./magic/favicon.ico
同样在几秒内，上述命令就可以执行结束，不过要注意的， magick 命令不会打印成功提示信息，所以你要观察一下目录下 favicon.ico 这个文件是否已经生成，因为它排在最后，观察它即可。
到此你会发现，无须用到 inkscape。转换svg 为 png、批量生成 png 、生成 ico 图标等全都可以由 imagemagick 来完成。
建议：
将上面的命令保存到脚本中，在你不断接到设计师的修改版文件时，这些固定的命令可以帮助你节省非常多的时间。
对于生成的图标文件，需要检查下，看 inkscape 或 imagemagick 生成的图片文件有没有问题，如果有部分图片有异样，你需要通过其他工具或者方法生成（相同的原图片、相同的参数，多次运行得到的结果总是一样的。）
图片优化 #
网页图片优化，favicon 自然也不例外，可以使用支持 png 无损压缩工具来处理一下。
同样，本节还是要介绍命令行方式的工具。
macos 上有 imageOptim 这个开源工具集成了开源的压缩算法，windows上没有。但是有一些命令行的工具，这些工具 macos、windows 上都可以运行。
windwo上用户使用 scoop 安装 , macos 的使用 brew 安装。
这两个工具使用非常简单，我们不是追求最小体积的图片，只是让图片尽量小。使用这两个工具，图片大概平均可以减少 5%~10% 的体积。
> optipng ./要压缩的图片目录/*
> # 或者
> cd 要被压缩的图片目录
> optipng *.png
或者
> oxipng ./要压缩的图片目录/*
> # 或者
> cd 要被压缩的图片目录
> oxipng *.png
注意，不用带参数，工具很快会执行完，图片会被直接覆盖，图片会被直接覆盖，图片会被直接覆盖（这两个工具都支持参数，用来提高压缩率的，对于 favicon 来说，默认无参数就好了。）。把optipng 或者 oxipng其中之一的压缩命令放到批量图片生成的最后，这样图片生成后顺便处理。