faviconをアニメーション化する方法は？

Question

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

唯一のFirefoxで動作しているようです。

Answer 1

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

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

は、追加のヘルプやリソースのためのAnimatedFavIcon.comを見てみましょう。

Answer 2

ほとんど確実にあなたが探しているものではありませんが、クライアントサイドJavaScriptでファビコンにプログラム的に書き込む人もいます。これは、Firefox、オペラやサファリではなく、IEの少なくとも古いバージョンで動作します

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

次のURLは、古いビデオゲームファビコンの「ディフェンダー」の演奏を示しています。私は最新のIEが可能であるかどうか分からない。

このページの「閲覧元」を行うと、かなり面白い読み物になります。

Answer 3

あなたのアニメーションGIFの名前をfavicon.gifに変更し、サーバーにindex.html（またはindex.php ...またはそれ以上のもの）（公開されているサイトがある場合はpublic_htmlまたはそのサブディレクトリ）を置くと、自動的に動作します。

Answer 4

Firefox

Firefoxはアニメーションファビコンをサポートしています。あなたはまた、アニメーションICOファイルを使用することができます

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

：ちょうど<link rel="icon">タグでGIFへのリンクを追加します。この場合、アニメーション化されたファビコンをサポートしていないブラウザは最初のフレームのみを表示します。あなたはJavaScriptを使用してファビコンをアニメーション化することができ、他のブラウザでは

他のブラウザ

。 GIFフレームから1フレームを抽出し、GIFフレームが変更されるたびに<link rel="favicon"> srcに変更するだけです。私はGIFフレームを抽出するlibgif.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) 
} 

_{：例えば、このコード（JS Fiddle demo）を参照。}

残念ながら、Chromeではアニメーションがあまり滑らかではありません。 Firefoxではうまく動作しますが、Firefoxは既にGIFファビコンをサポートしています。

さらにチェックアウト：favico.jsライブラリ。

も参照してください

• How to add a browser tab icon (favicon) for a website?
• Changing website favicon dynamically