在优化站点的过程中，发现不少的站点在浏览器栏的左边都有一个小的icon图标，尤其是一些较大的网站，百度，新浪，网易等都有自己的 icon 图标，给人的体验度很好，如下图:

现在不少的个人站也都有自己的 icon 图标，这个图标的大小是 16*16 图片大小的像素，所以我们只需要制作一个大小为 16*16 像素的 icon 的小图标进行引用即可，将这个图标放到指定的目录中，然后在 index.html 中进行引用，引用的代码如下:

<link rel="shortcut icon" href="https://www.xiariboke.net/images/favico
n.ico" type="image/x-icon" />

注意，一定要是 16*16 像素大小的 ico 图标，否则其它像素浏览器是不支持的，上面代码的路径一定要正确，整段代码放在 head 之间即可。

如果想要某个分类显示不同的 favicon 图标，只需要在不同的页面引用不同的 icon 图标代码即可以，比如如下代码:

<link rel="icon" href="/dir/favicon.ico" mce_href="/dir/favico
n.ico" type="image/x-icon"> 
 
<link rel="shortcut icon" href="/dir/favicon.ico" ce_href="/dir/fa
vicon.ico" type="image/x-icon">