対象: WordPress(クラシックテーマ)
難易度: ★☆☆
所要時間: 約5分
ブラウザのタブに表示される小さなアイコン、いわゆるfavicon(ファビコン)が未設定のままだと、タブがたくさん開いている時に自分のサイトがどれか一目で分かりません。実はこれ、FTPでファイルをアップロードしたりコードを書いたりしなくても、WordPress管理画面の標準機能だけで設定が完結します。
カスタマイザーからサイトアイコンを設定する
WordPressにはバージョン4.3以降、「サイトアイコン」という名前でfaviconを設定する機能が標準搭載されています。
メディアライブラリから画像を選ぶか、新規アップロードします。正方形にトリミングする画面が出るので、その場で調整して完了です。
用意する画像は512×512px以上の正方形がおすすめ
WordPressの公式推奨サイズは512×512px以上の正方形です。これは、ブラウザタブ用の小さな表示だけでなく、スマホのホーム画面に追加した際のアイコンや、Appleデバイス用の高解像度アイコンとしても、この1枚の画像から自動的に生成・使い分けされる仕組みになっているためです。小さいサイズの画像を用意してしまうと、ホーム画面追加時にぼやけた表示になってしまいます。
ヘッダーのロゴ画像をそのままサイトアイコンとして流用すると、実際のタブ表示ではかなり小さく縮小されるため、文字や細かい図形がつぶれて何のマークか分からなくなりがちです。文字を含まない、シンプルな図形やイニシャル1文字だけのデザインにすると、小さく表示されても認識しやすくなります。
「.icoファイルは用意しなくていいの？」という疑問について
Web制作の現場では今もfavicon.icoという拡張子のファイルをサーバーのルート直下に手動設置する光景をよく見かけます。これは「ブラウザやクローラーの一部は、HTMLのタグを見ずに/favicon.icoへ直接アクセスしにいく」という昔からの仕様が今も残っているためで、静的HTMLサイトなどWordPress以外の環境ではこの手動設置は今でも有効な対策です。
一方、WordPressに関してはバージョン5.4以降、コア機能として/favicon.icoへのアクセスを検知し、サイトアイコンの設定があれば自動的にそちらへ振り分ける仕組みが組み込まれています。そのため、上記の「サイトアイコン」を設定しておけば、favicon.icoを別途アップロードしなくても、この昔ながらのアクセス方法にもきちんと対応できます。「制作会社は今もfavicon.icoを設置している」というのは事実ですが、WordPressサイトに限っては、コア機能がその役割を代わりに担ってくれている、というのが実態です。
設定したのに反映されない時は
faviconはブラウザ側で長時間キャッシュされやすい要素です。設定したはずなのにタブに反映されない場合は、サイト側の設定ミスではなく、閲覧しているブラウザ側のキャッシュが古いままである可能性が高いです。シークレットウィンドウで開き直すか、ブラウザのキャッシュを削除して確認してみてください。
まとめ
- 【外観】-【カスタマイズ】-【サイト基本情報】の「サイトアイコン」欄だけで設定できる
- 用意する画像は512×512px以上の正方形が推奨(スマホのホーム画面アイコンにも使われるため)
- ロゴをそのまま使うと縮小時につぶれやすいので、シンプルな図形がおすすめ
- WordPress 5.4以降はコア機能が
/favicon.icoへのアクセスをサイトアイコンに自動で振り分けるため、.icoファイルの別途設置は不要 - 反映されない場合は、まずブラウザ側のキャッシュを疑う