もしあなたが、新しく作成した鮮明なSVGアイコンをデプロイし、Chromeで完璧に読み込まれるのを確認した後、Firefoxを開いて壊れた地球儀アイコンが表示された経験があるなら、Geckoの厳格なXMLパーサーの洗礼を受けたということです。Firefoxは、Chromiumが無視するような技術的な厳密さでブラウザタブのアセットを処理します。このFirefox向けFavicon設定ガイドでは、2026年におけるMozillaのエンジン向けにサイトアイコンを正確に設定する方法を解説します。

なぜFirefoxには特別なアプローチが必要なのか

Firefoxがなぜユニークな存在なのかについて話しましょう。パワーユーザーは、「コンテナタブ」のような機能のためにFirefoxを愛用しています。これは、ユーザーのコンテキスト（仕事、個人、銀行など）に基づいて、ブラウザタブの上部にカラーコードを付与する機能です。もしあなたのアイコンが、ごちゃごちゃしたベタ塗りの背景を持っていたり、コントラストが悪かったりすると、これらのネイティブUI要素と直接衝突してしまいます。

GitHubを見てみましょう。彼らは単なる静止画像をブラウザに投げているわけではありません。埋め込みCSSを利用した高度に最適化されたSVGを提供しています。Firefoxユーザーがブラウザをダークモードに切り替えると、GitHubのOctocatアイコンは動的に白に反転します。これは魔法ではありません。Firefoxの堅牢で要求の厳しいSVGサポートを正しく活用しているだけです。

私の推奨はシンプルです。Firefox向けにレガシーなPNGに依存するのはやめましょう。メインのアイコンとしてレスポンシブなSVGを提供し、古いバージョン向けのフォールバックとして単一のマルチ解像度ICOファイルを提供するべきです。FirefoxはSVGを好みますが、コードには絶対的な完璧さを求めます。

Firefoxはどのようにアイコンを解析するか

厳格なXMLパーサー

FirefoxがHTMLのheadタグを解析する際、rel='icon'タグを探します。SVGを見つけると、それをレンダリングしようとします。しかし、SVGファイルにxmlns='http://www.w3.org/2000/svg'という名前空間の宣言が欠けていると、Firefoxは即座に処理を中止し、フォールバックを探します。Chromeはそのような雑なコードを見逃してくれますが、Firefoxは許しません。

頑固なSQLiteキャッシュ

もう一つの癖は、Firefoxのキャッシュの扱い方です。Mozillaは、places.sqliteというローカルのSQLiteデータベースの奥深くにFaviconを保存します。このため、Firefoxはアイコンの更新に関して非常に頑固です。新しいアイコンをテストしていて更新されない場合、スーパーリロード（ハードリフレッシュ）では解決しません。開発中はHTMLにキャッシュバスティング用のクエリストリングを使用する必要があります。

MIMEタイプの強制

Firefoxはファイル拡張子を読むだけでなく、サーバーが送信するHTTPヘッダーを厳密に読み取ります。NginxやApacheサーバーがSVGファイルを一般的なtext/plain MIMEタイプで送信した場合、Chromeは意図を推測してレンダリングしてくれるかもしれません。しかし、Firefoxは頑なに表示を拒否します。.svgファイルをimage/svg+xmlコンテンツタイプで配信するようにサーバーを設定する必要があります。この単一のサーバー設定ミスが、私がデバッグする壊れたFaviconの半数の原因です。

完璧なFirefoxスタックの構築

Firefox向けに最適化された正確なHTMLスタックを構築しましょう。最新のFirefoxと古いバージョンの両方を満たすには、2行のコードだけで十分です。

<link rel='icon' type='image/svg+xml' href='/favicon.svg?v=2'>
<link rel='alternate icon' href='/favicon.ico?v=2'>

alternate icon属性に注目してください。Firefoxはこの関係を特別に尊重します。これはブラウザに「最初にSVGを試し、解析できない場合はこのICOファイルにフォールバックせよ」と指示します。

SVGでのダークモードの実装

GitHubレベルの動的アイコンを実現するには、SVGファイルに直接CSSを埋め込む必要があります。Firefoxは、ベクターファイル内でのprefers-color-schemeメディアクエリを完全にサポートしています。

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
  <style>
    path { fill: #111827; }
    @media (prefers-color-scheme: dark) {
      path { fill: #F9FAFB; }
    }
  </style>
  <path d='M10 10 H 90 V 90 H 10 Z'/>
</svg>

ここがFirefoxの真骨頂です。Geckoエンジンはこの埋め込みCSSを完璧に実行し、アイコンがユーザーのOSテーマに即座に適応することを保証します。

Firefox Faviconのベストプラクティス

ベクターファイルをMozillaの厳格なパーサーに通すのに苦労している場合は、Mzu favicondlを使用できます。私たちのツールは、必要なICOフォールバックを生成しながら、ファイルがFirefoxの要件を満たすように自動的にサニタイズします。

Firefox向けの開発には、大量のHTMLタグは必要ありません。必要なのは正確さだけです。Mozillaのブラウザにクリーンで有効なSVG Faviconと確実なフォールバックを提供すれば、ブラウザのタブは完璧にシャープに見えるでしょう。