WordPress 4.3 からファビコン（favicon）が簡単に設定できるようになりました。
WordPress では「サイトアイコン」という名称になっており、ブラウザのタブやブックマークで読み込まれるファビコンと、スマホで読み込まれる Web Clip アイコンを同時に生成するようになっています。
アップロードして切り抜きするだけの作業ですが、注意点と合わせて手順をご紹介します。
Headline
WordPressサイトアイコン設定方法
STEP1
画像を用意する
画像の大きさは、幅 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 になってしまうため、一部端末ではうまく読み込まれないと思います。
STEP2
画像のアップロードと保存
サイトアイコンの設定は、管理画面サイドバーの「外観」から行います。
「外観」→「カスタマイズ」へと進むと、カスタマイズ画面（カスタマイザー）が出てきます。
テーマによって表示される項目が違いますが、仕様が大きく変更されていなければ「サイト基本情報」を探してください。
一番下に「サイトアイコン」欄が出てくるので、ここからファイルを選択します。
すでにアップロード済みの画像を選択するか、新たにアップロードしましょう。
画像を選択すると、切り抜き画面に移ります。
右側にブラウザやアプリでの表示イメージが出てくるので、確認しながら切り抜き範囲を決定。すでに最適化されている場合はそのまま「画像切り抜き」ボタンを押してください。
再びカスタマイズ画面に戻るので、「保存して公開」ボタンを押せば完了！
従来は設定するのがわりと面倒だったサイトアイコンですが、これなら簡単ですね。
テーマを変更してもこの情報は保存されるので、再設定の必要はありません。
自動的に出力されるアイコンの種類
先ほどもご紹介したとおり、以下の 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 テーマのなかにはデフォルトのファビコンとして、「shortcut icon」が指定されているものもあります。
<link rel="shortcut icon" href="images/favicon.ico" />
IE10 以下のブラウザは .ico 以外は認識してくれませんが、2020 年時点でほとんど使われていないため改めて設定する必要はないでしょう。
IE11 で 1 ％ぐらいのシェア率です。
まとめ
WordPress 「サイトアイコン」設定方法のご紹介でした。
- 画像の大きさ（ピクセル）は 512 × 512 以上
- 画像の形式は PNG 推奨
それでは、また。
Naifix 個別サポート