今回はWEBサイトのファビコンを設定する方法を紹介します。また検索結果に表示されない理由やWordPressでの設定では1点注意が必要だった点など、役に立ちそうな情報も一緒に説明していきます。
- ファビコンの設定の仕方を知りたい
- ファビコンが反映されない
- 検索結果にファビコンが表示されない
ファビコンとは？
ファビコン（favicon）とは、「Favorite icon」の略称で「お気に入りのアイコン」と直訳出来ます。
WEBで使用されているファビコンに関しては、WEBサイトのURL左側、ブラウザのタブ内、検索結果の左側などに小さく表示されているシンボルマークのようなアイコンです。
またスマートフォンの場合は、お気に入りのWEBサイトをホーム画面に追加する事でアイコンがファビコンとなります。これは正に「お気に入りのアイコン」に近しい使われ方がされているでしょう。
ファビコンが設置される理由
ファビコンが設置される理由は、主に企業イメージやブランドイメージ。ぱっと見の印象や分かり易さ。そして安心感や信頼性。などのやんわりとしたイメージ的な部分が大半です。
ファビコンを設定したからといって検索結果への影響は一切なく、対人との接触での高感度UP程度です。
特にスマホの場合はそれが著しいです。先述で説明した通りホーム画面のアイコンがオリジナルのものとなるでユーザーはスマートな画面を作り出せます。
ファビコンの設定方法
ファビコンの設定方法の方法は、下記の記述を<head> 〜 </head>に入れるだけです。
<link rel="shortcut icon" href="/path/to/アイコン画像.ico">
<link rel="apple-touch-icon" href="/path/to/アイコン画像.ico" sizes="180x180"> <!--スマホ向け-->「shortcut icon」の部分は下記のいずれかでもOKです。
- “shortcut icon”
- “icon”
- “apple-touch-icon”（スマホ向け）
- “apple-touch-icon-precomposed”（スマホ向け）
もしくは下記の記述でもOKです。（hrefの場合は必ずHPと同じドメインである必要があります。）
<link href="shortcut icon" href="https://example.com/アイコン画像.ico"> <!--絶対パスの場合-->
<link href="shortcut icon" href="/アイコン画像.ico"> <!--相対パスの場合-->アイコンサイズは48×48の倍数にして、画像ファイルの形式は何でも大丈夫です。しかし通常「.ico」の拡張子が推奨されています。（SVGの場合はファイル指定は無し。）
ただし「かぎ十字章」や「グロテクスな表現」や「わいせつな表現」などは一切禁止されていますので表示されません。
WordPressでファビコンを設定
WordPressでファビコンを設定する場合はheadに先ほどのコードを入力するのではなく、WordPress標準で入っている設定項目から作業をします。
管理画面左側のツールのテーマ→カスタマイズ（外観）→サイト情報/サイトアイコンの「サイトアイコン」の項目の部分から画像をアップロードします。（下記の文言の記載がある部分。）
サイトアイコンはブラウザーのタブやブックマークバー、WordPress モバイルアプリで表示されます。ぜひアップロードしましょう。
サイトアイコンは512 × 512ピクセル以上の正方形にしてください。
そこに書いてあるように512 × 512ピクセル以上の正方形であるのが推奨されています。
ファビコンが検索結果に反映されない場合
ファビコンをしっかりと設定したのに検索結果に反映されなくて悩んでる方へ。
タブバーやURLバーにはしっかり表示されているから記述は間違っていないはず。画像のサイズも指示通りのものにして、拡張子も問題ないはず。なのに検索結果に映らない…どうしてだ…..そんな方へ。
それは普通です。
ファビコンを設定したからといって直ぐに検索結果に表示される訳ではありません。
Googleのクローラーがしっかりとインデックスした後にGoogleがファビコンを表示させるべきかを決めます。
またファビコンの設定に関してのGoogleの公式ヘルプページでも「ファビコンが検索結果に表示されるかは保証されません。」と明記されていますので検索結果に表示されなくてもおかしくはありません。
Search Console ヘルプ：検索結果に表示されるファビコンを定義する
そのため、しっかりと設定しても表示されないページもあれば、表示されるページもあります。なので対処法は特に無く、焦らずに黙って待ってましょう。
それでもずっと表示されなくて悩んでいる方へ
ただいつまで経っても検索結果にファビコンが表示されないので正直焦ってるって方もいると思います。
実は、私も最近までずっと表示されてなくて色々と焦っていました。
ドキュメントに記載されてる通りに設定して、何度も確認してきたのにです。
ただしある矛盾だけは無視しました。
私のサイトはWordPressを使っています。WordPressのサイトでのファビコンの設定は先述で説明した場所で行うのだが、ここでは512×512のサイズ以上を推奨しています。
しかしGoogleの公式ヘルプでは48×48の倍数を推奨しています。
これがややこしい！！
私は、アイコンサイズを重くしたくなかったのでWordPressの推奨サイズの最小値である512×512のサイズで設定していました。ただこれって48の倍数じゃないんですよね…
試しに528×528で作成してみましたら僅か3日後には検索結果で表示されるようになりました。さらに推奨サイズ以下の480×480でもしっかりと表示されました。
恐らく、WordPressを使ってる人でファビコンが表示されない理由は512×512のサイズで作ってしまいGoogleの推奨サイズ外のサイズにしてしまってるのでは無いでしょうか？これを修正してみて数日置いてみたらどうでしょうか？試してみて下さい。
しかし注意して頂きたいところは、ファビコンは必ず表示される訳では無いので、この考えはある程度の憶測が入っています。
以上が「ファビコンを設定する方法：検索結果に表示されない場合の対処…」でした。
たかがファビコン、されどファビコン。意外とファビコンが持つぱっと見のイメージは信頼性や安心感に繋がると思いますのでしっかりと設定しときましょう。
