二月 | 2013 | ZC Garden

目前绝大多数网站都配有一个网站图标(Favicon)，就是页面标题前面的小图标，一般命名为favicon.ico,存放在网站的根目录下面。通常我们配置网站图标的代码如下：

<link type="image/x-icon" rel="shortcut icon" href="favicon.ico">

1	<link type="image/x-icon" rel="shortcut icon" href="favicon.ico">

经过测试发现IE仅支持ico格式的小图标，其他主流浏览器支持jpeg，gif，png格式，火狐下支持gif动画。
最近看到一个开源项目Piecon，能够动态生成饼图网页图标来表示网页加载进度，同时可以显示加载百分比，大家可以在Github上搜索源代码。
研究一番后，搞清楚了Piecon的基本原理：利用HTML5的Canvas保存为data:image扩展功能，将生成URL形式的图片设置到favicon的URL上进行替换。
Canvas提供了toDataURL的接口，可以方便的将canvas画布转化成base64编码的image。
我们来看一下使用Piecon生成的Base64编码的URL字符串，代码如下：(把href中的代码粘贴到浏览器地址栏回车即可看到图片)

<link type="image/x-icon" rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABSklEQVQ4ja2TsU4CQRRFpxAKE39DDeIX+A3+hX9hYUMiiYmCoImxstPKTlEyG2LDzpaCFjYGhg6jia66yM4eCxmElVUKX3K7uefNy7tPiFgBWWAHaALdgRrANpCJvx81poEyEJJcIVAEUpPMlwDGGLTWKKWo1Wr05/L4mRJPeUnUG7IrQHoUcAAQBAGu61KtVodC5IbyF4r07h8sZM+al78aG+r1+pg5DkDkeJ0vYt4+7DgZAZQAWq3WD/MkACLH40bF/qIggFsApdTUAD9btoCGAF4AHMeZGhDOblrA85+Aq5MzvN1TrtePuVs7Qq8e0l3ZHwP8OsIkeZ5nAU0xSBjtdntqgNbaArYEsASESWuMy3VdjDEAfWDRZqGQFKS4OQiC7+4jSUwBF/EoSymRUqKUotPpEEWRNZ8DM/93TAnnfAO8D9Qk4Zw/AXQI9PdbyGoqAAAAAElFTkSuQmCC">

Piecon显示的加载进度效果并不是网页内容加载的真实进度，只是用setInterval函数模拟的效果。对此我用5张ico格式的图片来模拟进度，让IE也能实现动态改变图标。代码如下:

(function(){
	var Favicon = {};
	var originalFavicon = "favicon.ico";
	
	var removeFaviconTag = function(){
		var links = document.getElementsByTagName('link');
		var head = document.getElementsByTagName('head')[0];
		for(var i=0, len=links.length; i < len; i++) {
			var exists = (typeof(links[i]) !== 'undefined');
			if (exists && (links[i].getAttribute('rel') || '').match(/\bicon\b/)) {
				head.removeChild(links[i]);
			}
		}
	};
	var setFaviconTag = function(url){
		removeFaviconTag();
		var link = document.createElement('link');
		link.type = 'image/x-icon';
		link.rel = 'shortcut icon';
		link.href = url;
		document.getElementsByTagName('head')[0].appendChild(link);
	};
	Favicon.drawFavicon = function(i){
		setFaviconTag("w" + i + ".ico?r=" + Math.random());
	};
	Favicon.reset = function(){
		setFaviconTag(originalFavicon);
	};
	window.Favicon = Favicon;
})();

(function(){

var Favicon = {};

var originalFavicon = "favicon.ico";

var removeFaviconTag = function(){

var links = document.getElementsByTagName('link');

var head = document.getElementsByTagName('head')[0];

for(var i=0, len=links.length; i < len; i++) {

var exists = (typeof(links[i]) !== 'undefined');

if (exists && (links[i].getAttribute('rel') || '').match(/\bicon\b/)) {

head.removeChild(links[i]);

}

};

var setFaviconTag = function(url){

removeFaviconTag();

var link = document.createElement('link');

link.type = 'image/x-icon';

link.rel = 'shortcut icon';

link.href = url;

document.getElementsByTagName('head')[0].appendChild(link);

};

Favicon.drawFavicon = function(i){

setFaviconTag("w" + i + ".ico?r=" + Math.random());

};

Favicon.reset = function(){

setFaviconTag(originalFavicon);

};

window.Favicon = Favicon;

})();

(function(){
	var count = 1;
	var i = setInterval(function(){
		var cur = Math.ceil(++count/25);
    	if(cur > 4) { Favicon.reset(); clearInterval(i); return false; }
    	Favicon.drawFavicon(cur);
    }, 150);
})();

(function(){

var count = 1;

var i = setInterval(function(){

var cur = Math.ceil(++count/25);

if(cur > 4) { Favicon.reset(); clearInterval(i); return false; }

Favicon.drawFavicon(cur);

}, 150);

})();

结果确令人大失所望，火狐等浏览器有效，IE无效。虽然在head中删除旧的link标签与插入新的标签是成功的，但IE里面通过JS去操作dom元素不会反映到html源文件中去。一开始认为可能是缓存问题，但即便加上随机数也无效。

ZC Garden

Month: 二月 2013

动态改变网页图标