html - ファビコンをアニメーション化するには?

Question

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

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

Answer 1

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

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

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

Answer 2

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

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

これはFirefox、Opera、Safariで機能しますが、少なくとも古いバージョンのIEでは機能しません。最新のIEで何ができるのかわかりません。

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

Answer 3

ファイアフォックス

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

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

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

その他のブラウザ

他のブラウザーでは、JavaScript を使用してファビコンをアニメーション化できます。GIF から単一のフレームを抽出し<link rel="favicon">、GIF フレームが変更されるたびに 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ライブラリもチェックしてください。

こちらもご覧ください

• ウェブサイトにブラウザ タブ アイコン (ファビコン) を追加するには?
• ウェブサイトのファビコンを動的に変更する

Answer 4

ほとんどすべてのブラウザのファビコンをアニメーション化するには、次のようにしました。

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

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

Answer 5

これはFirefoxでのみ機能します (私の知る限り)。

主要なブラウザーがSVG faviconをサポートするようになりました。また、SVG はSMILを使用してアニメーション化できます。

したがって、GIF の代わりに SVG ファビコンを使用して、その他の利点も得ることができます。
SVG favicon の使用方法に関する詳細な回答については、この投稿を参照してください。

たとえば、これはアニメーション化された SVG ロゴ (ファビコンとして使用できる) のコードです。

<?xml version="1.0" encoding="UTF-8"?>
<svg width="280" height="260" version="1.1" viewBox="0 0 280 260" xmlns="http://www.w3.org/2000/svg">
  <linearGradient id="grad" x1="140" x2="140" y1="260" gradientUnits="userSpaceOnUse">
    <stop stop-color="#ffa00f" offset="0"/>
    <stop stop-color="#ffbe0f" offset="1"/>
  </linearGradient>
  <path d="m15 150c6.3913 2.885 20.753 8.8719 30 25 20 35 25 70-5 70s-25-35-5-70l60-90c20-35 25-70-5-70s-25 35-5 70l60 90c20 35 25 70-5 70s-25-35-5-70l60-90c20-35 25-70-5-70s-25 35-5 70l60 90c20 35 25 70-5 70s-25-35-5-70c9.2467-16.128 23.609-22.115 30-25" fill="none" stroke="#aaa" stroke-linecap="round" stroke-width="30"/>
  <path d="m15 150c6.3913 2.885 20.753 8.8719 30 25 20 35 25 70-5 70s-25-35-5-70l60-90c20-35 25-70-5-70s-25 35-5 70l60 90c20 35 25 70-5 70s-25-35-5-70l60-90c20-35 25-70-5-70s-25 35-5 70l60 90c20 35 25 70-5 70s-25-35-5-70c9.2467-16.128 23.609-22.115 30-25" fill="none" stroke="url(#grad)" stroke-linecap="round" stroke-width="30" stroke-dashoffset="1374" stroke-dasharray="1374">
    <animate id="anim1" attributeName="stroke-dashoffset" from="1374" to="0" dur="4s" fill="freeze" calcMode="spline" keyTimes="0; 1" keySplines=".42,0,.58,1" begin="0s; anim2.end"/>
    <animate id="anim2" attributeName="stroke-dashoffset" from="2748" to="1374" dur="4s" fill="freeze" calcMode="spline" keyTimes="0; 1" keySplines=".42,0,.58,1" begin="anim1.end + 8s"/>
  </path>
</svg>

そして、これは結果です：