WordPressファビコンの設定方法｜表示されない原因と画像サイズ・変更手順を初心者向けに解説
はじめに
WordPressサイトを運営するなら、ファビコンの設定は小さく見えて重要な作業です。ファビコンとは、ブラウザのタブやブックマーク、スマホのホーム画面、検索結果などに表示される小さなアイコンのことです。
たとえば、複数のタブを開いているときに、サイト名よりも先に小さなアイコンでサイトを判別することがあります。このアイコンが未設定のままだと、サイトの印象が弱くなったり、初期状態のアイコンが表示されたりして、ユーザーに覚えてもらいにくくなります。
WordPressでは、ファビコンは「サイトアイコン」という名称で設定できます。画像を用意して管理画面からアップロードするだけなので、初心者でも比較的簡単に設定できます。
この記事では、WordPressファビコンの基本、適した画像サイズ、設定方法、変更手順、表示されないときの原因と対処法まで、初心者向けにわかりやすく解説します。
1. WordPressのファビコンとは？初心者向けに基本を解説
WordPressのファビコンとは、サイトを識別するために使われる小さなアイコンです。一般的には、サイトロゴやブランドマークを簡略化したデザインが使われます。
ファビコンはとても小さく表示されるため、細かい文字や複雑な装飾よりも、シンプルで見やすいデザインが向いています。サイト名の頭文字、ブランドカラーを使ったマーク、ロゴの一部などを使うと、視認性が高くなります。
WordPressでは、専用の画像ファイルをアップロードすることで、ブラウザや端末に適したサイズのアイコンとして利用できます。
1-1. ファビコンが表示される場所
ファビコンは、主に以下のような場所に表示されます。
ブラウザのタブ、ブックマーク一覧、履歴画面、スマートフォンのホーム画面、検索結果、アプリ内ブラウザなどです。
特にブラウザのタブでは、ページタイトルの左側に表示されます。ユーザーが複数のサイトを同時に開いている場合、ファビコンがあることで自分のサイトを見つけてもらいやすくなります。
また、Google検索結果にもサイトのアイコンが表示されることがあります。検索結果での見た目にも関わるため、ファビコンはSEOというよりも、クリック前の印象やブランド認知に関係する要素といえます。Googleは検索結果用のファビコンについて、正方形であること、一定以上のサイズであること、URLが安定していることなどをガイドラインで示しています。
1-2. WordPressでは「サイトアイコン」と呼ばれる
WordPressの管理画面では、ファビコンは「サイトアイコン」と呼ばれます。
そのため、設定画面で「ファビコン」という項目を探しても見つからない場合があります。WordPressでファビコンを設定したいときは、「サイトアイコン」という名称を探すのがポイントです。
WordPress公式ドキュメントでも、サイトアイコン機能を使えば、favicon.icoファイルを自分で用意したり、テーマファイルを編集したりしなくても設定できると説明されています。
1-3. ファビコンを設定するメリット
ファビコンを設定するメリットは、サイトの印象を整えられることです。
ファビコンがあると、ユーザーはブラウザのタブやブックマークの中からあなたのサイトを見つけやすくなります。小さなアイコンでも、何度も目にすることでサイト名やブランドイメージが記憶に残りやすくなります。
また、ファビコンが未設定のサイトは、初期状態のアイコンや空白のように表示されることがあります。その場合、サイトが未完成に見えたり、信頼感が下がったりする可能性があります。
個人ブログ、企業サイト、アフィリエイトサイト、ECサイトなど、どのようなWordPressサイトでも、ファビコンは設定しておくのがおすすめです。
1-4. ロゴ・サイトアイコン・OGP画像との違い
ファビコンと似たものに、ロゴ、サイトアイコン、OGP画像があります。
ロゴは、ヘッダーやフッターなどサイト内で大きく表示されるブランド画像です。会社名やサービス名、シンボルマークを含むことが多く、横長のデザインもよく使われます。
サイトアイコンは、WordPress上でファビコンとして扱われる画像です。ブラウザのタブやブックマークなどに小さく表示されるため、正方形でシンプルな画像が適しています。
OGP画像は、SNSで記事がシェアされたときに表示される画像です。記事タイトルやアイキャッチ画像として使われることが多く、横長サイズが一般的です。
つまり、ロゴはサイト内のブランド表示、サイトアイコンは小さな識別アイコン、OGP画像はSNSでの見え方を整える画像です。それぞれ役割が違うため、同じ画像を使う場合でも、表示サイズに合わせて調整することが大切です。
2. WordPressファビコンに適した画像サイズ・形式
WordPressファビコンをきれいに表示するには、画像サイズや形式を適切に選ぶ必要があります。
サイズが小さすぎるとぼやけて見えたり、比率が合わないと切り抜き時に不自然になったりします。反対に、複雑すぎる画像を使うと、小さく表示されたときに何のアイコンかわかりにくくなります。
2-1. 推奨サイズは512×512px
WordPressのファビコン画像は、512×512px以上の正方形画像を用意するのがおすすめです。
WordPress公式ドキュメントでは、カスタマイズ画面からサイトアイコンを設定する際、幅と高さが少なくとも512pxの正方形画像を指定すると説明されています。
512×512pxで作成しておけば、ブラウザのタブだけでなく、スマートフォンや高解像度ディスプレイでも比較的きれいに表示されやすくなります。
2-2. 正方形の画像を用意する理由
ファビコンは、基本的に正方形で表示されます。
横長や縦長の画像を使うと、WordPress側で切り抜きが必要になり、ロゴの一部が欠けたり、余白が不自然になったりすることがあります。
最初から512×512pxの正方形キャンバスで作成しておけば、切り抜き時の失敗を減らせます。ロゴを使う場合も、正方形の中央にロゴマークを配置し、上下左右に少し余白を入れると見やすくなります。
2-3. PNG・ICO・JPEGの違い
ファビコン画像には、PNG、ICO、JPEGなどの形式が使われます。
WordPressで設定する場合は、PNG形式が扱いやすくおすすめです。PNGは画質が劣化しにくく、背景を透過できるため、アイコン用途に向いています。
ICO形式は、昔からファビコンで使われてきた形式です。1つのファイルに複数サイズのアイコンを含められる点が特徴ですが、WordPressのサイトアイコン機能を使う場合、初心者が無理にICOファイルを用意する必要はありません。
JPEGは写真向きの形式です。背景透過ができないため、ロゴやアイコンにはやや不向きなケースがあります。ただし、背景付きのシンプルな正方形画像であれば使用できます。
2-4. 透過背景にしたほうがよいケース
背景を透明にしたい場合は、PNG形式で透過背景のファビコンを作成しましょう。
たとえば、丸いロゴマークや文字だけのアイコンを使う場合、背景を透明にすると、ブラウザや端末の背景になじみやすくなります。
一方で、白いロゴを透明背景にすると、白背景の画面では見えにくくなることがあります。その場合は、ブランドカラーの背景をつけたり、ロゴの周囲に色を入れたりして、視認性を確保しましょう。
2-5. 小さく表示されても見やすいデザインのポイント
ファビコンは非常に小さく表示されるため、細かいデザインはつぶれやすくなります。
見やすいファビコンにするには、文字数を減らす、線を太めにする、色数を絞る、余白を確保する、コントラストを強くすることが大切です。
サイト名をすべて入れるよりも、頭文字1文字や2文字に絞ったほうが見やすい場合があります。ロゴをそのまま縮小するのではなく、ファビコン用に簡略化したデザインを作るのがおすすめです。
3. WordPressファビコンを設定する前の準備
WordPressでファビコンを設定する前に、画像を用意しておきましょう。
あとから何度でも変更できますが、最初にサイズやデザインを整えておくと、表示崩れや反映トラブルを減らせます。
3-1. ファビコン画像を作成する
まずは、512×512pxの正方形画像を作成します。
背景色、ロゴ、文字、アイコンなどを決め、サイトの雰囲気に合うデザインにしましょう。企業サイトならブランドカラーやロゴマーク、個人ブログならブログ名の頭文字やテーマに合うシンボルを使うとわかりやすくなります。
完成したら、PNG形式で保存するのがおすすめです。透過背景を使う場合もPNGを選びましょう。
3-2. ロゴをそのまま使うときの注意点
すでにサイトロゴがある場合、そのロゴをファビコンに使いたいと考える人も多いでしょう。
ただし、横長ロゴをそのまま縮小すると、小さく表示されたときに文字が読めなくなることがあります。特に会社名やブログ名が長い場合、ブラウザタブ上ではほとんど判別できません。
ロゴを使う場合は、シンボル部分だけを切り出す、頭文字だけにする、正方形の中央に配置するなど、ファビコン用に調整しましょう。
3-3. Canvaなどの無料ツールで作る方法
ファビコンは、Canvaなどの無料デザインツールでも作成できます。
作成する際は、カスタムサイズで512×512pxを指定し、正方形のキャンバスを用意します。背景色を設定し、文字やアイコンを中央に配置すれば、簡単にファビコン画像を作れます。
デザインに迷ったら、サイト名の頭文字を大きく配置し、背景にブランドカラーを使うだけでも十分です。重要なのは、凝ったデザインにすることではなく、小さく表示されても認識しやすいことです。
3-4. ファイル名をわかりやすく整える
ファビコン画像のファイル名は、わかりやすく整えておきましょう。
たとえば、「favicon.png」「site-icon.png」「blog-icon.png」などがおすすめです。日本語ファイル名や記号が多いファイル名は、環境によって扱いにくくなることがあるため、英数字とハイフンでシンプルにまとめると安心です。
ファイル名を整理しておくと、メディアライブラリ内で探しやすくなり、後から変更するときにも管理しやすくなります。
3-5. 画像を圧縮して軽量化する
ファビコン画像は小さな画像ですが、必要以上にファイルサイズが大きい場合は圧縮しておきましょう。
TinyPNGなどの画像圧縮ツールや、WordPressの画像最適化プラグインを使うと、画質を大きく落とさずに軽量化できます。
ただし、圧縮しすぎると輪郭がぼやけたり、色がにじんだりすることがあります。圧縮後は、画像がきれいに見えるか確認してからアップロードしましょう。
4. WordPressファビコンの設定方法
WordPressファビコンは、管理画面から簡単に設定できます。
ここでは、一般的なクラシックテーマやカスタマイザーを利用できるテーマでの設定方法を解説します。
4-1. 管理画面にログインする
まず、WordPressの管理画面にログインします。
通常は、サイトURLの末尾に「/wp-admin」を付けるとログイン画面にアクセスできます。ユーザー名またはメールアドレス、パスワードを入力して管理画面に入りましょう。
ログイン後、左側のメニューから設定を進めます。
4-2. 「外観」から「カスタマイズ」を開く
管理画面の左メニューから「外観」を選び、「カスタマイズ」をクリックします。
カスタマイズ画面では、サイトタイトル、キャッチフレーズ、ロゴ、メニュー、ウィジェットなど、テーマに関するさまざまな設定を変更できます。
使用しているテーマによって表示項目は異なりますが、多くのテーマでは「サイト基本情報」または「サイトアイデンティティ」という項目からファビコンを設定できます。
4-3. 「サイト基本情報」からサイトアイコンを選択する
カスタマイズ画面を開いたら、「サイト基本情報」または「サイトアイデンティティ」をクリックします。
その中に「サイトアイコン」という項目があります。これがWordPressにおけるファビコンの設定項目です。
「サイトアイコンを選択」や「画像を選択」といったボタンをクリックして、画像のアップロード画面へ進みます。
4-4. ファビコン画像をアップロードする
メディアライブラリが開いたら、用意しておいたファビコン画像をアップロードします。
すでに画像をアップロード済みの場合は、メディアライブラリから選択できます。新しくアップロードする場合は、パソコン内の画像ファイルを選んで追加しましょう。
画像を選択したら、代替テキストやタイトルを必要に応じて入力します。ファビコンの場合、SEO目的で長い説明を入れる必要はありませんが、管理しやすい名前にしておくと便利です。
4-5. 画像を切り抜いて調整する
画像を選択すると、WordPressで切り抜き画面が表示されることがあります。
正方形画像を用意していれば、基本的には大きな調整は不要です。ロゴや文字が中央に収まっているか、端が切れていないかを確認しましょう。
もし横長や縦長の画像を使っている場合は、必要な部分だけが表示されるように切り抜き範囲を調整します。ただし、できれば最初から正方形画像を用意するほうがきれいに仕上がります。
4-6. 公開して表示を確認する
設定が完了したら、カスタマイズ画面の「公開」ボタンをクリックします。
公開後、サイトを開いてブラウザタブにファビコンが表示されているか確認しましょう。すぐに変わらない場合は、ブラウザキャッシュが残っている可能性があります。
その場合は、シークレットウィンドウで開く、別のブラウザで確認する、キャッシュを削除するなどの方法を試してください。
5. ブロックテーマでファビコンを設定・変更する方法
WordPressでは、ブロックテーマを使っている場合、従来の「カスタマイズ」メニューが表示されないことがあります。
ブロックテーマでは「外観」から「エディター」を開き、サイト全体のデザインを編集する仕組みになっています。そのため、ファビコンの設定場所がテーマによってわかりにくい場合があります。
5-1. 「外観」から「エディター」を開く
ブロックテーマを使用している場合は、管理画面の左メニューから「外観」へ進み、「エディター」をクリックします。
エディターでは、テンプレートやパターン、ヘッダー、フッターなどを編集できます。サイトロゴやサイトアイコンに関する設定も、この画面から確認できる場合があります。
使用しているテーマによって画面構成が異なるため、まずは「外観」内に「カスタマイズ」があるか、「エディター」があるかを確認しましょう。
5-2. サイトロゴ・サイトアイコン関連の設定を確認する
ブロックテーマでは、ヘッダー部分に「サイトロゴ」ブロックが配置されていることがあります。
サイトロゴブロックを選択すると、サイドバーに関連設定が表示され、そこからサイトアイコン設定へ移動できる場合があります。WordPressの学習コンテンツでも、サイトロゴブロックの設定パネルからサイトアイコン設定に進める例が紹介されています。
「サイトアイコン設定」「サイト基本情報」「サイトアイデンティティ」などの項目を探してみましょう。
5-3. テーマによって設定場所が異なる場合の探し方
WordPressのテーマによって、ファビコン設定の場所は少し異なります。
見つからない場合は、管理画面の「外観」内を確認し、「カスタマイズ」「エディター」「テーマ設定」「サイト基本情報」などの項目を順番に見ていきましょう。
また、有料テーマや国産テーマでは、独自のテーマ設定画面にサイトアイコン項目が用意されていることがあります。その場合は、テーマの公式マニュアルも確認するとスムーズです。
5-4. カスタマイザーが表示されないときの対処法
「外観」に「カスタマイズ」が表示されない場合は、ブロックテーマを使用している可能性があります。
その場合でも、直接カスタマイザーにアクセスできることがあります。管理画面にログインした状態で、「サイトURL/wp-admin/customize.php」にアクセスすると、カスタマイザー画面が開ける場合があります。
ただし、テーマによってはカスタマイザーで編集できる項目が制限されていることもあります。うまく設定できない場合は、テーマの設定画面、サイトエディター、プラグインの利用を検討しましょう。
6. WordPressファビコンを変更する手順
一度設定したWordPressファビコンは、後から変更できます。
サイトのリニューアル、ロゴ変更、ブランドカラー変更などがあった場合は、ファビコンもあわせて見直しましょう。
6-1. 既存のファビコンを削除・変更する
ファビコンを変更するには、現在設定されているサイトアイコンを削除または変更します。
カスタマイザーを使う場合は、「外観」から「カスタマイズ」を開き、「サイト基本情報」へ進みます。サイトアイコンの項目に、現在の画像が表示されているはずです。
そこから「削除」「画像を変更」「画像を選択」などをクリックして、新しい画像に差し替えます。
6-2. 新しい画像をアップロードする
新しいファビコン画像を用意したら、メディアライブラリにアップロードします。
このときも、512×512px以上の正方形画像を使うのがおすすめです。古い画像と似たファイル名にすると混同しやすいため、「site-icon-2026.png」のように、変更時期やバージョンがわかる名前にしておくと管理しやすくなります。
画像を選択したら、必要に応じて切り抜きを調整し、公開します。
6-3. 変更後にブラウザで確認する
ファビコンを変更したら、実際にサイトを開いて確認しましょう。
ブラウザタブに新しいファビコンが表示されているか、ブックマークではどう見えるか、スマートフォンでは問題ないかを確認します。
すぐに変わらない場合でも、設定に失敗しているとは限りません。ファビコンはブラウザにキャッシュされやすいため、古い画像が残って表示されることがあります。
6-4. スマホ表示や検索結果での反映を確認する
ファビコンは、スマートフォンのブラウザや検索結果でも表示されることがあります。
スマホで確認する場合は、SafariやChromeなど複数のブラウザで見てみましょう。ホーム画面に追加した場合のアイコン表示も確認しておくと安心です。
Google検索結果のファビコンは、サイト側で変更しても即時に反映されるとは限りません。Googleがページを再クロールし、ファビコンを認識するまで待つ必要があります。
6-5. 変更が反映されるまでの時間の目安
WordPress上の表示は、キャッシュがなければ比較的すぐ反映されます。
一方、ブラウザ、キャッシュプラグイン、CDN、サーバーキャッシュ、検索エンジン側の反映には時間がかかる場合があります。
ブラウザタブで古いファビコンが見える場合は、まずキャッシュ削除を試しましょう。Google検索結果に反映されない場合は、数日からそれ以上かかることもあるため、Search Consoleで再クロールを依頼しながら様子を見るのがおすすめです。
7. WordPressファビコンが表示されない原因と対処法
WordPressでファビコンを設定したのに表示されない場合、いくつかの原因が考えられます。
多くの場合、設定ミスよりもキャッシュが原因です。ただし、画像サイズ、テーマ、プラグイン、HTMLタグの重複などが影響していることもあります。
7-1. ブラウザキャッシュが残っている
もっとも多い原因は、ブラウザキャッシュです。
ファビコンはブラウザに強くキャッシュされることがあり、変更後もしばらく古いアイコンが表示される場合があります。
対処法としては、シークレットウィンドウで確認する、ブラウザのキャッシュを削除する、別のブラウザで開く、スマートフォンから確認するなどがあります。
7-2. WordPressのキャッシュプラグインが影響している
キャッシュプラグインを利用している場合、古いファビコン情報が残っている可能性があります。
WP Rocket、LiteSpeed Cache、W3 Total Cache、WP Super Cacheなどを使っている場合は、プラグインの設定画面からキャッシュを削除しましょう。
キャッシュ削除後、ページを再読み込みして表示を確認します。必要に応じて、CSSやHTMLの最適化機能も一時的に無効化して確認すると原因を切り分けやすくなります。
7-3. CDNやサーバーキャッシュが残っている
CloudflareなどのCDNや、レンタルサーバー側のキャッシュ機能を使っている場合、そこに古い情報が残っていることがあります。
WordPress側でファビコンを変更しても、CDNが古い画像を配信していると、ユーザーには以前のファビコンが表示され続けます。
この場合は、CDNのキャッシュ削除、サーバーキャッシュのクリア、ブラウザキャッシュの削除を順番に行いましょう。
7-4. 画像サイズや形式が適切でない
ファビコン画像のサイズや形式が適切でない場合、うまく表示されないことがあります。
WordPressでは512×512px以上の正方形画像が推奨されています。小さすぎる画像や、極端な縦長・横長画像は避けましょう。
また、画像ファイルが破損している、拡張子と実際の形式が一致していない、ファイル名に特殊文字が多いといった場合も、表示トラブルにつながることがあります。
7-5. テーマ側の設定が上書きしている
テーマによっては、独自のファビコン設定機能を持っている場合があります。
WordPress標準のサイトアイコンを設定しても、テーマ側の設定が優先されていると、別のファビコンが表示されることがあります。
特に有料テーマや高機能テーマでは、「テーマオプション」「基本設定」「ロゴ設定」などの中にファビコン項目が用意されていることがあります。テーマ独自の設定画面も確認しましょう。
7-6. プラグインがファビコン出力を妨げている
一部のプラグインが、HTMLのhead内に出力されるファビコン関連タグに影響している場合があります。
SEOプラグイン、表示高速化プラグイン、ヘッダー管理プラグイン、PWA関連プラグインなどを使っている場合は、ファビコン関連の設定がないか確認しましょう。
原因がわからない場合は、プラグインを一時的に停止して確認する方法もあります。ただし、本番サイトで作業する場合は、事前にバックアップを取ってから行いましょう。
7-7. HTML内に古いfaviconタグが残っている
過去にテーマファイルへ直接faviconタグを追加したことがある場合、古いタグが残っている可能性があります。
HTMLのhead内に、古いfavicon.icoや古い画像URLが指定されていると、WordPressのサイトアイコンよりもそちらが読み込まれる場合があります。
ページソースを確認し、「favicon」「icon」「site-icon」などの文字列を検索して、どの画像が指定されているか確認しましょう。
7-8. Google検索結果に反映されない
サイト上ではファビコンが表示されているのに、Google検索結果だけ反映されないことがあります。
Google検索結果にファビコンを表示するには、Googleがファビコンをクロールできる必要があります。また、Googleはファビコンについて、正方形、クロール可能なURL、安定したURLなどの条件を示しています。
検索結果に反映されない場合は、Search ConsoleでトップページのURL検査を行い、再クロールを依頼しましょう。ただし、依頼後すぐに変わるとは限らないため、一定期間待つことも必要です。
8. ファビコンが反映されないときの確認手順
ファビコンが反映されないときは、やみくもに設定を変更するのではなく、順番に原因を切り分けることが大切です。
以下の手順で確認すると、どこに問題があるか見つけやすくなります。
8-1. シークレットウィンドウで確認する
まずは、シークレットウィンドウやプライベートブラウズでサイトを開いてみましょう。
通常のブラウザ画面では古いキャッシュが残っていても、シークレットウィンドウでは新しい状態を確認できる場合があります。
シークレットウィンドウで新しいファビコンが表示されるなら、WordPressの設定自体はできており、通常ブラウザのキャッシュが原因である可能性が高いです。
8-2. 別のブラウザや端末で確認する
次に、別のブラウザや別の端末で確認します。
たとえば、普段Chromeを使っているならSafariやFirefoxで確認します。パソコンで反映されない場合は、スマートフォンからも見てみましょう。
別の環境では表示される場合、特定のブラウザや端末にキャッシュが残っている可能性があります。
8-3. ブラウザキャッシュを削除する
シークレットウィンドウや別ブラウザで表示されるのに、普段のブラウザで表示されない場合は、ブラウザキャッシュを削除します。
Chromeであれば、閲覧履歴データの削除からキャッシュされた画像とファイルを削除できます。削除後、サイトを再読み込みして確認しましょう。
ファビコンだけがなかなか変わらない場合は、ブックマークを削除して登録し直すと改善することもあります。
8-4. キャッシュプラグインのキャッシュを削除する
WordPressにキャッシュプラグインを入れている場合は、プラグイン側のキャッシュを削除します。
管理バーやプラグイン設定画面に「キャッシュを削除」「Purge Cache」「Clear Cache」などのボタンがあることが多いです。
削除後は、ログアウト状態やシークレットウィンドウで確認すると、訪問者に近い状態で表示を確認できます。
8-5. CDN・サーバー側のキャッシュを削除する
CDNやサーバーキャッシュを使っている場合は、そちらのキャッシュも削除します。
Cloudflareを使っている場合は、Cloudflareの管理画面からキャッシュをパージします。レンタルサーバーの高速化機能を使っている場合は、サーバー管理画面からキャッシュ削除を行います。
WordPress、CDN、サーバー、ブラウザのどこかに古い情報が残っていると、ファビコンの反映が遅れることがあります。
8-6. ページソースでfaviconのURLを確認する
サイトを開いた状態でページソースを表示し、「favicon」や「icon」で検索します。
そこに表示されている画像URLが、新しく設定したファビコンになっているか確認しましょう。古い画像URLが残っている場合は、テーマ、プラグイン、キャッシュのいずれかが影響している可能性があります。
画像URLを直接ブラウザで開き、正しい画像が表示されるかも確認してください。
8-7. Google Search Consoleで再クロールを依頼する
Google検索結果のファビコンが変わらない場合は、Google Search Consoleを使います。
URL検査ツールでトップページを検査し、「インデックス登録をリクエスト」から再クロールを依頼します。
ただし、再クロールを依頼しても即時反映されるとは限りません。サイト上で正しく設定されていることを確認したうえで、Google側の更新を待ちましょう。
9. プラグインやコードでファビコンを設定する方法
通常は、WordPress標準のサイトアイコン機能でファビコンを設定するのが簡単です。
ただし、テーマの仕様や特殊な運用によっては、プラグインやコードで設定したほうがよい場合もあります。
9-1. プラグインを使うべきケース
プラグインを使うべきケースは、標準機能でうまく設定できない場合や、複数デバイス向けのアイコンを細かく管理したい場合です。
たとえば、通常のファビコンだけでなく、Apple Touch Icon、Android用アイコン、PWA用アイコンなどをまとめて管理したい場合は、専用プラグインが役立ちます。
また、テーマ側の設定が複雑で、どこから変更すればよいかわからない場合にも、プラグインを使うことで簡単に設定できることがあります。
9-2. おすすめのファビコン設定プラグイン
ファビコン設定でよく使われるプラグインには、Favicon by RealFaviconGeneratorなどがあります。
このようなプラグインを使うと、さまざまな端末やブラウザ向けのアイコンを生成・設定しやすくなります。
ただし、現在のWordPressでは標準でサイトアイコンを設定できるため、単純にブラウザタブ用のファビコンを設定したいだけなら、プラグインは必須ではありません。
プラグインを増やしすぎると、管理が複雑になったり、表示速度に影響したりする場合があります。必要な場合だけ導入しましょう。
9-3. テーマファイルにコードを追加する方法
テーマファイルに直接コードを追加して、ファビコンを指定する方法もあります。
たとえば、head内に以下のようなタグを追加する方法です。
HTML<link rel="icon" href="https://example.com/favicon.png" type="image/png">
ただし、初心者にはあまりおすすめしません。テーマファイルを直接編集すると、テーマ更新時に変更内容が消えたり、記述ミスでサイト表示に影響したりする可能性があるためです。
標準機能で設定できる場合は、管理画面から設定するほうが安全です。
9-4. 子テーマを使うべき理由
コードを追加する場合は、親テーマではなく子テーマを使うのがおすすめです。
親テーマを直接編集すると、テーマをアップデートしたときに編集内容が上書きされることがあります。子テーマを使えば、親テーマの更新を受けながら、独自のカスタマイズを維持しやすくなります。
ファビコンのためだけに子テーマを作る必要はない場合もありますが、すでにテーマファイルを編集しているサイトでは、子テーマ運用を検討しましょう。
9-5. コード編集時の注意点
コードでファビコンを設定する場合は、必ずバックアップを取ってから作業しましょう。
また、同じhead内に複数のfaviconタグが重複していると、どれが優先されるかわかりにくくなります。古いタグが残っていないか確認し、不要な記述は整理しましょう。
作業後は、ページソースで正しいファビコンURLが出力されているか確認します。さらに、キャッシュを削除して、複数のブラウザで表示をチェックしましょう。
10. WordPressファビコン設定でよくある質問
最後に、WordPressファビコン設定でよくある質問に答えます。
初心者がつまずきやすいポイントを確認しておきましょう。
10-1. ファビコンは必ず設定したほうがいい？
必須ではありませんが、設定したほうがよいです。
ファビコンがあると、ブラウザタブやブックマークでサイトを見つけやすくなり、サイトの印象も整います。企業サイトやブログを本格的に運営するなら、公開前または公開初期に設定しておくのがおすすめです。
10-2. 512×512px以外の画像でも設定できる？
画像によっては設定できますが、WordPressでは512×512px以上の正方形画像を用意するのがおすすめです。
小さい画像でも使える場合はありますが、拡大表示されたときにぼやけたり、端末によってきれいに表示されなかったりする可能性があります。
最初から512×512pxで作っておくと、失敗が少なくなります。
10-3. スマホでファビコンが表示されないのはなぜ？
スマホで表示されない場合、ブラウザキャッシュ、端末側のキャッシュ、ホーム画面アイコンの再登録が必要なケースがあります。
一度ホーム画面に追加したアイコンは、ファビコンを変更してもすぐに更新されないことがあります。その場合は、ホーム画面のショートカットを削除し、再度追加して確認しましょう。
また、PWA機能やテーマ独自のアイコン設定が影響している場合もあります。
10-4. 検索結果のファビコンはいつ変わる？
Google検索結果のファビコンは、サイト上で変更してもすぐには変わらないことがあります。
Googleがサイトを再クロールし、ファビコンを認識してから反映されます。Googleは、検索結果用ファビコンについて、正方形であることやクロール可能であることなどの条件を示しています。
早く確認したい場合は、Google Search ConsoleでトップページのURL検査を行い、再クロールを依頼しましょう。
10-5. WordPress.comでも同じ方法で設定できる？
WordPress.comでもサイトアイコンを設定できますが、管理画面の構成や利用できる機能はプランやテーマによって異なる場合があります。
WordPress.orgで運営している一般的なレンタルサーバー型WordPressとは、設定画面の場所が少し違うことがあります。
見つからない場合は、WordPress.comの管理画面で「サイトアイコン」「ロゴ」「外観」「カスタマイズ」などの項目を確認しましょう。
10-6. ファビコンとサイトロゴは同じ画像でよい？
同じ画像を使っても問題ありませんが、表示サイズに合わせた調整が必要です。
横長のサイトロゴをそのままファビコンにすると、小さく表示されたときに文字が読めなくなることがあります。
おすすめは、サイトロゴのシンボル部分だけを切り出す方法です。ロゴ全体ではなく、頭文字やマークだけを使うと、小さなファビコンでも見やすくなります。
まとめ
WordPressのファビコンは、管理画面では「サイトアイコン」として設定できます。
基本的な設定方法は、管理画面にログインし、「外観」から「カスタマイズ」を開き、「サイト基本情報」または「サイトアイデンティティ」からサイトアイコンを選択する流れです。ブロックテーマを使っている場合は、「外観」から「エディター」を開き、サイトロゴやサイトアイコン関連の設定を確認しましょう。
画像は、512×512px以上の正方形画像を用意するのがおすすめです。形式はPNGが扱いやすく、透過背景にも対応できます。ロゴをそのまま使う場合は、小さく表示されても見やすいように、シンボル部分だけを使う、文字数を減らす、余白を入れるなどの工夫をしましょう。
ファビコンが表示されない場合は、ブラウザキャッシュ、WordPressのキャッシュプラグイン、CDN、サーバーキャッシュ、テーマ設定、プラグイン、古いfaviconタグなどを順番に確認します。Google検索結果に反映されない場合は、Search Consoleで再クロールを依頼し、反映を待ちましょう。
ファビコンは小さな要素ですが、サイトの印象や認知度に関わる大切なパーツです。WordPressサイトを運営するなら、早めに設定して、ユーザーに覚えてもらいやすいサイトに整えておきましょう。