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支持的图片格式