1 问题
项目中需要动态改变页面的 favicon，icon 文件存储在阿里云（OSS）上。改变 favicon 的方式是通过获取 link 元素，把 icon 的 url 赋值给其 href。在 chrome 上测试可以正确显示，但是在 firefox 上却没有显示图标。
2 分析
动态改变 favicon 以前我也没有做过，秉承不放过一个可能的 debug 策略，首先怀疑 firefox 不支持动态修改 link[rel=icon]。于是打开 fiddler 查看在动态赋值图标 url 后有没有图片请求发出（firefox自带的开发者工具中没有显示 link[rel=icon] 的请求）。在 fiddler 中发现 firefox 是发送了请求的，那么接下来就看下返回了。此时发现阿里云返回的是403，估计是请求头缺少了什么东西导致请求被阿里云屏蔽了。查看图片的请求头发现缺少 Referer，估计就是这个影响了。我重新打开 chrome 看了下图片的请求是有 Referer 的，那么基本上可以确定这是 firefox 的一个 bug。最终我去到阿里云的管理界面看了下防盗链的设置界面，里面选择的是 Referer 不能为空，这下证实了我的猜测：由于 firefox 的加载 favicon 的时候，请求头缺少了 Referer，被阿里云防盗链了。
3 解决方案
解决方案其实是在 google 的时候发现的，link[rel=icon] 的 href 不但可以写 url，还可以写图片的 base64 编码，和 img 标签一样。那么我是否可以用 img 标签加载这个图标然后转成 base64 编码再赋值给 link[rel=icon] 呢？说干就干，依稀记得转 base64 编码可以使用 canvas.toDataURL 这个 API 来转，查了下浏览器支持情况，幸好项目要求支持的浏览器都支持。代码如下：
let ImageContentTypeMap:any = {
jpg: 'image/jpeg',
jpeg: 'image/jpeg',
png: 'image/png',
ico: 'image/x-icon',
gif: 'image/gif'
}
function parseSuffix( url:string ):string {
if ( url ) {
let lastDotIndex = url.lastIndexOf( '.' );
if ( lastDotIndex >= 0 ) {
return url.substr( lastDotIndex + 1 ).toLowerCase();
} else {
return '';
}
} else {
return '';
}
}
/*
请忽略为啥要用 promise，只是 copy 出来懒得改了
*/
function imageToBase64( url, width, height ) {
return new Promise( function( resolve, reject ) {
let img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function() {
var canvas = document.createElement( 'canvas' );
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext( '2d' );
ctx.drawImage( img, 0, 0 );
let imgSuffix = parseSuffix( url );
if ( imgSuffix ) {
let contentType = ImageContentTypeMap[imgSuffix];
if ( contentType ) {
resolve( canvas.toDataURL( contentType ) );
} else {
reject( new Error('Can not parse contentType of favicon') )
}
} else {
reject( new Error('Can not parse suffix of favicon file') )
}
}
// TODO: 当图片加载失败的情况
img.src = url;
} )
}
let iconLink = document.getElementById('iconLink');
imageToBase64( '....../xxx.ico', 16, 16 ).then( imgStr=>{
iconLink.href = imgStr;
} ).catch( e=>{
console.error( 'Parse favicon: ', e.stack );
} )
测试结果是 icon 图片是显示出来了，但是只显示了部分图片（囧）。那...应该可能是图标有问题？遂找了另外一个 png 的图标试试了，测试通过。难道是 firefox 中使用 img 加载 ico 文件有问题？只能上 google 大法了，经过了一番搜索和测试基本能确定下来，firefox 显示 ico 文件是没有问题的，但是 canvas.toDataURL 这个 API 在不同的浏览器中支持的图片格式有偏差，而且格式类型支持的都有限。所以我们最初用的 ico 文件通过 canvas.toDataURL encode 之后的编码不是完全正确的。此时我想到两个解决方案：
- favicon 改换成 png 图片。
- 后台直接给出的不是 icon 的 url，而是 base64 的编码。（用 ico 文件正确的 base64 编码做过测试，firefox 能够正确显示图标）
至此 firefox 不支持动态修改 favicon 的问题算解决了。
延伸资料
Favicon 历史 - https://en.wikipedia.org/wiki/Favicon
各浏览器支持显示的图片格式 - https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support
