気づいたこととかメモとか日記とか

WordPress4.3の新機能「サイトアイコン」の使い方と注意点

WordPress 4.3 “Billie” から利用できるようになった「サイトアイコン」についてまとめてみました。

サイトアイコンって?

WordPress 4.3で登場した「サイトアイコン」。
これは、いわゆる「ファビコン」のことだと思ってください。

ファビコンはもともとブラウザのお気に入り用のアイコンでしたが、スマホ用には「Web Clip アイコン」の登録も必要です。
そのため、これらを同時に生成できる機能として「サイトアイコン」が実装されました。

サイトアイコン機能を使うと

下記の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">

上から順に、オーソドックスなファビコン用、アンドロイドのホームアイコン用、iPhoneのホームアイコン用、Windows8以降でピン留めする用(ピン留めの仕方が不明)です。

ただし、IEは10以前のバージョンではico形式のファビコンしかサポートしていませんので、対応させる場合は別途ICO形式のファイルを用意して設定する必要があります。

サイトアイコン機能を使うには?

アイコンにするための512ピクセル以上の正方形の画像を用意して、管理画面からテーマのカスタマイザー(「外観」→「カスタマイズ」)へ進み、「サイト基本情報」をクリックすると現れます。

サイトアイコン機能の注意点

JPEG画像を使用した場合は、作成される画像もJPEG形式になってしまいます。
正しく表示されないブラウザなどがありますので、PNG形式の画像を用意してください。

また、IE用のファビコン画像は作成されませんので、こちらは別途設定が必要です。