ワードプレス Simplicityにファビコン(サイトアイコン)を設定する方法

ブラウザのブックマークに画像をつけたり、
ブラウザでページを表示した時、タイトルバーやタブに画像を
表示するためには、ファビコン、または、サイトアイコンと呼ばれる
画像を設定する必要があります。

ブックマークの画像

ブラウザタブの画像

ワードプレスでテンプレートにSimplicity を使っている場合の、
サイトアイコンの設定方法を説明します。

ワードプレス Simplicity にサイトアイコンを設定する手順

画像は、正方形で512ピクセル以上のものが必要です。
別途用意してください。

ワードプレスのダッシュボードから、
「外観→カスタマイズ→サイト基本情報」
に進みます。

「サイトアイコン」の項目がありますので、
「画像を選択」をクリックして、作成した画像を選択します。

「保存して公開」をクリックして確定します。

以上で設定は終わりです。
簡単ですよね。

これで、下図のように、ファビコン(サイトアイコン)が表示されます。

通常、これでOKですが、透過型pngファイルなど、透明色を
含む場合、iphoneのアイコン表示では、透明色が背景の黒色になって
見づらい問題があるとのことです。

対応方法としては、アップル製品のアイコン表示用に、
透過色を白色にしたバージョンの画像を別に用意して、
別途設定する方法があります。

アップル製品のアイコンをSimplicityの設定では、
「アップルタッチアイコン」と呼びます。

手順を下に示します。

透過型の画像ファイルをコピーして、透明色を白色に変更して
アップルタッチアイコン用の画像を作成します。

ワードプレスのダッシュボードから、
「外観→カスタマイズ→その他」
に進みます。

「アップルタッチアイコンを有効」にチェックを入れ、
「画像を選択」を押して、選択します。

画像を選択したら、
「保存して公開」
をクリックして確定します。

※ちなみに、すぐ上の項目に
「ファビコンを有効」「ファビコン」
の項目がありますが、
「サイトアイコン」の項目がなかった
古いワードプレス用の設定であり、設定する必要はありません。
設定する場合、「サイトアイコン」の設定を外す必要があります。

サイトアイコンを設定して、ブラウザのタブやブックマークで目立つようにしましょう。