前回の記事でサイトアイコンとして使用するイラストを作成したので、実際にこのブログに設定してみます。
WordPress標準機能での設定
WordPressにはサイトアイコンを設定する機能があります。
カスタマイザーから「サイト基本情報」を選択し、「画像を選択」ボタンを押して画像を設定することができます。
背景が白い画像を設定してみました。右側でプレビューを見ることができます。
アプリアイコンとしては問題ないのですが、ファビコンだと背景の白い四角がそのまま表示されるので人によっては嫌かもしれません。多くのサイトは透過PNGを使用していますしね。
というわけで透過PNGを設定してみるとファビコンのほうはいい感じですが、アプリアイコンは背景が黒くなってしまいます。
僕はファビコンは背景を透明に、アップルタッチアイコンは背景を白くしたいので、次項の手順で個別に設定しました。
Simplicityでの設定
Simplicityにもファビコンとアップルタッチアイコンの設定機能がついており、カスタマイザー内の「その他」からアクセスすることができます。
「ファビコンを有効」と「アップルタッチアイコンを有効」にチェックを入れてそれぞれ画像をアップロードしてください。
僕は最初ファビコンに.icoファイルを選択したのですが、うまくいかなかったので.pngを選択しました。
どれくらいのサイズのものを設定すればよいのか調べてもよくわからなかったので、前回作成した1024 x 1024の画像を両方に設定しました。
すると、「/wp-content/uploads/2016/07」内に様々なサイズの画像が生成されました。
僕が実際にアップロードした画像は一番下の「icon-transparent.png」と「icon.png」です。
一番上の「favicon.ico」は最初にアップロードしてうまくいかなかったものです。
Simplicityの側でそれぞれに必要なサイズを自動的に生成してくれたようです。
ちょっと調べてみましたが、今時のブラウザは.icoファイルでなくて.pngファイルでファビコンを表示することができるのですね。
実際の表示
MacのSafariだとこんな感じでファビコンが表示されます。
MacのChromeだとこんな感じです。
MacのSafariの「お気に入り」での表示はこんな感じ。背景が透明の画像のほうが使用されているようです。
iPhoneホーム画面での表示。
iPhoneのSafariの「お気に入り」での表示。
どれもいい感じで表示できています。
絵心がないのでシンプルなアイコンしか作れませんでしたが、それでも自分のサイトのアイコンが表示されるとテンションが上がりますね。
画像さえ用意できてしまえばSimplicityでのアイコンの設定は簡単なので、ぜひチャレンジしてみてください。
