WordPress サイトにファビコンを追加する方法：カスタマイザー・コード・トラブルシューティング完全ガイド

Q: WordPress で SVG ファビコンを使用できますか？

WordPress はセキュリティ上の理由からデフォルトでは SVG アップロードをサポートしていません。functions.php のコードで手動で SVG ファビコンサポートを追加するか、SVG アップロードを有効にするプラグインを使用できます。

Q: WordPress でライトモードとダークモード用に異なるファビコンを設定するにはどうすればよいですか？

prefers-color-scheme の CSS メディアクエリを埋め込んだ SVG ファビコンを使用します。カスタマイザーは PNG/ICO 形式のみ対応しているため、functions.php で手動で SVG ファイルを追加してください。

WordPress にファビコンを追加するのは約 30 秒で完了します。外観 → カスタマイズ → サイト基本情報 → サイトアイコンに移動し、512x512 の PNG をアップロードして「公開」をクリックするだけです。

ただし、うまくいかない場合や、より細かい制御が必要な場合は、続きをお読みください。知っておくべき注意点がいくつかあります。

簡単な方法：WordPress カスタマイザー

この方法は、バージョン 4.3 以降（2015年リリース）の WordPress サイトで利用できます。比較的新しいバージョンをお使いであれば、このオプションが使えます。

ステップ 1：カスタマイザーを開く

WordPress 管理画面で 外観 → カスタマイズ に移動する
または、サイト表示中に管理バーの「カスタマイズ」をクリックする

ステップ 2：サイト基本情報を見つける

カスタマイザーのサイドバーで サイト基本情報 をクリックする
サイトアイコン までスクロールする

ステップ 3：画像をアップロードする

サイトアイコンを選択 をクリックする
512 x 512 ピクセル 以上の PNG 画像をアップロードする
WordPress が必要なすべての小さいサイズ（32x32、180x180 など）を自動生成します
必要に応じてトリミングし、公開をクリックする

これで完了です。WordPress が残りの処理を行います。ブラウザ用ファビコン、Apple Touch Icon、Windows タイル画像の <link> タグを自動的に作成します。

コードで追加する方法：ファビコンの手動設定

カスタマイザーの方法では対応できない場合があります。カスタムテーマを構築している場合や、テーマがデフォルトの動作を上書きしている場合などです。コードで追加する方法をご紹介します。

方法 A：テーマにファイルを配置する

ファビコンファイルをテーマのルートディレクトリにアップロードし、テーマの functions.php に以下を追加します：

function custom_favicon() {
    $favicon_url = get_stylesheet_directory_uri();
    ?>
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo $favicon_url; ?>/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<?php echo $favicon_url; ?>/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo $favicon_url; ?>/apple-touch-icon.png">
    <?php
}
add_action('wp_head', 'custom_favicon');

方法 B：SVG ファビコンを使用する

SVG ファビコンは完全にスケーラブルで、ダークモードにも対応できます。functions.php に以下を追加します：

function svg_favicon() {
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.svg';
    ?>
    <link rel="icon" type="image/svg+xml" href="<?php echo $favicon_url; ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon-32x32.png">
    <?php
}
add_action('wp_head', 'svg_favicon');

PNG フォールバックは、SVG ファビコンを完全にはサポートしていない Safari 用です。

プラグインを使用する方法

ファビコンを管理するプラグインはいくつかありますが、正直なところ、ほとんどのサイトではビルトインのカスタマイザーで十分です。プラグインが適しているケースは以下の通りです：

ページや投稿ごとに異なるファビコンを設定したい場合
異なるアイコンで A/B テストを行いたい場合
マルチサイトでサイトごとにファビコンを設定する場合

よく使われるプラグインには All in One Favicon や Flavor（旧 flavicon）があります。ただし、まずはカスタマイザーを試してみてください。

WordPress ブロックテーマ（フルサイト編集）

Twenty Twenty-Four や Twenty Twenty-Five のようなブロックテーマを使用している場合、手順が少し異なります：

外観 → エディター に移動する
スタイル（半円アイコン）をクリックする
サイトのグローバルスタイルに移動する
サイトアイコンの設定は引き続き 外観 → カスタマイズ → サイト基本情報 にあります

ブロックテーマでもファビコンには同じカスタマイザーを使用します。WordPress はまだこの機能をサイトエディターに移行していません。

推奨ファビコンファイル

完全な対応のために、以下のファイルを準備してください：

ファイル	サイズ	用途
`favicon.ico`	16x16, 32x32	レガシーブラウザ対応
`favicon-32x32.png`	32x32	モダンブラウザ
`apple-touch-icon.png`	180x180	iOS ホーム画面
`android-chrome-192x192.png`	192x192	Android ホーム画面
`android-chrome-512x512.png`	512x512	Android スプラッシュスクリーン
`favicon.svg`	スケーラブル	モダンブラウザ、ダークモード

WordPress カスタマイザーで 512x512 画像をアップロードすると、これらのほとんどが自動的に処理されます。SVG と ICO ファイルが必要な場合は手動で追加する必要があります。

トラブルシューティング：ファビコンが表示されない

すべてのキャッシュをクリアする

WordPress のファビコン問題は、ほぼすべてキャッシュが原因です：

ブラウザキャッシュ: Ctrl+Shift+R（Windows）または Cmd+Shift+R（Mac）でハードリフレッシュ
WordPress キャッシュ: WP Super Cache、W3 Total Cache、LiteSpeed Cache などを使用している場合はパージする
CDN キャッシュ: Cloudflare、Fastly など使用しているサービスでファビコン URL をパージする
シークレットモードで試す: キャッシュのないクリーンなセッションで開く

プラグインの競合を確認する

一部の SEO プラグインやテーマフレームワークは独自のファビコンタグを挿入します。ページソースに重複した <link rel="icon"> タグがある場合：

ページソースを表示する（Ctrl+U）
「icon」または「favicon」を検索する
重複がある場合、どのプラグインが追加しているか確認する
プラグインのファビコン機能を無効にするか、手動コードを削除する

テーマによる上書きの問題

一部のテーマ（特にプレミアムテーマ）は、カスタマイザーを上書きする独自のファビコン設定を持っています。以下を確認してください：

テーマオプション パネルのファビコン設定
テーマの header.php にハードコードされた <link rel="icon"> タグ
テーマのドキュメントでのファビコンに関する説明

トラブルシューティング：Google が間違ったファビコンを表示する

Google が検索結果のファビコンを更新するまで、数日から数週間かかることがあります。更新を早める方法をご紹介します。

Google のファビコン要件

Google は検索結果にファビコンを表示するための特定のルールを設けています：

48px の倍数であること（48x48、96x96、144x144）
正方形であること
不適切なコンテンツや NSFW コンテンツでないこと
ウェブサイトを代表するものであること（汎用アイコンは不可）

更新を早める方法

ファビコンが公開されアクセス可能であることを確認する
Google Search Console を開く
ホームページに対して URL 検査 を使用する
インデックス登録をリクエスト をクリックする
待つ — 通常 1〜2 週間かかります

トラブルシューティング：デスクトップでは表示されるがモバイルでは表示されない

モバイルブラウザはファビコンの形式に厳しい要件があります：

iOS Safari: apple-touch-icon（180x180）が必要 — 通常のファビコンはホーム画面に表示されません
Android Chrome: ホーム画面用にアイコン参照を含む manifest.json を参照します
PWA: Web アプリマニフェストに 192x192 と 512x512 の両方のアイコンを定義する必要があります

WordPress サイトに Web アプリマニフェストがある場合（一部のテーマやプラグインが追加します）、アイコンのパスが正しいことを確認してください。

マルチサイトでの注意点

WordPress マルチサイトを運営している場合、各サイトに独自のファビコンが必要です。

カスタマイザーはサイトごとに設定できるため、各サブサイトに独自のアイコンを設定できます
ネットワークレベルの設定にはデフォルトファビコンは含まれていません
ネットワーク全体のデフォルトが必要な場合は、must-use プラグイン（wp-content/mu-plugins/）の functions.php で追加してください

ベストプラクティス

大きなサイズから始める: 512x512 以上をアップロード — WordPress は縮小しますが、拡大はしません
PNG を使用する: 透明な背景は JPEG より適しています
シンプルに保つ: ファビコンは非常に小さいため、複雑なロゴは 16x16 では判読できません
複数のブラウザでテストする: Favicon.im で設定を確認する
ファビコンにバージョンを付ける: 更新時に URL に ?v=2 を追加してキャッシュを回避する

FAQ

WordPress でファビコンを追加するにはどうすればよいですか？

外観 → カスタマイズ → サイト基本情報 → サイトアイコンに移動し、512x512 の PNG 画像をアップロードして「公開」をクリックします。WordPress が必要なすべてのサイズを自動生成します。

WordPress のファビコンはどのサイズにすべきですか？

512 x 512 ピクセル以上をアップロードしてください。WordPress が 32x32、180x180 などのサイズを自動的に作成します。Google 検索結果用には 48px の倍数を使用してください。

WordPress のファビコンが表示されないのはなぜですか？

通常はキャッシュの問題です。ブラウザキャッシュ、WordPress キャッシュプラグイン、CDN キャッシュをクリアしてください。シークレットウィンドウで試してみてください。また、ファビコンタグの重複を引き起こすプラグインの競合も確認してください。

WordPress で SVG ファビコンを使用できますか？

WordPress はセキュリティ上の理由からデフォルトでは SVG アップロードをサポートしていません。functions.php のコードで手動で SVG ファビコンサポートを追加するか、SVG アップロードを有効にするプラグインを使用できます。

WordPress でライトモードとダークモード用に異なるファビコンを設定するにはどうすればよいですか？

prefers-color-scheme の CSS メディアクエリを埋め込んだ SVG ファビコンを使用します。カスタマイザーは PNG/ICO 形式のみ対応しているため、functions.php で手動で SVG ファイルを追加してください。

参考リンク

Site Icon - WordPress Developer Resources - WordPress 公式ドキュメント
Define a favicon to show in search results - Google Search Central
Favicon.im - ファビコンのテスト・検証ツール