アニメーションファビコン（GIF と JavaScript）
アニメーションファビコンは通常、アイコンとして使うアニメーション GIF です。Firefox と一部の Chromium ビルドはタブでそれを再生し、Safari などは最初のフレームだけを表示します。サイトは主にライブの活動（スピナー、未読数、録画ドット）を示すためにアニメーションを使い、多くの場合 GIF に頼るのではなく JavaScript からアイコンを差し替えます。ブランドマークには、静止したアイコンの方が明確で、より広くサポートされます。
サポートは不均一なので、拡張として扱う
ファビコンとして参照されたアニメーション GIF は、Firefox と一部の Chromium ビルドで再生されますが、Safari やいくつかのものは最初のフレームだけを描画します。したがってアニメーションは決して主役にはなれません。アイコンが伝える必要のあることは、その最初のフレームだけで読めなければならないのです。
そのため、実際の「アニメーション」ファビコンのほとんどは GIF ですらありません。スクリプトがキャンバスからアイコンを描き直し、link タグの href を差し替えているのです。何かの読み込み中のスピナー、録画中の赤いドット、マークの上に描かれた未読数。これは精密な制御を与え、同じ link 差し替えのしくみでどこでも機能します。
ライブ状態のための JavaScript の経路
未読バッジや状態ドットを表示するには、各状態をキャンバスに描き、書き出して、ファビコンの link の href をその結果に設定します。ブラウザはタブアイコンをその場で更新します。これがメールやチャットのアプリがタブに数字を出す方法で、スクリプトが無効な場面では静止アイコンへ優雅に劣化します。
アニメーションファビコンに関するよくある質問
アニメーションファビコンは Chrome と Safari で機能しますか？
サポートは一貫していません。Firefox は GIF ファビコンをアニメーションさせ、Chromium は当たり外れがあり、Safari は通常最初のフレームだけを表示します。アニメーションが見られることに決して頼らないでください。
ファビコンに未読数を表示するには？
JavaScript でアイコンとバッジをキャンバスに描き、ファビコンの link の href をキャンバスの出力に設定します。数が変わるたびに更新しましょう。メールやチャットのアプリが使うのと同じ手法です。
アニメーションファビコンを使うべきですか？
ブランドマークには、いいえ。静止したアイコンの方が明確で普遍的にサポートされます。アニメーションは本物のライブ状態のために取っておき、GIF ではなく JavaScript の link 差し替えで実装しましょう。