favicon在IE和非IE浏览器上的兼容问题及其解决

作者：朱金灿

来源：http://blog.csdn.net/clever101

 

       favicon是favorite icon的缩写，通常会显示在浏览器收藏夹（即书签）中以及地址栏左侧。中文有译作网站头像或书签图标，此处译作网站图标。在html或jsp页面没有专门指定的话会显示默认的tomcat图标，如下图：

       最近在设置favicon发现一个问题：IE10不能识别png格式的favicon，只好将区分IE浏览器和非IE浏览器分别进行处理了。网上区分IE浏览器和非IE浏览器采用条件注释，代码如下：

<!--[if !IE]><link href="images/png_favicon.png" type="image/png" rel="icon" /><![endif]--><!--[if IE]><link rel="shortcut icon" href="images/png_favicon.ico" /><![endif]-->

      发现没有效果，只好使用js脚本了，代码如下：

<!-- I "support" IE --><script>navigator.appName == "Microsoft Internet Explorer" && (function (i, d, s, l) {   i.src = "images/png_favicon.ico";   s = d.getElementsByTagName("script")[0];   l = s.parentNode.insertBefore(d.createElement("link"), s);   l.rel = "shortcut icon";   l.href = i.src;})(new Image, document);</script><!-- Everybody else --><link href="images/png_favicon.png" type="image/png" rel="icon"/>

参考文献：

 

1.      弄懂Favicon

2.      如何给你的网站加上favicon.ico图标

3.      favicon支持的图片格式