WordPressでファビコンを設定したいけれど、「どこから変更するのか分からない」「設定したのに反映されない」と迷うことがあります。
ファビコンとは、ブラウザのタブやブックマークなどに表示される小さなアイコンのことで、WordPressでは「サイトアイコン」として設定します。
この記事では、実際のWordPress画面を使って、ファビコンの設定方法、変更・削除、反映されないときの確認ポイント、画像サイズまで初心者向けに解説します。
先に結論
Astraを使っている今回の環境では、「外観」→「カスタマイズ」→「サイト基本情報」→「サイトアイコン」の順に進むと、ファビコンを設定・変更できます。
目次
- WordPressのファビコンとは？ロゴとの違い
- WordPressでファビコンを設定する手順
- WordPressのファビコンを変更・削除する方法
- WordPressのファビコンが変わらない・反映されないときの確認ポイント
- ファビコン画像のサイズは512×512px以上の正方形が基本
- 「サイト基本情報」が見つからない場合はテーマによって設定場所が違う
- まとめ｜WordPressのファビコンはサイトアイコンから設定できる
WordPressのファビコンとは？ロゴとの違い
ファビコンは、ブラウザのタブやブックマークなどでサイトを見分けるために使われる小さなアイコンです。
WordPressでは「サイトアイコン」という名称で設定します。
一方、ロゴはサイトのヘッダーなど、ページ内でブランド名やサイト名を見せるために使う画像です。
見た目は似た役割に感じますが、ロゴとファビコンはWordPress上では別々に設定します。
初心者の場合は、サイト内に表示する大きな画像が「ロゴ」、ブラウザのタブなどに小さく表示されるものが「ファビコン」と覚えておくと分かりやすいです。
WordPressでファビコンを設定する手順
ここからは、実際のWordPress管理画面を使ってファビコンを設定する流れを紹介します。
今回使用しているテーマはAstraです。テーマによって設定場所が異なる場合については、記事後半で説明します。
手順① 「外観」→「カスタマイズ」を開く
WordPress管理画面の左メニューから「外観」を開き、「カスタマイズ」を選択します。
手順② 「サイト基本情報」を開く
カスタマイズ画面が開いたら、左側のメニューから「サイト基本情報」を選択します。
手順③ サイトアイコンの「画像を変更」を選ぶ
「サイト基本情報」を開くと、現在設定されているサイトアイコンを確認できます。
すでにファビコンが設定されている場合は、「画像を変更」を選択します。今回の実画面では、現在のサイトアイコンと「削除」「画像を変更」が表示されていることを確認できました。
手順④ ファビコンに使う画像を選ぶ
画像選択画面が開いたら、新しい画像をアップロードするか、すでにWordPressへ登録している画像をメディアライブラリから選びます。
新しい画像を使う場合は「ファイルをアップロード」→「ファイルを選択」から画像を追加できます。
画像を選択したら、画面の案内に沿ってサイトアイコンとして設定します。今回の実画面では、画像をアップロードまたはメディアライブラリから選択できるところまで確認しています。
WordPressのファビコンを変更・削除する方法
すでにファビコンを設定している場合も、同じ「サイト基本情報」から変更できます。
現在のサイトアイコンの下に表示される「画像を変更」を選べば別の画像へ差し替えられ、「削除」を選べば現在のサイトアイコンを外せます。
今回の実画面でも、「削除」と「画像を変更」の両方が表示されています。
変更するときの流れ
- 「サイト基本情報」を開く
- 「画像を変更」を選ぶ
- 新しい画像を選択する
- 設定を保存する
削除する場合は、現在のサイトアイコンを外したあと、必要に応じて新しい画像を設定してください。
WordPressのファビコンが変わらない・反映されないときの確認ポイント
ファビコンを変更しても、すぐに新しい画像へ変わらないことがあります。
ファビコンが変わらない場合は、①設定が保存されているか → ②ページを再読み込み → ③ブラウザのキャッシュ → ④キャッシュ系プラグインやCDN → ⑤別のブラウザや端末の順に確認すると、原因を切り分けやすくなります。
- WordPressのカスタマイズ画面で変更内容が保存されているか
- ブラウザを再読み込みしても古いアイコンが残っていないか
- ブラウザのキャッシュが残っていないか
- キャッシュ系プラグインやCDNを利用している場合、古いデータが残っていないか
- 別の端末やブラウザでも同じ表示になっているか
反映時間を固定で考えない
「何分待てば必ず変わる」とは決めつけない方が安全です。
表示場所やキャッシュ状況によって見え方が変わるため、設定保存の確認→再読み込み→キャッシュ確認の順で切り分けると分かりやすいです。
特にブラウザのタブだけ古いアイコンが残っている場合は、WordPress側の設定ミスとは限りません。まず別のブラウザや端末でも確認し、同じ表示ならWordPress側、違う表示ならブラウザ側のキャッシュを疑うと切り分けやすくなります。
ファビコン画像のサイズは512×512px以上の正方形が基本
WordPressでファビコンに使う画像は、正方形で用意するのが基本です。
今回の実画面では、サイトアイコンの画像について「推奨画像サイズ：512×512ピクセル」と表示されています。
また、WordPress公式でも、サイトアイコンは正方形で、少なくとも512×512ピクセルの画像を使うよう案内されています。
画像サイズの目安
- 正方形の画像を使う
- 512×512px以上を目安にする
- 小さく表示されても分かりやすいシンプルなデザインにする
細かい文字や複雑なデザインを入れると、小さく表示されたときに見えにくくなるため、できるだけシンプルな画像がおすすめです。
「サイト基本情報」が見つからない場合はテーマによって設定場所が違う
この記事で紹介した手順は、Astraを使っている実際のWordPress環境で確認したものです。
そのため、別のテーマを使っている場合は「外観」→「カスタマイズ」→「サイト基本情報」という同じ場所に設定項目がないことがあります。
テーマによって画面が違っても慌てなくてOK
ブロックテーマなどでは、WordPressのサイトエディター内にあるサイト情報の設定からサイトアイコンを変更する方法もあります。
この記事と同じ「サイト基本情報」が見つからない場合は、使用中テーマの設定画面やWordPress公式の案内を確認してください。
WordPress公式：favicon（ファビコン）の設定方法
WordPressシリーズはこちら
WordPressパターンの使い方｜作成・登録・呼び出し方法を実画面で解説
よく使うボックスやブロックを登録し、別の記事や場所で繰り返し使う方法を実画面で紹介しています。
AIブログのWordPress運用方法｜毎日記事を公開するために実践している時短術
WordPressシリーズ全体の時短運用や、実際に使っている方法をまとめています。
まとめ｜WordPressのファビコンはサイトアイコンから設定できる
この記事のまとめ
- WordPressではファビコンを「サイトアイコン」として設定する
- Astraでは「外観」→「カスタマイズ」→「サイト基本情報」から設定できる
- 変更・削除も同じサイトアイコン設定から行える
- 反映されない場合は保存・再読み込み・キャッシュを順番に確認する
- 画像は正方形で512×512px以上を目安にする
- テーマによって設定場所が違う場合がある
まずは自分のWordPressで「サイトアイコン」の設定場所を確認し、正方形の画像を1枚用意して設定してみてください。
人生逆転AIマネー
AIを味方につけて、収入の仕組みを作る。
このサイトでは、AI初心者でも実践できる副業・ブログ・SNS・収益化の方法を分かりやすく紹介しています。
▼ サイトトップページはこちら