favicon.ico显示问题

最近做网站前端显示的时候，浏览器选项卡都会显示一个网站的小图标 也就是favicon.ico。不过显示的时候总是出问题，在网上搜了一下方法，希望对大家有帮助。

favicon.ico其实就是网站显示时候的那个tab卡片前面的小图标

小图标一般都是采用logo的形象，这样可以很直观的明确自己访问的站点，对推广还是很有必要的，同时也可以提升用户体验。

下面是我完成 favicon.ico 的过程

1.favicon.ico图标的制作

favicon.ico图标大小选取：浏览器默认的 favicon.ico 大小是16×16，不过为了显示的更加清楚通常采用32×32

如果手上没有ico格式的图片，也可以用一些在线favicon.ico制作工具。将准备好的jpg, png 或者 gif的图标“上传——制作——下载”即可。

2.将你做好的favicon图片文件上传至你网站的根目录下，即www目录下。且保证命名为favicon.ico。

(注意：文件一定要放在根目录下，文件名一定要是 favicon.ico )

3.在页面头部加入下面的代码

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

至此，基本上就做完了。现在只需清理一下浏览器缓存，再刷新一下页面就OK了。

补充说明：由于不同浏览器对对图标处理的方式不同，有时候会发现只用前步骤中的前两步就OK。但是为了保证每个浏览器，加上第三步会更好。

资料参考出处：

森动网：http://www.sendong.com/news229.html

博客园：http://www.cnblogs.com/LoveJenny/archive/2012/05/22/2512683.html

Favicon.ico在线制作工具：http://cn.faviconico.org/