WordPressのファビコン設定の基本|変わらない・表示されないときの対処と、Googleの公式条件・当サイトの確認結果

ブラウザで複数のタブを開いていると、タイトルの前に小さなアイコンが表示されているのに気づくはずです。これが「ファビコン」と呼ばれるものです。

小さな要素ですが、設定されていないサイトは初期状態のアイコンのままになり、他のタブに埋もれて見つけにくくなってしまいます。

この記事では、ファビコンの役割と、WordPressでの基本的な設定方法を、画像づくりのコツとあわせて解説します。当サイトのファビコンの設定と、Googleの公式の条件との比較も、紹介します。

ファビコンとは何か

ブラウザタブに表示される小さなアイコン

ファビコンは、ブラウザのタブ、ブックマークの一覧、スマートフォンのホーム画面への追加時など、さまざまな場面でサイトを表す小さなアイコンとして表示されます。

サイズは小さいものの、読者が複数のタブを開いているときに、自分のサイトをすぐに見つけてもらうための目印になります。

また、検索結果の画面に、サイト名の横にファビコンが表示されることもあります。サイトの顔として、目に触れる機会は意外と多いものです。

設定していないとどう見えるか

ファビコンを設定していないと、多くの場合ブラウザやWordPressの初期アイコンがそのまま表示されます。

他のタブと見分けがつきにくくなるだけでなく、サイト全体の完成度がやや低い印象を与えてしまうこともあります。

自分のサイトを、別のブラウザで開いてみて、タブにどんなアイコンが表示されているか、一度確認してみましょう。

WordPressでのファビコン設定方法

「サイトアイコン」機能を使う

WordPressには標準で「サイトアイコン」という設定項目があり、管理画面の「外観 > カスタマイズ > サイト基本情報」などから画像をアップロードするだけで、ファビコンとして反映されます。

正方形の画像であれば基本的に問題なく設定できますが、512×512px程度のサイズを用意しておくと、さまざまな表示サイズに対応しやすくなります。

画面の名称や場所は、WordPressやテーマのバージョンによって異なる場合があります。見つからないときは、管理画面で「サイトアイコン」を探してみましょう。

サイトのロゴやテーマカラーを活かした画像にする

ファビコンは非常に小さく表示されるため、文字を詰め込んだ複雑なデザインは避け、サイトのロゴマークや、テーマカラーを使ったシンプルな図形にするのがおすすめです。

サイト全体の配色(たとえば青系)に合わせておくと、一目でどのサイトか認識してもらいやすくなります。

作った画像は、実際に小さく縮小して、見分けがつくかを確認しておきましょう。大きな画面では分かりやすくても、小さくすると潰れてしまうことがあります。

項目	目安
画像サイズ	512×512px程度の正方形
デザイン	シンプルな図形・ロゴ、テーマカラーを活用

ファビコン設定後に確認しておきたいこと

反映されるまで時間がかかることがある

ファビコンを設定してもすぐに反映されず、ブラウザ側にキャッシュが残っていることが原因で古いアイコンのまま表示され続けることがあります。

その場合は、ブラウザのキャッシュを削除するか、シークレットモードで開き直すことで、正しく反映されているかを確認できます。

検索結果に表示されるファビコンは、反映までにさらに時間がかかることがあります。すぐに変わらなくても、慌てずに待ちましょう。

スマートフォンでの表示も確認する

パソコンのブラウザだけでなく、スマートフォンでホーム画面に追加したときのアイコン表示も、あわせて確認しておくと安心です。

端末によって表示のされ方が微妙に異なることもあるため、一度実機で確認しておく価値があります。

丸く切り抜かれる端末もあるため、画像の端に大切な部分を置かないように、余白を持たせておくと安心です。

ファビコン画像を用意するときのコツ

ファビコンは小さく表示されるため、画像づくりのコツを知っておくと、見やすく仕上がります。

ポイント	おすすめの考え方
形	正方形で、中央に大切な要素を置く
文字	入れるなら1文字程度にとどめる
色	背景とはっきり区別できる配色にする
写真	細部がつぶれるため、避ける
形式	PNGなど、一般的な画像形式にする

設定は、次の順番で進めます。

1. 512×512pxの正方形で、画像を用意する
2. 管理画面で「サイトアイコン」の設定画面を開く
3. 画像を選んで、切り抜きの範囲を調整する
4. 公開して、別のブラウザやスマホで表示を確認する

当サイトのファビコンの設定を調べた結果(実例)

ここでは、当サイト(伸びるSEO入門)のファビコンの設定を、実際に調べた結果を紹介します(2026年10月8日)。公開中のトップページのHTMLを読み取り、画像のURLを実際に開いて、確認しました。

調べた結果

項目	確認した結果
設定の方法	WordPressの「サイトアイコン」機能(2026年4月に画像をアップロード)
HTMLに出力されているタグ	3つ。通常のアイコン(32×32px・192×192px)と、iPhone用のアイコン(apple-touch-icon・180×180px)
画像の形式とサイズ	すべてPNG。ファイルの大きさは、約2.2KB(32px)・約46KB(192px)・約41KB(180px)
画像のURLの状態	3つとも、問題なく開ける(ステータス200)
/favicon.ico のURL	302で、32×32pxのPNG画像へ転送される(WordPressの自動の動き)
サイトアイコンの数	1つだけ(サイト全体で共通)

Googleの公式の条件との比較

Googleの公式ドキュメント(検索結果のファビコン)には、次のような条件があります。

Googleの条件	当サイトの状態
正方形(縦横が1対1)で、8×8px以上。48×48pxより大きいサイズを推奨	192×192pxと180×180pxがあり、条件を満たす
対応する形式は、BMP・GIF・ICO・PNG・JPEG・PPM・TIFF	PNGで、対応している
ホームページのheadの中に、linkタグで、ファビコンを指定する	linkタグが、トップページに出ている
サイトで1つ。URLを頻繁に変えない	1つで、4月から変えていない

条件は満たしていると考えられますが、公式にも、「条件を満たしても、表示されるとは限らない」と書かれています。また、反映までには、数日〜数週間かかることがあるとされています。

調べてわかったこと

当サイトは、設定の形として、Googleの条件を満たしています。サイトアイコンの機能を使うと、必要なサイズの画像と、linkタグが自動で作られるため、HTMLを手で書く必要がありません。

調べ方

1. 自分のサイトのトップページを開き、ページのソースを表示する
2. 「icon」を検索し、linkタグのURLが出ているかを見る
3. そのURLを、ブラウザで開いて、画像が表示されるかを見る

ファビコンでよくある質問

ファビコンについて、初心者の方が疑問に思いやすい点をまとめました。

ファビコンは、SEOに影響しますか?

順位に直接影響する、とは考えられていません。ただし、検索結果に表示されることがあり、サイトを見つけてもらう目印になります。読者に分かりやすいサイトにする、という観点で整えておくとよいでしょう。

設定したのに、古いアイコンのままです。どうすればよいですか?

ブラウザのキャッシュが原因の場合が多いです。シークレットモードで開いたり、キャッシュを削除したりして、確認してみましょう。検索結果では、さらに時間がかかることがあります。

当サイトのファビコンは、どのサイズで用意していますか?

サイトアイコンの機能で、1つの画像から、32px・180px・192pxなどが、自動で作られています。この記事で目安にしている「512×512pxの正方形」の元画像があれば、同じ形で、問題なく作られます。

検索結果に、自分のファビコンが出ているかは、どう確認しますか?

自分のサイトの名前で検索して、結果の左側にアイコンが出ているかを見ます。検索結果への反映には、数日〜数週間かかることがあります。反映を早めたいときは、Search Consoleで、トップページの再クロールを依頼します。

ファビコンを設定したのに、Google検索の結果に出ないのは、なぜですか?

Googleの公式ドキュメントでは、ファビコンの反映には、数日〜数週間かかることがある、と説明されています。また、ガイドラインを満たしても、表示されるとは限りません。主な条件は、ホームページのheadにlinkタグがあること、ファビコンのURLが安定していること、Googlebot-Imageがクロールできること、正方形(8×8px以上)であることです。

ブラウザのタブに、古いアイコンが残るのは、なぜですか?

ブラウザが、以前のアイコンを一時的に保存していることがあります。ページを再読み込みしたり、別のブラウザやスマホで見たりして、確認しましょう。

ファビコンでよくある失敗例は?

よくある失敗は、次の3つです。

• 文字や細かい模様を入れすぎて、小さくすると見分けがつかない
• 画像が小さすぎて、ぼやけて表示される
• 設定したあと、実際の表示を確認していない

シンプルなデザインにして、実際に確認することが、失敗を防ぐコツです。

まとめ:小さな要素だが、サイトの完成度を底上げする

地味な設定に見えますが、他のタブに埋もれず見つけてもらうための小さな工夫です。

まだ設定していない場合は、この機会にサイトアイコンを用意してみましょう。

設定するときは、次の順番がおすすめです。

1. 512×512pxの、シンプルな正方形の画像を用意する
2. 「サイトアイコン」から画像をアップロードする
3. パソコンとスマホで、表示を確認する

SEOを基礎から順番に学びたい方は、SEO入門の進め方(はじめに)と学習ステップもあわせてご覧ください。