favicon（ファビコン）とは、ブラウザのタブやブックマーク、そしてスマートフォンの検索結果に表示される小さなアイコンのことです。設定していないサイトは、検索結果に地球儀や白紙のアイコンが表示され、それだけで「管理されていないサイト」という印象を与えます。この記事では、faviconが必要な理由と、WordPressでの設定手順、実務で起きがちなトラブルの対処法を解説します。
faviconは未設定だと検索結果で信頼性を落とす
faviconは装飾ではありません。スマートフォンのGoogle検索結果では、各サイトの左側にfaviconが表示されます。設定していないサイトは灰色の地球儀アイコンになり、周囲のサイトと並んだときに明らかに見劣りします。
スマホ検索結果でfaviconは必ず視界に入る
Googleはモバイル検索結果にサイトのfaviconとサイト名を表示する仕様を採用しています。検索結果の一覧でユーザーが最初に認識する視覚情報がfaviconであり、クリックされるかどうかの一瞬の判断に影響します（出典 Google 検索セントラル Google 検索でのファビコンの定義）。
タブを複数開いたときの識別に使われる
取引先や見込み客が、複数社のサイトを同時にタブで開いて比較検討する場面は日常的にあります。faviconがないサイトはタブ上で区別できず、比較の途中で閉じられます。（見た目の話に聞こえますが、比較検討中に閉じられるのは実損です）
ブックマークやホーム画面追加でも表示される
ユーザーがサイトをブックマークしたり、スマートフォンのホーム画面に追加した際にもfaviconが使われます。リピート訪問を期待するサイトほど、設定の有無が効いてきます。
faviconに必要な画像仕様は正方形と最低48ピクセル
faviconの画像には満たすべき条件があります。ここを外すと、設定したつもりでも表示されません。
| 項目 | 推奨仕様 | 備考 |
|---|---|---|
| 形状 | 正方形 | 縦横比が異なると表示が崩れる |
| サイズ | 512×512ピクセル | 大きめに用意すれば各サイズに自動縮小される |
| 最低サイズ | 48×48ピクセル以上 | 48の倍数が推奨される |
| ファイル形式 | PNG（透過可） | ICO・SVG・JPGも利用可能 |
| ファイルサイズ | 100KB以下 | 小さい画像なので通常は問題にならない |
| デザイン | ロゴマークまたは頭文字1〜2字 | 社名フルネームは潰れて読めない |
会社のロゴをそのまま使うと縮小時に潰れる
最も多い失敗が、横長の会社ロゴをそのままfaviconにすることです。48ピクセルの正方形に押し込まれると、文字は完全に判読不能になります。ロゴのシンボル部分だけを切り出すか、社名の頭文字1〜2文字を使うのが正解です。
背景を透過にするか塗りつぶすかは表示環境で決める
背景を透過したPNGは、ブラウザのダークモードで背景と同化して見えなくなることがあります。確実に視認させたい場合は、コーポレートカラーで背景を塗りつぶした正方形にしてください。
写真をfaviconにするのは避けてください。48ピクセルに縮小すると何が写っているか判別できず、色の塊にしか見えません。
WordPressのfavicon設定は管理画面から数分で完了する
WordPressでは「サイトアイコン」という名称でfaviconを設定します。FTPもコード編集も不要です。
カスタマイザーから設定する手順
- WordPress管理画面にログインする
- 左メニューの「外観」から「カスタマイズ」を開く
- 「サイト基本情報」を選ぶ
- 「サイトアイコン」の「サイトアイコンを選択」をクリックする
- 用意した正方形画像をアップロードして選択する
- 切り抜き範囲を確認して「画像を切り抜く」を押す
- 「公開」ボタンを押して保存する
使用しているテーマによっては、カスタマイザーではなくテーマ独自の設定画面にサイトアイコンの項目がある場合があります。ブロックテーマを使っている場合は「設定」から「一般」にサイトアイコンの項目が置かれていることもあります。
設定後に反映されない場合はキャッシュを疑う
faviconはブラウザに強くキャッシュされるため、設定直後は変わって見えないことがよくあります。以下の順で確認してください。
- ブラウザのスーパーリロード（Windowsは Ctrl と F5 の同時押し）を試す
- シークレットウィンドウでサイトを開いて確認する
- キャッシュ系プラグインを使っている場合はキャッシュを削除する
- サーバー側のキャッシュ機能を使っている場合はそちらも削除する
- スマートフォンの実機でも確認する
検索結果への反映には数日から数週間かかる
サイトに設定してもGoogleの検索結果にすぐ反映されるとは限りません。Googleがサイトを再クロールしたタイミングで更新されるため、数日から数週間かかります。設定した翌日に反映されていなくても、それは正常な挙動です。
faviconが表示されない典型的な原因は5つに絞れる
設定したのに表示されない場合、原因はほぼ以下のいずれかです。
| 原因 | 確認方法 | 対処 |
|---|---|---|
| ブラウザのキャッシュ | シークレットウィンドウで確認 | スーパーリロードまたはキャッシュ削除 |
| キャッシュプラグイン | プラグイン一覧でキャッシュ系の有無を確認 | プラグインのキャッシュを削除 |
| テーマ側の設定が優先されている | テーマ設定にfavicon項目がないか確認 | テーマ側の設定を変更する |
| 画像が正方形でない | 画像のプロパティで縦横サイズを確認 | 正方形に作り直す |
| Googleが未クロール | Search Consoleでインデックス状況を確認 | 時間を置く。URL検査でリクエストも可 |
古いテーマがハードコードしている場合は上書きが必要
数年前に制作されたテーマでは、テーマファイルの中にfaviconのパスが直接書き込まれていることがあります。この場合、カスタマイザーで設定しても古いアイコンが表示され続けます。テーマファイルの編集が必要になるため、子テーマを使っていない状態で直接編集すると、テーマ更新時に消えます。この作業は保守担当に依頼するのが安全です。
サーバー直下の favicon.ico が優先されるケースがある
サイトのルートディレクトリに favicon.ico というファイルが置かれていると、環境によってはそちらが優先されます。WordPressの設定を変えても表示が変わらない場合は、FTPでルートディレクトリを確認し、古い favicon.ico が残っていないか調べてください。
faviconと合わせて設定しておくべき周辺項目
faviconを設定するタイミングで、一緒に整えておくと効率の良い項目があります。
サイト名とキャッチフレーズを正しく設定する
Googleは検索結果にfaviconとサイト名をセットで表示します。WordPressの「設定」から「一般」でサイトのタイトルを確認し、「WordPressサイト」のような初期値のまま放置されていないかを見てください。キャッチフレーズが初期状態の「Just another WordPress site」のまま公開されているサイトは、実務でも頻繁に見かけます。
OGP画像もこの機会に確認する
faviconはタブと検索結果用、OGP画像はSNSでシェアされた際のサムネイル用です。役割が異なるため、両方の設定が必要です。SNSでURLを共有したときに何も画像が出ない場合は、OGP画像が未設定です。
スマホのホーム画面用アイコンも同時に生成される
WordPressのサイトアイコン機能で512×512ピクセルの画像を登録すると、スマートフォンのホーム画面追加用アイコンも自動生成されます。個別に用意する必要はありません。大きめの画像を1枚用意すれば足ります。
最後に
faviconは、設定に5分もかからないにもかかわらず、未設定のまま何年も放置されているサイトが非常に多い項目です。検索結果とブラウザタブという、ユーザーが必ず目にする場所に表示されるため、費用対効果は極めて高いといえます。正方形の512ピクセル画像を1枚用意して、カスタマイザーから登録するだけです。
Web管理では、月額1万円からホームページの運用保守を代行しています。faviconのような細かい設定漏れの洗い出しから、日々の更新作業、セキュリティ対策までまとめてお任せいただけます。「今のサイトがどんな状態か診断してほしい」というご相談だけでも構いません。
