favicon.ico——为你的站点添加一个小图标

favicon是Favorites Icon的缩写，主要用于显示在浏览器地址栏左侧以提升网站品牌度。对于大多数主流浏览器，favicon不仅在地址栏中显示，还会同时出现在收藏夹中，用户可以通过拖曳favicon到桌面以建立网站的快捷方式。除此之外，标签式浏览器甚至还有不少扩展的功能，如FireFox甚至支持动画格式的favicon。

部署 favicon.ico

一般情况下要部署网站的favicon图标，我们只需要在网站的 head 标签中添加如下两句代码引入即可：

<link rel="shortcut icon" href="/favicon.ico" />
<link rel="bookmark" href="/favicon.ico" type="image/x-icon"　/>

代码中图标文件放在了网站的根目录下，当然你也可以将其放在任意一个你可以引用的文件夹下，只需要将代码中 href 的值设置成对应的文件链接即可。我们应该知道，浏览器调用 favicon 的原理是首先在网页所在目录寻找favicon.ico文件，如果没有找到就去网站的根目录寻找。所以最简单的方法就是将制作好的 favicon.ico 上传到网站的根目录下，这样不但不用再添加代码，而且方便其他博客与我们建立友情链接时图标显示的需要；而使用代码的好处就是我们可以方便地自定义不同页面的 ico 图标。另外如果你想要网站支持动态的图标，可以在 head 中添加如下代码：

<link rel="icon" href="/favicon.gif" type="image/gif" />

不过个人并不建议如此，对于目前几乎所有的浏览器而言 ico 格式的图标都有所支持，而对于 gif 、png 之类的图标格式大部分浏览器并不能很好的支持。

使用及显示效果

部署完成后，刷新网页既可以看到 favicon.ico 在网站上的显示效果，对于部分浏览器缓存或者启用了CDN的网站，我们可能需要清除浏览器缓存及CDN缓存内容后才能看到具体效果。

如果你想在自己计算机桌面或者任务栏建立自己某一个网站的快捷方式，通过在浏览器任务栏上右键既可以看到一个“创建快捷方式”的选项，点击此选项既可以创建网站的快捷方式（我所使用的浏览器是360浏览器，其他浏览器创建快捷方式的方法可能不一样，但是对于目前的主流浏览器应该都是支持该功能的，具体创建方式搭建可以自行尝试一下）。创建完成后既可以在电脑桌面及任务栏看到显示效果，具体显示效果如下：