web-dev-qa-db-ja.com

ファビコンをアニメーション化する方法は？

そのようなファビコンをアニメーション化する方法は？

animated favicon

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

htmlfavicon
39
tonyf

現在FireFoxでのみサポートされていますが、将来的には他のブラウザでもサポートされる予定です。効果を得るには、gifをサーバーにアップロードし、ページのheadセクションに以下の行を追加する必要があります。

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

追加のヘルプとリソースについては、 AnimatedFavIcon.com をご覧ください。

32
Chris Van Opstal

ほぼ確実にあなたが探しているものではありませんが、クライアント側のJavaScriptでファビコンにプログラムで書き込むことまで行った人もいます。次のURLは、ファビコンでプレイしている古いビデオゲーム「Defender」を示しています。

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

これはFirefox、OperaおよびSafariで動作しますが、IEの少なくとも古いバージョンでは動作しません。最新のIE 。

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

25
teapot7

Firefox

Firefoxはアニメーションファビコンをサポートしています。 <link rel="icon">タグにGIFへのリンクを追加するだけです：

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

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

他のブラウザ

他のブラウザでは、JavaScriptを使用してファビコンをアニメーション化できます。 GIFから単一のフレームを抽出し、GIFフレームが変更されるたびに<link rel="favicon"> srcを変更するだけです。例としてこのコードを参照してください（ JS Fiddle demo ）：

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 ライブラリもチェックしてください。

こちらもご覧ください

12
Michał Perłakowski

GitHub にリポジトリがあり、これを行う方法を示しています。

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

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

4
Lance Pollard

ファビコンをアニメーション化するライブラリ を作成しました、デフォルトはローダーアニメーション（キャンバスによって生成されます）ですが、ブラウザの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 Workerを使用します。
  • requestAnimationFrameを使用しないでください。これは、WebワーカーであってもMacOSX/Chromeでの実行を停止するためです。
2
jcubic

ほとんどすべてのブラウザでファビコンをアニメーション化するために、次の方法がうまくいきました。

  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);
};
_

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

1
Malmadork