如何在javascript中创建一个favicon？

Question

我想在网站上添加一个favicon,以便能够识别它的标签.不过,我不希望favicon成为一个文件.在Javascript中创建一个的最佳方法是什么？

原因

• favicon文件需要额外的HTTP请求,这会增加页面加载时间.
• 更改Web服务器可能会将静态内容更改为另一种方式,这会导致令人头疼的问题.

PS:我提出了一个解决方案作为答案,但我想知道是否有更好的方法.

Answer 1

如果简单的基于表单的图形就足够了,可以使用HTML5 Canvas创建一个favicon.已成功尝试在加载后修改图标图像.类似地,可以使用基本画布API完全在javascript中创建一个favicon.以下示例创建并设置一个灰色的图标,上面有一个绿色方块:

<script>
    var canvas = document.createElement('canvas');
    canvas.width = 16;
    canvas.height = 16;
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "#aaa";
    ctx.fillRect(0, 0, 16, 16);
    ctx.fillStyle = "#afa";
    ctx.fillRect(4, 4, 8, 8);            
    var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = canvas.toDataURL("image/x-icon");
    document.getElementsByTagName('head')[0].appendChild(link);
</script>

对于当前过时的版本Internet Explorer(<9),需要像Explorer Canvas这样的解决方法.请参阅有关如何执行此操作的官方说明.