【WordPress】Simplicityでファビコンとアップルタッチアイコンを設定

前回の記事でサイトアイコンとして使用するイラストを作成したので、実際にこのブログに設定してみます。

Adobe Illustrator DrawとInkscapeでサイトアイコンを作成する手順
Adobe Illustrator DrawとInkscapeでサイトアイコンを作成する手順
このサイトは開設してからまだ1か月ほどしか経っておらず、とりあえず記事を書いてみたはいいものの、サイトのデザインが定まっていなくてほとんどそのままのデザイン…
スポンサーリンク
レクタングル(大)

WordPress標準機能での設定

WordPressにはサイトアイコンを設定する機能があります。

カスタマイザーから「サイト基本情報」を選択し、「画像を選択」ボタンを押して画像を設定することができます。

説明

背景が白い画像を設定してみました。右側でプレビューを見ることができます。

アプリアイコンとしては問題ないのですが、ファビコンだと背景の白い四角がそのまま表示されるので人によっては嫌かもしれません。多くのサイトは透過PNGを使用していますしね。

カスタマイズ__ヒキニートかく語りき___ヒキニートの僕が生活やメンタルなどについて語ります。

というわけで透過PNGを設定してみるとファビコンのほうはいい感じですが、アプリアイコンは背景が黒くなってしまいます。

カスタマイズ__ヒキニートかく語りき___ヒキニートの僕が生活やメンタルなどについて語ります。

僕はファビコンは背景を透明に、アップルタッチアイコンは背景を白くしたいので、次項の手順で個別に設定しました。

Simplicityでの設定

Simplicityにもファビコンとアップルタッチアイコンの設定機能がついており、カスタマイザー内の「その他」からアクセスすることができます。

「ファビコンを有効」と「アップルタッチアイコンを有効」にチェックを入れてそれぞれ画像をアップロードしてください。

simplicity説明

僕は最初ファビコンに.icoファイルを選択したのですが、うまくいかなかったので.pngを選択しました。

どれくらいのサイズのものを設定すればよいのか調べてもよくわからなかったので、前回作成した1024 x 1024の画像を両方に設定しました。

すると、「/wp-content/uploads/2016/07」内に様々なサイズの画像が生成されました。

僕が実際にアップロードした画像は一番下の「icon-transparent.png」と「icon.png」です。

一番上の「favicon.ico」は最初にアップロードしてうまくいかなかったものです。

simplicity-icon

Simplicityの側でそれぞれに必要なサイズを自動的に生成してくれたようです。

ちょっと調べてみましたが、今時のブラウザは.icoファイルでなくて.pngファイルでファビコンを表示することができるのですね。

実際の表示

MacのSafariだとこんな感じでファビコンが表示されます。

ヒキニートかく語りき___ヒキニートの僕が生活やメンタルなどについて語ります。

MacのChromeだとこんな感じです。

chrome-favicon

MacのSafariの「お気に入り」での表示はこんな感じ。背景が透明の画像のほうが使用されているようです。

お気に入り

iPhoneホーム画面での表示。

IMG_8917

iPhoneのSafariの「お気に入り」での表示。

IMG_8916

どれもいい感じで表示できています。

絵心がないのでシンプルなアイコンしか作れませんでしたが、それでも自分のサイトのアイコンが表示されるとテンションが上がりますね。

画像さえ用意できてしまえばSimplicityでのアイコンの設定は簡単なので、ぜひチャレンジしてみてください。

スポンサーリンク
レクタングル(大)
レクタングル(大)
ヒキニートかく語りき
【WordPress】Simplicityでファビコンとアップルタッチアイコンを設定
この記事をお届けした
ヒキニートかく語りきの最新ニュース情報を、
いいねしてチェックしよう!