Skip to main content
  1. Blog/

如何快速制作多尺寸Favicon

··433 字
有悟方法

在有悟文章 《如何设定网站的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 将 svg 文件生成的多尺寸图标png
使用 imagemagick 将 svg 文件生成的多尺寸图标png

使用 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其中之一的压缩命令放到批量图片生成的最后,这样图片生成后顺便处理。