WordPressのカスタマイザーに完璧な512x512のPNGをアップロードして「公開」を押したのに、ブラウザのタブが全く更新されない。そんな経験はありませんか？あのグレーの地球儀アイコンは、多くのサイト公開時の悩みの種です。GitHubの通知アイコンのようにプロフェッショナルなタブにしたいのに、WordPressがファイルを完全に無視しているように見えます。

まずは最も確実なwordpress favicon not showing fix（表示されない問題の解決策）からお伝えします。90%のケースでは、テーマ側は実際にアイコンを更新しているのに、ブラウザやキャッシュプラグインが古いアイコンを頑なに保持しているだけです。

コードをいじる前に、シークレットウィンドウでサイトを開いてみてください。そこでアイコンが表示されれば、ブラウザのキャッシュが原因です。それでもダメな場合は、キャッシュプラグイン（WP Rocket、LiteSpeedなど）のキャッシュをすべてパージしてください。ブラウザはFaviconを強力にキャッシュしますし、WPのキャッシュプラグインはHTMLのheadセクションをスナップショットとして保存します。

なぜWordPressはFaviconを落とすのか

キャッシュをクリアしても解決しない場合、2026年現在のWordPressがサイトアイコンをどう処理しているかを見る必要があります。プラットフォームは進化しており、古い手法は現代の環境では壊れがちです。

第一に、フルサイト編集（FSE）への移行です。最新のブロックテーマでは、古いカスタマイザー（外観 > カスタマイズ > サイト基本情報）が、新しいサイトエディターの「サイトロゴ」ブロックと競合することがあります。カスタマイザーで設定しても、ブロックテーマがヘッダーを上書きしてしまうと、アイコンは反映されません。

第二に、画像処理の失敗です。画像をアップロードすると、WordPressはサーバーのPHP画像ライブラリを使ってトリミングされたバージョン（32x32など）を生成します。この処理中にサーバーのメモリが不足すると、WPは警告なしに失敗します。ファイルは保存されても、HTMLにlinkタグが挿入されることはありません。

究極のWordPress Favicon修正法

WordPressの標準機能が当てにならない時は、手動で制御するしかありません。そもそも内蔵のトリミング機能に頼るのはリスクが高いのです。

1. コードでカスタマイザーをバイパスする

最も確実な修正方法は、WordPressのサイトアイコン機能を完全にバイパスすることです。テーマのヘッダーに正確なHTMLタグを直接注入します。

まず、Mzu favicondlを使って適切なアイコンセットを生成します。ダウンロードしたファイルを、FTPやメディアライブラリ経由でWordPressの wp-content/uploads ディレクトリに直接アップロードします。

次に、子テーマの functions.php またはスニペットプラグインに以下のコードを追加します：

add_action('wp_head', 'manual_favicon_injection');
function manual_favicon_injection() {
    echo "<link rel='icon' type='image/svg+xml' href='/wp-content/uploads/favicon.svg'>\n";
    echo "<link rel='icon' type='image/png' sizes='32x32' href='/wp-content/uploads/favicon-32x32.png'>\n";
    echo "<link rel='apple-touch-icon' href='/wp-content/uploads/apple-touch-icon.png'>\n";
}

このコードは、WordPressに正確なアイコンパスを出力させます。テーマの競合を回避し、ブラウザに正しい指示を送ることができます。

2. キャッシュバスティング（クエリストリング）

上記のコードを適用してもChromeが古いアイコンを表示する場合、Chrome内部のSQLite Faviconデータベースが原因です。ChromeはURLが変わらない限り、新しいアイコンをチェックしません。

ファイルパスにバージョンのクエリストリングを追加することで、強制的に更新させることができます。

add_action('wp_head', 'versioned_favicon_injection');
function versioned_favicon_injection() {
    $ver = '1.2'; // この数字を変更して更新を強制
    echo "<link rel='icon' href='/wp-content/uploads/favicon.svg?v=" . $ver . "'>\n";
}

Chromeが ?v=1.2 を見ると、それを全く新しいファイルとして扱い、即座にダウンロードします。

3. サイトロゴブロックの同期を修正する

最新のブロックテーマ（Twenty Twenty-Fourなど）を使用している場合は、サイトエディターを確認してください。「外観 > エディター」に進みます。

ヘッダーテンプレートをクリックし、サイトロゴブロックを選択します。サイドバーの設定で、「サイトアイコンとして使用」のトグルを探します。これがオフになっていると、ブラウザタブ用の画像として無視されます。オンにしてテンプレートを保存し、キャッシュをクリアしてください。

4. アップロードフォルダの権限を確認する

問題がコードではなく、サーバー設定にある場合もあります。wp-content/uploads フォルダの権限が厳しすぎる（755 ではなく 700 など）と、ブラウザが画像ファイルを読み込めません。

将来のアイコンのトラブルを防ぐ

巨大な512x512のPNGを、WordPressに任せて16x16のアイコンにリサイズさせるのはやめましょう。内蔵のPHPリサイズアルゴリズムは品質より速度を優先するため、タブのアイコンがぼやけてしまいます。

代わりに、アップロード前にアセットを準備してください。専用ツールを使って マルチサイズ Favicon ICO とスケーラブルなSVGを作成しましょう。

サイトアイコンの一般的な仕組みについてさらに詳しく知りたい場合は、WordPressでのFavicon追加ガイドをご覧ください。しかし、上記の手動注入メソッドを使えば、タブアイコンが表示されない問題に悩まされることは二度とないはずです。