8

ウェブサイトにファビコンを追加して、そのタブを識別できるようにしたい。ただし、ファビコンをファイルにしたくありません。Javascriptで作成する最良の方法は何ですか？

理由

  • ファビコンファイルには追加のHTTPリクエストが必要であり、ページの読み込み時間が長くなります。
  • Webサーバーを変更すると、静的コンテンツの提供が別の方法に変更され、頭痛の種になる可能性があります。

PS：私はこれに対する答えとして解決策を提示しましたが、もっと良い方法があるのではないかと思います。

4

1 に答える 1

10

シンプルなフォーム ベースのグラフィックで十分な場合は、HTML5 Canvas を使用してファビコンを作成できます。読み込み後に favicon 画像を変更する試みが成功しています。同様に、基本的なキャンバス 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のような回避策が必要です。その方法については、公式の指示を参照してください。

于 2012-10-09T22:08:09.807 に答える