favicon.ico是网站的logo，会显示在浏览器标签栏上。虽然它会缓存，但为了访问者第一次打开网站更快，所以写这篇博客来说如何明优化它。
一、了解自己的favicon.ico
首先安装imagemagick工具：
1
liuxu:~$ sudo apt-get install imagemagick
然后开始看看我的favicon.ico，它是我自己画的一个图片，生成ico文件后，有16KB大小：
1
2
liuxu:icon$ ls -lh favicon.ico
-rw-r--r-- 1 liuxu liuxu 16K 11月 3 18:13 favicon.ico
实际上它内部有3个文件，像素分别是16x16,32x32,48x48：
1
2
3
4
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：
1
2
3
4
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文件进行了压缩，所以下载的大小很小：
Google的favicon.ico文件内部有2个文件，大小是5.4KB，像素分别是16x16和32x32：
1
2
3
4
5
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文件进行了压缩，所以下载的大小也很小：
三、优化自己的favicon.ico
参考了百度和Google的favicon.ico后，可以确定2件事：
nginx应该对ico文件压缩。favicon.ico并不一定需要全部3个文件。
既然有了目标，现在就开始优化。
技巧一、拆开ico再合并ico可以减少文件大小
首先，把favicon.ico文件中的3个文件拆出来：
1
2
3
4
5
6
7
8
9
10
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
然后再合并起来：
1
2
3
4
5
6
7
8
9
10
11
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为参考，只用16x16和32x32的图片：
1
2
3
4
5
6
7
8
9
10
11
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图片压缩
nginx在gzip选项下配置image/x-icon参数可以压缩ico图片：
1
2
3
4
5
...
gzip_types
...
image/x-icon;
...
验证优化后的效果
现在把优化后的favicon.ico替换掉服务器上原来的文件，再到浏览器看看，发现已经从15.4KB降到了1.3KB了。
好了，现在访问者第一次访问我的博客时，将少下载14.1KB资源了。
