javascript - 如何在 javascript 中创建网站图标？

Question

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

原因

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

PS：我已经提出了一个解决方案来解决这个问题，但我想知道是否有更好的方法。

Answer 1

如果简单的基于表单的图形就足够了，那么可以使用 HTML5 Canvas 创建一个网站图标。已成功尝试在加载图标图像后对其进行修改。类似地，可以使用基本的 canvas API 完全在 javascript 中创建一个网站图标。以下示例创建并设置了一个带有绿色方块的灰色图标：

<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。请参阅有关如何执行此操作的官方说明。