アニメーションFaviconと静的ICOの使い分け

アニメーションFaviconの表示は、対象ブラウザで確認する必要があります。ImgConvertで作れるのは、GIFの最初のフレームを使った静的ICOです。アニメーションを保持するスイッチや、アニメーションICOの出力機能はありません。

アニメーションFaviconとは？

Favicon（「favorite icon」の略）は、ブラウザのタブ、ブックマーク、アドレスバーに表示される小さなアイコンです。アニメーションFaviconはさらに一歩進んで、複数のフレームを循環させ、ブラウザタブに動きを作り出します。

一般的な使用例：

• 通知インジケーター — 新しいメッセージを知らせる点滅や脈動
• ローディングアニメーション — コンテンツ処理中のスピニングアイコン
• ブランド表現 — 個性を伝える微妙なロゴアニメーション
• 季節のイベント — 祝日やプロモーション用の一時的なアニメーションアイコン

最初のフレームを確認する

16×16や32×32でも判別できるシンプルな図柄を選びます。冒頭が空白やフェードインなら、画像編集ソフトで適切な静止画を用意してください。この変換ツールにはフレーム選択機能がありません。

アニメーションデザインの原則

以下は別のエディターでアニメーションを設計する際の目安であり、ICO変換器の制限や設定ではありません。動きに合わせて間隔を調整し、不要な点滅を避けます。

シンプルに保つ

最良のアニメーションFaviconは抑制を使います。16×16〜32×32ピクセルでは、複雑さは視覚的ノイズになります：

• 最大2〜4フレーム がほとんどのエフェクトに十分
• シンプルな動き — 脈動、点滅、回転、スライド
• すべてのフレームで明確なシルエット
• 遅めのタイミング — フレームサイクルごとに500ms以上

アニメーションタイプ別のタイミング

最初のフレームのルール

この変換器は最初のフレームから静的ICOを作ります。別途実装したアニメーションが再生されなくても、その1枚で成立する必要があります。

• コンテキストなしで認識できるブランドマーク
• 16×16および32×32ピクセルサイズで明確
• 明るいブラウザUIでも暗いブラウザUIでも良好なコントラスト
• テキストなし（Faviconサイズでは読めない）

ステップバイステップの作成プロセス

以下は別のエディターでアニメーションを設計する際の目安であり、ICO変換器の制限や設定ではありません。動きに合わせて間隔を調整し、不要な点滅を避けます。

ステップ1：フレームをデザインする

アニメーション用に2〜4つの異なるフレームを作成します：

通知パルスの場合：

• フレーム1：通常のアイコン（基本状態）
• フレーム2：微妙なグローまたは大きく見えるアイコン
• フレーム3：通常に戻る（スムーズなループのため）

ローディングアニメーションの場合：

• フレーム1：12時の位置のアイコン
• フレーム2：3時の位置のアイコン
• フレーム3：6時の位置のアイコン
• フレーム4：9時の位置のアイコン

ステップ2：各フレームをエクスポートする

各フレームを32×32ピクセルのPNGとしてエクスポートします：

• 透明なフレームが必要ならアルファ付きPNGを出力する。
• 必要な場所で透明な背景を保持
• フレームあたり5KB未満を目標に

ステップ3：GIFを組み立てる

フレームをアニメーションGIFに組み合わせます：

静的ICOパッケージを作る

1. GIFからICOへで20 MB以下のGIFを1つ選びます。
2. 16、32、48、64、128、256 pxからサイズを選びます。初期選択は32、64、128です。
3. 変換後にicons.zipをダウンロードして解凍します。
4. 個別ICOか、選択した全サイズを含むfavicon.icoを使います。複数サイズは同じ静止画の別サイズであり、アニメーションのフレームではありません。

長方形の画像は縦横比を保って正方形に収められ、余白は透明になります。元画像内の不透明な背景は残ります。PNGアイコンとマニフェストも必要ならFavicon Generatorを使ってください。

Webサイトに設定する

解凍したファイルをサイトのルートに配置した場合、ページのheadに次を記述できます。

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

実際の配置に合わせてパスを変更してください。変換ツールはサイトのファイルやHTMLを変更しません。宣言の意味はMDNのiconリファレンスで確認できます。

動かす必要がある場合

元のアニメーションを保管してください。アニメーション画像をFaviconに指定したり、JavaScriptでアイコンを切り替えたりする処理は別途実装します。画像ビューアで動くファイルでも、タブ、ブックマーク、ショートカットで同じように動くとは限りません。対象ブラウザで試し、静的な代替アイコンを用意してください。

サイト用JavaScriptの例

サイト制作者は既存のfaviconリンクのURLを切り替える方法を試せます。これは別途実装するサイトのコードです。当サイトにGIFをアップロードしても、サイト変更やアニメーションの設置は行われません。各フレームを静止画像として用意し、最初に単独で使えるアイコンを設定します。

以下はページが表示されている間、2枚のPNGを500 msごとに切り替え、非表示時や動きを減らす設定では停止する例です。更新方法の説明であり、すべてのタブ、ブックマーク、OSショートカットで動く保証ではありません。実際の使用先で確認してください。

<link id="favicon-demo" rel="icon" type="image/png" href="/icon-1.png">
<script>
  const icon = document.getElementById('favicon-demo');
  const frames = ['/icon-1.png', '/icon-2.png'];
  const motion = window.matchMedia('(prefers-reduced-motion: reduce)');
  let timer = null;
  let frameIndex = 0;

  function stopAnimation() {
    if (timer !== null) window.clearInterval(timer);
    timer = null;
    frameIndex = 0;
    icon.href = frames[0];
  }

  function syncAnimation() {
    stopAnimation();
    if (document.hidden || motion.matches) return;
    timer = window.setInterval(() => {
      frameIndex = (frameIndex + 1) % frames.length;
      icon.href = frames[frameIndex];
    }, 500);
  }

  document.addEventListener('visibilitychange', syncAnimation);
  motion.addEventListener('change', syncAnimation);
  syncAnimation();
</script>

アニメーションFaviconを使うべき場合・使わない場合

良い使用例

不適切な使用例

パフォーマンス最適化

フレーム数を抑え、通知が不要になったら止め、アニメーションの有無でページの動作を比較します。タイマーを速くしても良くなるとは限りません。同じアイコンに複数のタイマーを動かさず、コンポーネントに組み込む場合は破棄時にタイマーとリスナーを解除してください。例は単独ページ用です。

可視状態についてはMDNのPage Visibility APIを参照できます。アイコンだけでは気づかれない場合があるため、ページ内のアクセシブルな状態表示も用意します。

確認事項

• 公開したアイコンURLと小さいサイズを確認します。
• 古いアイコンが出る場合は、HTMLの指定とキャッシュを確認します。
• 静的ICOとWebサイト側のアニメーションを別々に検証します。

対象ブラウザーと端末で初回・キャッシュ済みの両方を確認します。最初のフレーム、別途実装した動き、動きを減らす設定、非表示からの復帰を試します。明暗のブラウザーUIで16×16・32×32の識別性を確認し、動きが安定しなければ静的アイコンを使います。容量目標はプロジェクトの目安であり共通の制限ではありません。

よくある質問

複数サイズを選べばGIFの動きも残りますか？

いいえ。すべて最初のフレームから作られます。

別のフレームを選べますか？

このページでは選べません。別の編集ソフトで静止画を保存し、PNGならPNGからICOへを使ってください。

古いアイコンが残るのはなぜですか？

配置済みURLが開くか、複数のアイコン指定が競合していないかを確認し、新しいセッションとキャッシュ済みで比較します。タブ、ブックマーク、インストール済みショートカットでは素材やキャッシュが異なる場合があります。1ページの指定変更ですべての保存アイコンが置き換わるわけではありません。

CSSだけでタブのアイコンを動かせますか？

ページ内画像のCSSアニメーションはタブのアイコンを直接動かしません。アニメーション画像の指定やJavaScriptによるURL変更は別の実装として対象ブラウザーで検証します。

どの程度動かすべきですか？

状態を伝えるために必要な量にとどめます。静的なバッジの方が明確な場合もあります。速い点滅を避け、識別できる静止画と動きを減らす設定を確認します。拡大プレビューではなく実際の小さい表示で間隔を判断してください。