WordPress

WordPressのサイトアイコン（ファビコン）設定方法と注意点

WordPress は、本体にファビコン設定機能があります。

設定はテーマに依存せず、専用のプラグインも必要ありません。画像サイズと形式だけ注意して設定してみましょう。

手順を解説していきます。

WordPress 4.3 から「サイトアイコン」という名称で実装されました。呼び方が違うだけで、ファビコンと同じものです。

WordPressサイトアイコン設定手順

01. 512px 以上の画像を用意する

WordPress サイトアイコンの推奨サイズ・画像形式は以下のとおりです。

  • サイズ：横 512px / 縦 512 px 以上（正方形）
  • 形式：PNG / JPEG / GIF

Google 検索では「48 x 48 ピクセル以上の正方形」が推奨されており、以下の形式が対応しています。SVG は非対応なのでご注意ください。

BMP / GIF / ICO / PNG / JPEG / PPM / TIFF

Define a favicon to show in search results

WordPress の推奨に従っていれば、検索への対応も大丈夫です。

検索結果画面などで丸く切り抜かれて表示されることをふまえ、あらかじめ丸いアイコンにしておく（背景は透過させる）のもよいと思います。

セオリコ 検索結果での表示
検索結果で表示されるファビコン例

サンプルとして、テストサイト「Xnote」用に以下の画像を作成してみました（600px x 600px / PNG 形式）。

Xnote ファビコン

グラデーションをかけた円のなかにテキストを配置した簡単なものです。

手元にロゴ画像がない場合は、文字や絵文字からファビコンを作れる無料ツールをご利用ください。画像から作る場合も、正方形への切り抜き・余白・丸型の加工ができ、タブや検索結果での見え方をその場で確認できます。

ファビコンジェネレーター | セオツールズ

02. 画像のアップロードと保存

サイトアイコンの設定は、管理画面サイドバーの［外観］>［カスタマイズ］で行います。

WordPressカスタマイザー

「サイト基本情報」をクリック。

WordPressカスタマイザー サイト基本情報

テーマによって名称や位置が異なる場合があります。

「サイトアイコンを選択」をクリック。

WordPressカスタマイザー サイトアイコンを選択

ドラッグ＆ドロップでアイコンをアップロードします。

WordPressカスタマイザーからアイコン画像をアップロード

「代替テキスト」にサイト名を入力してから「選択」をクリック。

アイコン画像の代替テキストを設定

画像切り抜き画面が表示されます。正方形で作成している場合・表示領域を変更しなくてよい場合はそのまま「画像切り抜き」をクリック。

サイトアイコンの切り抜き

「公開」をクリックして完了です。

WordPressカスタマイザー公開

03. 表示確認

タブに反映されていれば OK です。

Chromeタブに反映されているファビコン

文字がつぶれて見えないときは調整したほうがよいでしょう。

テーマを変更してもこの情報は保持されるので、いったん決めてしまえば再設定の必要はありません。

WordPress以外のサイトでファビコンを設定する方法

WordPress を使っていないサイトでは、画像ファイルをサーバーにアップロードし、HTML の <head> 内にタグを書いて設定します。

現在は、以下の 3 ファイルがあれば、ブラウザ・スマホ・検索結果のほぼすべてに対応できます。

favicon.ico16・32・48px を 1 つのファイルに入れることができ、ブラウザが自動で読みにいきます。
icon-192.png検索結果やスマホ向け 192px 四方の PNG アイコン
apple-touch-icon.pngiPhone のホーム画面用に使用する 180px の PNG アイコン

コードサンプルは以下のとおりです。

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

ファイルはサイトのルート（トップページと同じ階層）に置くのが一般的です。

ファビコン設定時の注意点

小さくても判別できるようにする

ファビコンはおもに以下の場所で表示されます。

  • WordPress 管理画面左上
  • Google や Bing の検索結果
  • ブラウザのタブ
  • ブラウザのブックマークバー
  • スマホのホームアイコン
  • ブログカード型リンク

WordPress で設定したアイコンは以下のとおり複数サイズで出力されており、表示される場所によって最適なサイズで読み込まれます。

<link rel="icon" href="/filename-32x32.png" sizes="32x32" />
<link rel="icon" href="/filename-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="/filename-180x180.png" />
<meta name="msapplication-TileImage" content="/filename-270x270.png" />

タブで表示されるときはかなり小さくなりますから、小さい文字をびっしり埋め込むとつぶれて見えません。

小さく表示されてもわかるようなデザインにしておきましょう。

ico 形式は不要

Internet Explorer 10 以下では ico 形式（ .ico ）の画像が必須でした。

でも Internet Explorer はすでに開発終了しており、ほぼ Edge に切り替わっているため、気にする必要はありません。

PNG / JPEG / GIF 形式であれば問題なく表示されます。

SVG も使えますが、WordPress はプラグインを入れないとアップロードできません。セキュリティ面の問題も出てくるので、使わないほうがよいと思います。

ただし、WordPress を使っていない場合は favicon.ico を置いておくのがよいと思います。ブラウザやクローラーはタグの有無にかかわらず /favicon.ico を読みにきますから、コードを入れ忘れていても大丈夫です。

検索結果の反映は時間がかかる

サイトアイコン設定後、タブのアイコンはすぐ変わります。もし変わらないときはブラウザのキャッシュをクリアしてください。

検索結果にはリアルタイムで反映されず、サイトによって数日～数週間かかります。

Google Search Console でトップページを URL 検査し、インデックス登録をリクエストすれば多少は早く反映されるかもしれません。

ファビコンを変更し、Google にその変更を知らせたい場合は、サイトのホームページのインデックス登録をリクエストできます。更新が検索結果に反映されるまで、数日かかることがあります。

検索結果用のサイトのファビコンの設定 | Google 検索セントラル

ブラウザでも検索結果でも反映されない場合、ルートに favicon.ico がないか確認してください。ファイルが残っていると、そちらが優先される可能性があります。

もし何週間たっても反映されないときは、念のため以下をチェックしておきましょう。

  • ファビコンが正方形で、48px より大きいサイズになっているか
  • ファイル形式が BMP / GIF / ICO / PNG / JPEG / PPM / TIFF か
  • robots.txt でファビコンの URL やトップページをブロックしていないか
  • ファビコンの URL を頻繁に変えていないか
  • example.com/blog/ のようなサブディレクトリにファビコンを置いていないか

まとめ

WordPress 「サイトアイコン」設定方法のご紹介でした。

  • 画像の大きさは 512 x 512 ピクセル以上の正方形
  • 画像の形式は PNG / JPEG / GIF のいずれか
  • 小さく表示されても判別できるデザインにする

簡単にオリジナリティを演出できるアイテムなので、ブログと紐づけて覚えてもらえるアイコンにするとよいですね。