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

我不是女神ヾ 2022-06-03 22:39 230阅读 0赞

作者：朱金灿

来源：[http://blog.csdn.net/clever101][http_blog.csdn.net_clever101]

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

![Center][]

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

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

<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>
    
    <link href="images/png_favicon.png" type="image/png" rel="icon"/>

参考文献：

1.      [弄懂Favicon][Favicon]

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

3.      [favicon支持的图片格式][favicon]

[http_blog.csdn.net_clever101]: http://blog.csdn.net/clever101
[Center]: /images/20220604/7a0d7ad7796c4ad793e68ce4eccd81c4.png
[Favicon]: https://www.w3cplus.com/css/understand-the-favicon.html
[favicon.ico]: https://jingyan.baidu.com/article/fdbd4277190eb4b89e3f4801.html
[favicon]: https://www.cnblogs.com/shinnyChen/p/3722529.html