最近遇到一个需求：网页加载完后动态更换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, 有效
IE, 无效
Chrome, 有效
Opera, 有效
Safari, 无效
整体上看，还是不错，大部分都支持，但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已经更改，但就是无效
在想了一阵以后，想到一个方法删掉默认声明，改为动态创建
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仍旧不工作
