Hot For Coding

网页加载完后动态更换favicon.ico图标

最近遇到一个需求:网页加载完后动态更换favicon.ico,因为这个favicon.ico是用户动态通过页面上传的并且网页还不能刷新,这不是一个容易实现的需求,因为浏览器的兼容性。根据我当时的初步判断,这个需求应该没有什么难度,只要获取新的地址之后把link的href地址给替换就好!

事实证明并非那么简单就能搞定,后来经过我实践发现这里有浏览器兼容的问题,先给大家看一段示例代码:

favicon.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="favicon1.ico" />
  </head>
  <body>
    <p>默认指定favicon1.ico,然后中途使用js更换为favicon2.ico</p>

    <script type="text/javascript">
          
      var changeIcon = function () {    
        var link = document.head.querySelector("link");
        link.href = "favicon2.ico";
      };
    
      changeIcon();
    </script>
  </body>
</html>

文件如下:

# ls
favicon.html favicon1.ico favicon2.ico

以下所有的例子都是以favicon1.ico,然后替换为favicon2.ico我站点的图标。

这段示例代码非常简单,页面head头部定义了默认的favicon图标,然后JavaScript会改写它的href值,达到替换favicon的功能。先来看每个浏览器的情况

FF, 有效

full

IE, 无效

full

Chrome, 有效

full

Opera, 有效

full

Safari, 无效

full

整体上看,还是不错,大部分都支持,但IE是一块心病啊,于是我再把代码修改一下,来个setTimeout 1秒后在换图标的动作,因为这样更接近于实际的情况,代码加载完后从Ajax请求数据到数据返回然后经过一些处理,我就姑且把这个过程看成是1秒钟吧!

把实例代码中的changeIcon()替换成setTimeout(changeIcon, 1000)

结果如下:

  • FF 无效,没加延迟之前是有效的
  • IE 无效
  • Chrome 有效
  • Opera 有效
  • Safari 无效

情况不是很乐观,只有Chrome与Opear有效!

难道是JavaScript没执行,所以它没生效,在无效FireFox中使用FireBug我们看到实际图标已经由默认的favicon1.ico更新到favicon2.ico了,但实际上还是显示旧的,IE使用开发人员工具查看,同样link标签href已经更改,但就是无效

full

在想了一阵以后,想到一个方法删掉默认声明,改为动态创建

favicon.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <!-- 默认我不加载它
    <link rel="shortcut icon" href="favicon1.ico" />
    -->
        
  </head>
  <body>
    <p>默认指定favicon1.ico,1秒后使用js更换为favicon2.ico</p>

    <script type="text/javascript">
          
      var changeIcon = function(){    
        var link = document.createElement("link");
        link.href = "favicon2.ico";
        link.rel = "shortcut icon";
        document.head.appendChild(link);
      };

      setTimeout(changeIcon, 1000);

    </script>
  </body>
</html>

结果

  • FF 有效
  • IE 无效
  • Chrome 有效
  • Opera 有效
  • Safari 无效

结果也不尽任意,IE仍旧不工作

分享

TITLE: 网页加载完后动态更换favicon.ico图标

LINK: https://www.qttc.net/370-change-favicon.html

NOTE: 原创内容,转载请注明出自琼台博客