表示されない・更新されない favicon を直す

App Router では、Next.js が app ディレクトリのファイルからアイコンの link を生成します。ファイル名を外すと何も出力されません。Pages Router にはそもそも規約がありません。どちらに当たっているかを突き止めれば、解決法は明白です。

ファイルは変えたのにタブは変わらない。Next.js ではそれは三つのキャッシュのいずれかです。ブラウザのファビコン保存、古い .next ビルド、あるいは古いバイトを配信する CDN です。その順に一つずつ除外してください。

React は DOM ノードにレンダリングし、head には一切触れないため、ファビコンは静的な HTML ファイルに置かれます。タブが空白なら、そのファイルの link タグが誤っているか、アイコンが src からインポートされて固定パスに存在しなくなっています。

ファイルを差し替えたのにタブは古いアイコンのまま。React アプリではそれはブラウザがファビコンをキャッシュしているか、ビルド出力と CDN がまだ public/ の前のコピーを配信しているかです。

Vite は public/ を出力のルートにコピーし、ビルド時に index.html を書き換えます。開発では動作し本番で 404 になるファビコンは、ほぼ必ずパスに public/ のセグメントが含まれているか、src からインポートされてハッシュ化されています。

Vue の単一ファイルコンポーネントは head に link タグをレンダリングできないため、ファビコンは index.html で宣言します。Vite ではプロジェクトルート、Vue CLI では public/ の中です。タブが空白なら、そのファイルのタグが誤っています。

Angular は、ビルド設定が指示した場合にのみ静的ファイルをコピーします。angular.json の assets エントリに一致しないアイコンは dist に届きません。ビルドは成功し、ファイルはそこにありません。

Astro は public/ を手を加えず出力へコピーしますが、アイコンのタグは代わりに挿入してくれません。タブが空白なら、ページが使うレイアウトに link が無いか、ページが独自の html 要素をレンダリングしてレイアウトを省いています。

WordPress はテーマに置いたファイルからファビコンを配信しません。一つの「サイトアイコン」設定からアイコンのタグを出力するため、タブが空白ということは、その設定が適用されていないか、テーマが競合しているかのほぼどちらかです。

新しいサイトアイコンを設定したのに古いものが動かない。WordPress ではそれはほぼ必ずキャッシュ層（古い HTML を配信するページキャッシュプラグインや CDN）で、ブラウザ自身のファビコンキャッシュが第二の容疑者です。

Shopify ではファビコンはサーバー上のファイルではなくテーマ設定です。テーマはエディターで選んだ画像から一つのアイコンの link をレンダリングするため、タブが空白ということは、未設定か、間違ったテーマを編集したか、フォーマットが拒否されたかのいずれかです。

新しいファビコンを選んだのに公開ストアはまだ古いものを表示している。Shopify ではそれはほぼ必ず公開されなかった下書きテーマか、画像 CDN とブラウザが前のアイコンをキャッシュしているかです。