WordPress4.3でファビコン（サイトアイコン）を設定する方法

WordPress が 4.3 にアップデートされ、ファビコン（favicon）が簡単に設定できるようになりました。

WordPress では「サイトアイコン」という名称になっており、ブラウザのタブやブックマークで読み込まれるファビコンと、スマホで読み込まれる Web Clip アイコンを同時に生成するようになっています。

アップロードして切り抜きするだけの作業ですが、注意点と合わせて手順をご紹介します。

ブログのアクセス数を伸ばす方法をお探しですか？ 「アクセス数が伸びない原因とその対策」が書かれた e-book を無料プレゼントしています。

 【無料】ダウンロードはこちら

WordPressサイトアイコン設定方法

用意する画像

画像の大きさは、幅 512 ピクセル × 高さ 512 ピクセル以上が推奨サイズとなっています。これより小さなサイズだと、画像が粗くなるので注意してください。

また、形式についてはとくに注釈がないのですが、iOS で読み込まれるアイコンが同時生成されるため PNG 形式で作成したほうがよいでしょう。

実際には以下の 4 種類が自動的に出力されます。

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

JPEG 形式でアップするとすべて .jpg になってしまうため、一部端末ではうまく読み込まれないと思います。

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

サイトアイコンの設定は、管理画面サイドバーの「外観」から行います。

「外観」→「カスタマイズ」へと進むと、カスタマイズ画面が出てきます。

テーマによって表示される項目が違いますが、「サイト基本情報」を探してクリック。

一番下に「サイトアイコン」欄が出てくるので、ここからファイルを選択します。

すでにアップロード済みの画像を選択するか、新たにアップロードしましょう。

ここにも推奨画像サイズが表示されていますね。

画像を選択すると、切り抜き画面に移ります。

右側にブラウザやアプリでの表示イメージが出てくるので、確認しながら切り抜き範囲を決定。すでに最適化されている場合はそのまま「画像切り抜き」ボタンを押してください。

再びカスタマイズ画面に戻るので、「保存して公開」ボタンを押せば完了！

従来は設定するのがわりと面倒だったサイトアイコンですが、これなら簡単ですね。

テーマを変更してもこの情報は保存されるので、再設定の必要はありません。

自動的に出力されるアイコンの種類

先ほどもご紹介したとおり、以下の 4 つが head 内に出力されます。

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

1・2 行目は解像度の違うアイコンで、ユーザーの環境に合わせてどちらかが読み込まれます。

3 行目の「apple-touch-icon-precomposed」は、おもにスマホのホームアイコンで使われます。この記述だと、光沢処理はされません。

4 行目の「msapplication-TileImage」は Windows8 のピン留めに使われます。

ちなみに、すべてのブラウザや端末に完璧に対応することを考えると、20 種類以上のサイズが必要だと言われています。ただ、最適なサイズが見つからなければ近いものを探してくれるので、とりあえずこれだけあれば充分かなと思います。

Internet Explorer10以下は対応していない

国産の WordPress 無料テーマではデフォルトのファビコンが入っていることが多く、プラグインで設定している人もたくさんいます。

たとえばこのブログは、こんな指定になっています。

<link rel="shortcut icon" href="images/favicon.ico" />

サイトアイコン設定が WordPress の標準機能となったのでもうこの記述は削除しても良さそうですが、残念ながら IE10 以下のブラウザは .ico じゃないと認識してくれません。

古いバージョンを切り捨てるなら不要ですが、アクセス解析を見ると IE 利用者の約 20 ％は 10 以下のバージョンを使っているようです（Naifix 調べ）。そのため、すでに設定してあるならわざわざ削除しなくても良いのかな、と思います。

まとめ

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

バージョンアップ時はバックアップもお忘れなく！

 WordPress初心者でも簡単にできるバックアップ方法

それでは、また。