如何使用JavaScript创建网站的favicon？

Question

我想在网站上添加favicon以便识别它的标签。但是，我不希望将favicon作为文件添加。在Javascript中创建favicon的最佳方法是什么？

原因：

• 添加favicon文件会增加页面加载时间，需要额外的HTTP请求。
• 更改Web服务器可能会导致静态内容的提供方式发生变化，从而引起麻烦。

PS：我已经提供了一个解决方案, 但我想知道是否有更好的方法。

- Bengt

Answer 1

如果只需要简单的基于表单的图形，可以使用HTML5画布创建一个站点图标。已经有成功的尝试，在加载后修改favicon图像。类似地，可以使用基本的canvas 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这样的解决方法。请查看官方说明以了解如何操作。

- Bengt

---

@jrd1：是的，这就叫做“分享知识”。可以查看“提问”页面（http://stackoverflow.com/questions/ask）。 - Bengt

@Deadalus：我询问了最佳方法来完成这个任务。这个解决方案只适用于简单的图形和IE>=9。我扩展/澄清了我的问题和答案。 - Bengt

@bngtlrs，同意。我并没有冒犯你的意思。当我发帖时，你还没有更新你的问题以反映你的答案。因此，我的评论让人难以置信。 - jrd1

@jrd，不会有任何冒犯。我以前做过这样的“一次性问答”，但是有时候它似乎是收集知识的正确工具。也许我应该更谨慎地澄清我所做的和想要的。 - Bengt