ファビコンをアニメーション化するにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/1837261

  •  11-09-2019
  •  | 
  •  

質問

そのようなファビコンをアニメーション化するにはどうすればよいですか?

animated favicon

Firefoxでのみ動作するようです。

役に立ちましたか？

解決

それは現在Firefoxのみでサポートされていますが、他のブラウザでは、うまくいけば、将来的にはそれをサポートしています。効果を実現するには、サーバーにGIF画像をアップロードして、あなたのページのheadセクションに以下の行を追加する必要があります：

<link rel="icon" href="animated_favicon.gif" type="image/gif" >

その他のヘルプやリソースのための AnimatedFavIcon.com のを見てみましょう。

他のヒント

ほぼ確実にあなたが探しているが、一部の人々は、これまでにプログラム的にクライアント側のJavaScriptでファビコンに書き込みするように行っていないものを。以下のURLは、古いビデオゲームを示しファビコンの「ディフェンダー」の演奏ます：

http://www.p01.org/defender_of_the_favicon/する

このはなく、IEの少なくとも古いバージョンでは、Firefoxの、オペラとSafariで動作します。私は、最新のIEができるかもしれないものはわからない。

は、このページの「ソースの表示」を行うと、非常に興味深いの読み取りになります。

Firefox

Firefox はアニメーション化されたファビコンをサポートしています。GIFへのリンクを追加するだけです <link rel="icon"> 鬼ごっこ：

<link rel="icon" href="/favicon.gif">

アニメーションICOファイルを使用することもできます。この場合、アニメーション化されたファビコンをサポートしていないブラウザでは、最初のフレームのみが表示されます。

その他のブラウザ

他のブラウザでは、JavaScript を使用してファビコンをアニメーション化できます。GIF から単一フレームを抽出して変更するだけです。 <link rel="favicon"> GIF フレームが変更されるたびに src を実行します。たとえば、このコードを参照してください (JS フィドルのデモ):

var $parent = document.createElement("div")
    $gif = document.createElement("img")
   ,$favicon = document.createElement("link")

// Required for CORS
$gif.crossOrigin = "anonymous"

$gif.src = "https://i.imgur.com/v0oxdQ8.gif"

$favicon.rel = "icon"

// JS Fiddle always displays the result in an <iframe>,
// so we have to add the favicon to the parent window
window.parent.document.head.appendChild($favicon)

// libgif.js requires the GIF <img> tag to have a parent
$parent.appendChild($gif)

var supergif = new SuperGif({gif: $gif})
   ,$canvas

supergif.load(()=> {
  $canvas = supergif.get_canvas()
  updateFavicon()
})

function updateFavicon() {
  $favicon.href = $canvas.toDataURL()
  window.requestAnimationFrame(updateFavicon)
}

私が使用した libgif.js GIFフレームを抽出します。

残念ながら、Chrome ではアニメーションがあまりスムーズではありません。Firefox ではうまく機能しますが、Firefox はすでに GIF ファビコンをサポートしています。

こちらもチェックしてください favico.js 図書館。

こちらも参照

リポジトリがあります GitHub これを行う方法をデモンストレーションします。

http://lab.ejci.net/favico.js/example-simple/

基本的に、キャンバスに絵を描いてから、 canvas.toDataURL('image/png') そして、 <link> そのデータ URL への href。

を作成しました ファビコンをアニメーション化するライブラリ, 、デフォルトはローダー アニメーション (キャンバスによって生成されます) ですが、そのままでは gif をサポートしていないブラウザーの gif アニメーションもサポートします (バージョン 0.3.0 以降)。

APIがシンプル

favloader.init({
    color: 'red'
});

favloader.start();
favloader.stop();

バージョン 0.4.0 には、次のようなフレームを生成するコールバック関数があります。

favloader.init({
   frame: function(ctx /* canvas context 2D */) {
   }
});

ユーザーは単一のフレームを描画できるようになります

注記： このようなものを実装したい場合に考慮すべきこと:

  • タブがアクティブでないときにアニメーション化するには、Web ワーカーを使用します。
  • requestAnimationFrame は Web ワーカーであっても MacOSX/Chrome で実行を停止するため、使用しないでください。

ほぼすべてのブラウザのファビコンをアニメーション化するには、次のようにすればうまくいきました。

  1. GIF の各フレームの画像をダウンロードします。

  2. 最初の画像をアイコンとして ID にリンクします。

    <link rel="icon" type="image/png" href="/image1.png" id="icon"/>

  3. ループする関数を作成して使用します setTimeout() 画像ごとに。時間は可変で、アニメーションを希望する速度に設定できます。以下に例を示します。

    function iconChange() {
setTimeout(function(){ document.getElementById("icon").href = "/image1.png";}, 333);
setTimeout(function(){ document.getElementById("icon").href = "/image2.png";}, 667);
setTimeout(function(){ document.getElementById("icon").href = "/image.png";}, 1000);  
}

  4. ウィンドウのロード時にループを作成します。

    window.onload = function() {
setInterval(function() {
iconChange();
}, 250);
};

他の方法は特定のブラウザーおよびブラウザー バージョンでのみ機能するため、この方法は、より多くのブラウザーでアニメーションを表示できるようにするのに役立ちます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top