刘泉皓

没有最强的法术,只有最强的法师。

高度优化favicon图标

03 Nov 2018 » memory

favicon.ico是网站的logo,会显示在浏览器标签栏上。虽然它会缓存,但为了访问者第一次打开网站更快,所以写这篇博客来说如何明优化它。

一、了解自己的favicon.ico

首先安装imagemagick工具:

liuxu:~$ sudo apt-get install imagemagick

然后开始看看我的favicon.ico,它是我自己画的一个图片,生成ico文件后,有16KB大小:

liuxu:icon$ ls -lh favicon.ico
-rw-r--r-- 1 liuxu liuxu 16K 11月  3 18:13 favicon.ico

img1

实际上它内部有3个文件,像素分别是16x16,32x32,48x48

liuxu:icon$ identify favicon.ico
favicon.ico[0] ICO 16x16 16x16+0+0 32-bit sRGB 15.4KB 0.000u 0:00.000
favicon.ico[1] ICO 32x32 32x32+0+0 32-bit sRGB 15.4KB 0.000u 0:00.000
favicon.ico[2] ICO 48x48 48x48+0+0 32-bit sRGB 15.4KB 0.000u 0:00.000

二、分析百度和Google的favicon.ico

百度的favicon.ico文件内部只有1个单独的文件,大小是17KB,像素是64x64

liuxu:icon$ ls -lh baidu.ico
-rw-rw-r-- 1 liuxu liuxu 17K 11月  3 18:00 baidu.ico
liuxu:icon$ identify baidu.ico
baidu.ico ICO 64x64 64x64+0+0 32-bit sRGB 17KB 0.000u 0:00.000

由于百度服务器对ico文件进行了压缩,所以下载的大小很小:

img2

Google的favicon.ico文件内部有2个文件,大小是5.4KB,像素分别是16x1632x32

liuxu:icon$ ls -lh google.ico
-rw-rw-r-- 1 liuxu liuxu 5.4K 11月  3 17:54 google.ico
liuxu:icon$ identify google.ico
google.ico[0] ICO 16x16 16x16+0+0 32-bit sRGB 5.43KB 0.000u 0:00.000
google.ico[1] ICO 32x32 32x32+0+0 32-bit sRGB 5.43KB 0.000u 0:00.000

由于Google服务器也对ico文件进行了压缩,所以下载的大小也很小:

img3

三、优化自己的favicon.ico

参考了百度和Google的favicon.ico后,可以确定2件事:

  1. nginx应该对ico文件压缩。

  2. favicon.ico并不一定需要全部3个文件。

既然有了目标,现在就开始优化。

技巧一、拆开ico再合并ico可以减少文件大小

首先,把favicon.ico文件中的3个文件拆出来:

liuxu:icon$ convert favicon.ico favicon.png
liuxu:icon$ ls -lh favicon*
-rw-r--r-- 1 liuxu liuxu  554 11月  3 18:35 favicon-0.png
-rw-r--r-- 1 liuxu liuxu  974 11月  3 18:35 favicon-1.png
-rw-r--r-- 1 liuxu liuxu 1.5K 11月  3 18:35 favicon-2.png
-rw-r--r-- 1 liuxu liuxu  16K 11月  3 18:13 favicon.ico
liuxu:icon$ identify *.png
favicon-0.png PNG 16x16 16x16+0+0 8-bit sRGB 57c 554B 0.000u 0:00.000
favicon-1.png PNG 32x32 32x32+0+0 8-bit sRGB 142c 974B 0.000u 0:00.000
favicon-2.png PNG 48x48 48x48+0+0 8-bit sRGB 228c 1.52KB 0.000u 0:00.000

然后再合并起来:

liuxu:icon$ convert favicon-0.png favicon-1.png favicon-2.png favicon_optional1.ico
liuxu:icon$ ls -lh favicon*
-rw-r--r-- 1 liuxu liuxu  554 11月  3 18:35 favicon-0.png
-rw-r--r-- 1 liuxu liuxu  974 11月  3 18:35 favicon-1.png
-rw-r--r-- 1 liuxu liuxu 1.5K 11月  3 18:35 favicon-2.png
-rw-r--r-- 1 liuxu liuxu  16K 11月  3 18:13 favicon.ico
-rw-r--r-- 1 liuxu liuxu 7.3K 11月  3 18:38 favicon_optional1.ico
liuxu:icon$ identify favicon_optional1.ico
favicon_optional1.ico[0] ICO 16x16 16x16+0+0 8-bit sRGB 7.41KB 0.000u 0:00.000
favicon_optional1.ico[1] ICO 32x32 32x32+0+0 8-bit sRGB 7.41KB 0.000u 0:00.000
favicon_optional1.ico[2] ICO 48x48 48x48+0+0 8-bit sRGB 7.41KB 0.000u 0:00.000

可以看见,只是简简单单的拆开再合并,大小已经缩小了近50%,就是这么神奇。

技巧二、省去48x48大小的图片

我这里是以Google为参考,只用16x1632x32的图片:

liuxu:icon$ convert favicon-0.png favicon-1.png favicon_optional2.ico
liuxu:icon$ ls -lh favicon*
-rw-r--r-- 1 liuxu liuxu  554 11月  3 18:35 favicon-0.png
-rw-r--r-- 1 liuxu liuxu  974 11月  3 18:35 favicon-1.png
-rw-r--r-- 1 liuxu liuxu 1.5K 11月  3 18:35 favicon-2.png
-rw-r--r-- 1 liuxu liuxu  16K 11月  3 18:13 favicon.ico
-rw-r--r-- 1 liuxu liuxu 7.3K 11月  3 18:38 favicon_optional1.ico
-rw-r--r-- 1 liuxu liuxu 3.6K 11月  3 18:43 favicon_optional2.ico
liuxu:icon$ identify favicon_optional2.ico
favicon_optional2.ico[0] ICO 16x16 16x16+0+0 8-bit sRGB 3.64KB 0.000u 0:00.000
favicon_optional2.ico[1] ICO 32x32 32x32+0+0 8-bit sRGB 3.64KB 0.000u 0:00.000

现在只有3.64KB大小了。

技巧三、nginx开启ico图片压缩

nginxgzip选项下配置image/x-icon参数可以压缩ico图片:

    ...
    gzip_types
        ...
        image/x-icon;
    ...

验证优化后的效果

现在把优化后的favicon.ico替换掉服务器上原来的文件,再到浏览器看看,发现已经从15.4KB降到了1.3KB了。

img4

好了,现在访问者第一次访问我的博客时,将少下载14.1KB资源了。


知识共享许可协议    鄂ICP备 15002452号-5    鄂公网安备 42088102000048号