标签页后台显示时改变标题和favicon

话不多说，先演示一下，效果如下

部分浏览器可能不支持动态favicon！
新建js文件，输入下列代码，可结合自身情况进行调整。
改变标题：

var OriginTitile = document.title;
var str;
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        document.title = '( ͡° ͜ʖ ͡°)╯♂快去捡回来 - ' + OriginTitile;  //后台显示时的标题
        clearTimeout(str);
    } else {
        document.title = '( ͡° ͜ʖ ͡°)乖乖站好 - ' + OriginTitile;  //前台显示时的标题
        str = setTimeout(function() {
            document.title = OriginTitile;
        }, 2000);
    }
});

改变favicon：

var changeIcon1 = function(){    
var link = document.head.querySelector("link");
link.href = "favicon1.gif";  //前台显示时的favicon，在网站根目录下
};
var changeIcon2 = function(){    
var link = document.head.querySelector("link");
link.href = "favicon2.gif";  //后台显示时的favicon，在网站根目录下
};
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        changeIcon2();
    } else {
        changeIcon1();
    }
});

在header标签内引入上述js文件，即可看到效果。

title部分代码来源于网络，出处已不可考，若有知道的烦请告诉我
站点加载完成后更换favicon的代码来源于@琼台博客