サイトへの favicon は追加したものの、Firefox のタブにはまだ空白のページアイコンしか表示されません。これはよくある症状で、原因は通常、キャッシュの挙動、厳格な解析ルール、または単純なパスの指定ミスのいずれかです。favicon を表示できるようにしましょう。
クイック修正：Firefox に favicon を再取得させる
コードに手を入れる前に、まず最速の方法を試してください。Firefox は favicon を強くキャッシュし、数日間にわたって保持することがあります。favicon キャッシュだけを消去します。
- 新しいタブを開いて、
about:cacheにアクセスします。 - 「Disk cache」の「List Cache Entries」をクリックします。
- 「favicon」で検索し、ごサイトに関連するエントリをすべて削除します。
- Firefox を再起動して、ページを再読み込みします。
これで解決しない場合は、HTML 内の favicon URL に query string を追加して、キャッシュを完全に回避します。たとえば favicon.ico?v=2 のようにします。これにより Firefox は、そのリソースを新しいものとして扱います。
Firefox でだけ favicon が表示されない理由
Firefox は、一部のブラウザよりも厳格なルールを適用します。よくある原因は以下のとおりです。
- SVG の解析エラー：Firefox には有効な XML が必要です。namespace が欠落している場合やタグが閉じられていない場合、Firefox は SVG favicon を何の警告もなく無視します。
- 誤った MIME type：サーバーが PNG ファイルに対して
image/x-iconを返した場合、Firefox はそのレスポンスを拒否することがあります。type属性が実際の format と一致していることを確認してください。 - 相対パスの問題：
./favicon.icoのようなパスは、ネストされた route では機能しなくなることがあります。絶対パス、またはルート相対パス（/favicon.ico）を使用してください。 - link タグの欠落：Firefox が
/favicon.icoにフォールバックするのは、link タグが存在しない場合のみです。link タグが、存在しないファイルを指している場合は、フォールバックされません。
Firefox の動作についてより詳しく知りたい場合は、Firefox favicon ガイドを参照してください。
HTML とサーバーからのレスポンスを確認
まず、HTML の head 内にある link タグを確認します。以下のようになります。
<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='icon' type='image/png' href='/favicon-32x32.png'>HTML specificationの規格によると、rel='icon'属性はfaviconを定義する標準的な方法です。Firefoxもこれに従いますが、ファイルの整合性についても確認します。
次に、FirefoxのDeveloper Tools（F12）を開き、Networkタブでページを再読み込みします。faviconのリクエストを探してください。404が返っている場合はパスが誤っています。200が返っていてもアイコンが表示されない場合、ファイルが破損しているか、未対応の形式になっている可能性があります。
予防策
今後この問題を防ぐには、フォールバックとして複数サイズのICOファイルを配信し、XMLヘッダーが正しく指定されたSVGを必ず含めてください。絶対パスを使用し、アイコンを更新するときはversion query stringの追加も検討してください。詳細なチェックリストについては、faviconが表示されない場合のガイドを参照してください。
正しいfaviconを迅速に生成したい場合は、Mzu favicondlが、適切なサイズと形式でICO、PNG、SVGファイルを作成できます。
まとめ
Firefoxでfaviconが表示されない問題の多くは、キャッシュ関連、または厳格なパース処理が原因です。キャッシュをクリアし、SVGを検証して、パスをもう一度確認してください。この手順なら、まもなくアイコンが表示されるはずです。