Hara Daizo WordPressでは、ファビコンを「サイトアイコン」として標準機能から設定できます。WordPress 6.5以降は「設定」→「一般」が基本で、正方形の512×512ピクセル以上、PNG形式が公式に推奨されています。
ブラウザーや検索結果にはキャッシュがあるため、保存直後にすべての場所が同時に変わるとは限りません。この記事では画像準備、設定、確認、反映トラブルを順に説明します。
ファビコンとは？WordPressのサイトアイコンとの関係
ファビコンは、ブラウザーのタブ、ブックマーク、ホーム画面、検索結果などでサイトを識別する小さなアイコンです。WordPress管理画面では「サイトアイコン」という名称で扱います。
サイトロゴとは役割が異なります。ロゴはページ内で比較的大きく表示され、横長の文字を含められます。ファビコンは小さな正方形で表示されるため、同じ画像を縮小するだけでは読めないことがあります。
標準のサイトアイコン機能を使えば、favicon.icoを手作業でテーマへ置いたり、head要素を直接編集したりする必要はありません。
ファビコン画像のサイズ・形式・作り方
WordPress公式は、正方形で幅・高さとも512ピクセル以上、PNG形式を推奨しています。透過PNGも使えますが、ブラウザーの明るい背景と暗い背景の両方で見えるかを確認します。
作成時の基準は次のとおりです。
- 1:1の正方形にする
- 細い文字や小さな説明文を入れない
- 外周に少し余白を残す
- 明暗どちらの背景でも輪郭が分かる
- 元データを保管し、圧縮しすぎない
Google検索の公式要件では、正方形で最低8×8ピクセル、48×48ピクセルより大きい画像が推奨されています。WordPressの512×512以上を使えば、WordPress側の推奨も満たせます。メディア画像の圧縮や切り抜きは「画像サイズの基礎」で確認してください。
WordPressにファビコンを設定する方法
現在のWordPressではバージョンとテーマによって入口が異なります。まず「設定」→「一般」に「サイトアイコン」があるかを確認します。なければサイトエディターのロゴブロック、またはカスタマイザーを確認します。
画像をアップロードする前に、ファイル名、正方形、透明部分、表示権限を確認してください。設定後は変更を保存し、公開画面のheadにアイコン指定が出ているかも確認できます。サイト内に表示するロゴ自体の設定は「ロゴの設定」で分けて扱います。
サイトエディター・一般設定から設定する
WordPress 6.5以降の基本手順は次のとおりです。
- 512×512ピクセル以上の正方形PNGを用意する
- 「メディア」へ画像をアップロードする
- 「設定」→「一般」を開く
- 「サイトアイコンを選択」を押す
- 画像を選び、必要なら切り抜く
- 変更を保存する
ブロックテーマでは、サイトエディター内のサイトロゴブロックに「サイトアイコンとして使用」の設定がある場合もあります。同じ画像を使う場合は便利ですが、横長ロゴは正方形へ無理に合わせず、専用画像を用意します。
カスタマイザーから設定する
WordPress 4.3〜6.4では、標準の入口は「外観」→「カスタマイズ」→「サイト基本情報」→「サイトアイコン」です。6.5以降でも、クラシックテーマや互換性のためにこの画面が使える場合があります。
設定後は「公開」を押します。カスタマイザーの項目名が異なる場合は、テーマ公式の手順を確認してください。プラグインが独自のfavicon設定を持つ場合、標準機能と二重に出力しないよう一方へ統一します。
ファビコンを変更・削除する方法
変更するときは、現在と同じ設定画面を開き、新しい画像へ置き換えて保存します。削除は「サイトアイコンを削除」などの操作を使います。メディアライブラリから元画像を先に削除すると、別の場所で使っていた場合に影響します。
新しい画像へ変える場合、同じファイル名やURLの上書きはキャッシュの判定を難しくします。WordPressの標準選択で別添付ファイルとして登録し、古い画像は表示確認後に整理すると安全です。
削除後はブラウザーの既定アイコンへ戻ります。検索結果の表示はGoogleの再クロールと処理を待つ必要があります。
設定したファビコンを確認する場所
一か所だけで判断せず、次を確認します。
- PCブラウザーの通常タブと固定タブ
- シークレットウィンドウ
- スマホブラウザーとホーム画面追加
- ページソース内のrelがiconのlink要素
- 検索結果のサイト名付近
Google検索では1ホスト名につき1つのファビコンを扱い、ホームページと画像ファイルをクロールできる必要があります。条件を満たしても表示は保証されません。
ファビコンが変わらない・表示されない場合
最も多いのはキャッシュと設定の重複です。次の順で確認します。
- 一般設定またはカスタマイザーに選択中の画像があるか確認する
- 画像URLを直接開き、200応答で表示できるか確認する
- シークレットウィンドウや別ブラウザーで試す
- ブラウザー、キャッシュプラグイン、CDNのキャッシュを確認する
- テーマやSEOプラグインが別のicon要素を出していないか確認する
- robots.txtやアクセス制限で画像・ホームページを遮断していないか確認する
ブラウザーでは変わり、Google検索だけ古い場合は、ホームページの再クロールを待ちます。Google公式では再処理に数日から数週間かかることがあり、Search ConsoleのURL検査からホームページの再クロールをリクエストできますが、即時反映は保証されません。
見やすいファビコンを作るポイント
実際の表示は数十ピクセル程度まで縮小されます。細部ではなく輪郭で識別できる図形、頭文字、ブランドカラーを使います。
候補を48、32、16ピクセル相当に縮小し、次を見比べてください。
- 文字が潰れて別の形に見えないか
- 背景と境界が消えないか
- 余白が大きすぎて小さく見えないか
- 他のタブと並んでも識別できるか
- ブランドロゴと無関係な印象になっていないか
検索結果用だけに頻繁に画像URLを変えるのは避けます。Googleも安定したURLを要件として示しています。
よくある質問
はい。透過PNGを利用できます。ただし表示面が白・黒・テーマ色でも輪郭が見えるかを確認してください。
WordPress標準はセキュリティ上、通常のメディアアップロードでSVGを許可していません。対応プラグインで許可する場合も、信頼できるSVGだけをサニタイズし、まず推奨されるPNGを検討します。
いいえ。Googleがホームページを再クロールし、画像を処理するまで時間がかかります。要件を満たしても表示自体は保証されません。
まとめ
WordPressファビコンは、サイトアイコンとして設定します。WordPress 6.5以降は「設定」→「一般」を基本に、正方形の512×512ピクセル以上のPNGを用意してください。
反映されないときは、選択中の画像、画像URL、重複したicon指定、各層のキャッシュを順に確認します。ブラウザーと検索結果では更新時期が異なるため、設定ミスと再クロール待ちを分けて判断することが重要です。