ファビコンとは？作り方・設定方法・必要な理由を解説

ファビコンとは？作り方・設定方法・必要な理由を解説

ホームページの作り方

ファビコンは、ブラウザのタブやブックマーク、検索結果などでサイトを識別するために表示される小さなアイコンです。小さな表示ですが、サイト名だけでは見分けにくい場面で、ブランドやサイトを視覚的に認識しやすくする役割があります。

WordPressでは「サイトアイコン」として設定できます。初心者は、正方形の画像を1枚用意してWordPressへ登録するところから始めれば十分です。

30秒でわかる結論

30秒でわかる結論

  • ファビコンは、ブラウザタブやブックマークなどに表示されるサイトの小さなアイコン
  • Google検索結果にも表示される場合がある
  • Google検索向けは正方形・最低8×8px、48×48px以上が推奨
  • WordPressのサイトアイコンは正方形・512×512px以上が推奨
  • 細かい文字や複雑なロゴより、縮小しても判別できるシンプルな形が向く
  • WordPress 6.5以降では一般設定からサイトアイコンを設定できる
  • 設定してもGoogle検索結果へ必ず表示されるとは限らない

ファビコンとは？

ファビコンは「favorite icon」に由来する呼び方で、WebサイトやWebページを表す小さなアイコンです。

ブラウザでは、主に次のような場所で使われます。

  • ブラウザのタブ
  • ブックマーク
  • 履歴
  • ショートカット
  • モバイル端末の一部表示
  • Google検索結果

初心者向けに一言でいうと

ファビコンは、Webサイトの「小さな顔」です。ロゴほど大きく表示されませんが、複数タブを開いたときなどにサイトを見分けやすくします。

ファビコンを設定する理由

サイトを見分けやすくする

ブラウザで複数タブを開くと、文字だけではどのサイトか分かりにくくなります。ファビコンがあれば、視覚的に判別しやすくなります。

ブランドを覚えてもらいやすくする

会社ロゴやサービスのシンボルを簡略化したアイコンを使うと、サイトとブランドを結び付けやすくなります。

初期状態のままに見えにくい

ファビコンが未設定だと、ブラウザの標準アイコンやテーマ既定のアイコンが表示されることがあります。会社サイトや店舗サイトでは、最低限のサイト設定として用意しておくと整った印象になります。

ファビコンはSEOに効果がある？

ファビコンを設定しただけで検索順位が上がるとは言えません。

Google検索では、条件を満たしたファビコンが検索結果に表示される場合がありますが、ファビコン設定そのものを「順位を上げる施策」と考えるのは適切ではありません。

SEOより識別性・信頼感のために設定する

ファビコンは、検索順位よりも「検索結果やブラウザ上で自分のサイトを見分けやすくする」目的で設定するのが自然です。

Google検索で使えるファビコンの条件

Google Search Centralでは、検索結果に表示するファビコンについて次の条件を案内しています。

項目 Google検索向けの条件
縦横比 1:1の正方形
最低サイズ 8×8px以上
推奨サイズ 48×48px以上
対応形式 BMP、GIF、ICO、PNG、JPEG、PPM、TIFF
URL 頻繁に変更しない安定したURL

48×48pxをそのまま作る必要はない

48×48px以上がGoogle検索での推奨ですが、WordPressでは512×512px以上の元画像を用意し、各表示サイズへ自動生成させる方法が簡単です。

WordPressでは何pxで作ればよい？

WordPress公式では、サイトアイコンに使う画像は正方形で512×512px以上が推奨されています。

512×512px WordPress推奨の元画像
48×48px以上 Google検索推奨

この2つは矛盾していません。WordPressでは大きめの正方形画像を登録し、用途ごとに小さいサイズへ変換して利用します。

ファビコンに向くデザイン

ファビコンは非常に小さく表示されるため、通常の会社ロゴをそのまま縮小すると読めなくなる場合があります。

向いているデザイン

  • 1〜2文字のイニシャル
  • シンプルな記号
  • ロゴマークだけを切り出したもの
  • 背景と図形のコントラストがはっきりしたもの
  • 細線を使いすぎないデザイン

小さい文字は避ける

会社名を10文字そのまま入れても、16〜32px程度で表示されるとほとんど読めません。縮小表示を前提に設計してください。

ロゴとファビコンは同じでよい？

必ず同じ画像にする必要はありません。

横長ロゴはヘッダーには向きますが、ファビコンは正方形です。そのため、ロゴマーク部分だけを切り出す、頭文字だけを使うなど、ファビコン用に簡略化する方が見やすくなります。

用途 向く形
サイトロゴ 横長でも可
ファビコン 正方形・単純な形

PNGとICOはどちらがよい？

現在の一般的なWordPressサイトなら、PNGを元画像として使えば十分な場合が多くあります。

WordPress公式も、サイトアイコン用画像としてPNGを推奨しています。

形式 特徴
PNG 透明背景を使いやすく、WordPressで扱いやすい
ICO 従来からファビコンで使われてきた形式
JPEG 透明背景は使えない
SVG ブラウザ用途では使える場合があるが、Google検索の対応形式一覧には含まれない

迷ったらPNG

WordPress初心者なら、512×512px以上の正方形PNGを作り、サイトアイコン機能から設定する方法が分かりやすいです。

WordPressでファビコンを設定する方法

WordPress 6.5以降では、サイトアイコンを一般設定から登録できます。

STEP 1．512×512px以上の正方形画像を用意
STEP 2．WordPress管理画面を開く
STEP 3．「設定」→「一般」を開く
STEP 4．サイトアイコンを選択
STEP 5．画像をアップロード・選択
STEP 6．保存してブラウザで確認
タブやブックマークなどに反映

ブロックテーマでは、サイトエディターの「Identity」からサイトアイコンを変更できる場合もあります。

WordPressはどのサイズを出力する？

WordPressのサイトアイコン機能では、登録画像から複数サイズが利用されます。

WordPressコアでは、32px、180px、192px、270pxなど用途別のアイコン用出力が行われます。

1枚の元画像でOK

初心者が32px、180px、192pxなどを全部手作業で用意する必要はありません。512×512px以上の元画像を登録すれば、WordPress側が必要なサイズを扱います。

HTMLで設定する場合

WordPressを使わないサイトでは、HTMLの <head> 内にファビコンを指定できます。

基本例

<link rel="icon" href="/favicon.png">

Google検索も、ホームページの <head> 内にある rel="icon" などの指定を利用してファビコン情報を取得します。

Google検索結果に表示されない原因

WordPressでファビコンを設定しても、Google検索結果へすぐ表示されるとは限りません。

Googleがまだ再クロールしていない

Googleはホームページを再クロールしてファビコン情報を取得します。反映には数日から数週間かかる場合があります。

ファビコンがクロールできない

Googlebot-Imageがファビコン画像へアクセスできないと、検索結果で利用されない可能性があります。

画像が正方形ではない

Google検索向けのファビコンは1:1の正方形が必要です。

小さすぎる

最低8×8pxですが、Googleは48×48px以上を強く推奨しています。

ファビコンURLを頻繁に変えている

Googleは安定したファビコンURLを推奨しています。毎回URLが変わる構成は避けます。

検索結果への表示は保証されない

Googleのガイドラインをすべて満たしても、検索結果へ必ずファビコンが表示されるわけではありません。

設定＝即表示ではない

WordPress上で正常に表示されていても、Google側でクロール・処理されるまで時間がかかります。表示されないからといって、毎日ファビコン画像やURLを変更しないでください。

サブディレクトリごとに別ファビコンを設定できる？

Google検索では、基本的にホスト名ごとに1つのファビコンを扱います。

Google検索での考え方

https://example.com/ → 1つのファビコン
https://example.com/blog/ → 同じホストなので別指定不可
https://shop.example.com/ → 別ホストなので別ファビコンを持てる

サイト内のカテゴリーごとに検索結果のファビコンを変えたい、といった用途には向きません。

背景は透明でもよい？

透明背景のPNGも利用できます。

ただし、ブラウザや検索結果の背景色によってはマークが見えにくくなる場合があります。白背景・暗い背景の両方で確認すると安全です。

見やすさチェック

  • 白背景で見えるか
  • ダークモードでも識別できるか
  • 16〜32px程度まで縮小しても形が分かるか
  • 細い線が消えていないか
  • 文字が潰れていないか

ファビコンを変更するときの注意点

ブランド変更やロゴ変更でファビコンを差し替える場合は、WordPress側だけでなくブラウザキャッシュやCDNキャッシュも影響することがあります。

変更後に確認すること

  • WordPressのサイトアイコンが新画像になっているか
  • ブラウザタブで新画像が表示されるか
  • キャッシュ削除後も正しいか
  • HTMLのicon指定が新画像を向いているか
  • 画像URLへ直接アクセスできるか

どんなサイトでも必要？

個人ブログ 必要度 ★★★★☆

必須ではありませんが、サイト識別とブランド統一のため設定がおすすめです。

会社サイト 必要度 ★★★★★

ロゴやブランドカラーと合わせ、公開前の基本設定として用意します。

店舗サイト 必要度 ★★★★★

店舗ロゴや頭文字など、スマホでも認識しやすいアイコンを使います。

テストサイト 必要度 ★☆☆☆☆

本番公開前なら優先度は低いですが、本番移行時には設定を忘れないようにします。

よくある失敗

  • 横長ロゴをそのまま縮小して見えなくなる
  • 文字を入れすぎて読めない
  • 画像が正方形ではない
  • 非常に小さい画像だけを元画像にする
  • 白いマークを透明背景にして見えなくなる
  • 設定後にブラウザキャッシュを確認しない
  • Google検索へ即反映されると思って何度も変更する

教科書判定

教科書判定

WordPress初心者は「512×512px以上の正方形PNGを1枚用意」で十分

難しく考える必要はありません。会社やサイトを識別できるシンプルな正方形画像を512×512px以上で用意し、WordPressのサイトアイコンへ登録してください。

検索順位を上げる目的ではなく、ブラウザ・ブックマーク・検索結果などでサイトを識別しやすくするための基本設定として考えるのがおすすめです。Google検索での表示には時間がかかり、表示自体も保証されません。

よくある質問

Q．ファビコンは何pxで作ればよいですか？

WordPressでは512×512px以上の正方形画像が推奨されています。Google検索では最低8×8px、48×48px以上が推奨です。WordPressなら512×512px以上の元画像を用意すれば分かりやすいです。

Q．PNGとICOはどちらがおすすめですか？

WordPress初心者ならPNGで問題ありません。WordPress公式もサイトアイコン用画像としてPNGを推奨しています。

Q．ファビコンを設定するとSEO順位は上がりますか？

設定しただけで検索順位が上がるとは言えません。サイト識別やブランド認知のための設定として考えてください。

Q．設定したのにGoogle検索結果へ表示されません

Googleの再クロールと処理に時間がかかる場合があります。またガイドラインを満たしても表示は保証されません。画像がクロール可能か、正方形か、URLが安定しているかを確認してください。

Q．会社ロゴをそのまま使ってもよいですか？

正方形で縮小しても見えるデザインなら使えます。横長ロゴの場合は、ロゴマークや頭文字だけを切り出した方が見やすくなることがあります。

まとめ

ファビコンの要点

  • ファビコンはブラウザタブや検索結果などでサイトを表す小さなアイコン
  • サイト識別・ブランド認知のために設定する
  • Google検索では正方形・最低8×8px、48×48px以上推奨
  • WordPressでは512×512px以上の正方形画像が推奨
  • 初心者はPNGのシンプルな画像を用意すればよい
  • WordPress 6.5以降は一般設定からサイトアイコンを登録できる
  • 検索結果への表示には時間がかかり、表示は保証されない
  • 複雑な文字や横長ロゴはファビコン用に簡略化する
次に読む

「OGPとは？SNSシェア画像の設定方法」「ホームページ公開前のチェックリスト」もあわせて確認してください。