サイトアイコン(favicon)を設定する

ご存知かと思いますが、favicon(ファビコン)を設定しておくと、Webブラウザのこの部分にそれが表示されます。

site_icon_00

また、ブックマークを一覧表示したときにも表示されますので、見つけやすくなります。さらには、スマートフォンでのアイコンにも使われます。

これを設定するには、以前はプラグインを使いましたが、最近はWordPress自体がサポートしてくれたので、非常に簡単に設定できるようになりました。

では、その方法を説明しましょう。

まずは、管理画面で、「外観」→「カスタマイズ」を開きます。

site_icon_01

「サイト基本情報」を開きます。

site_icon_02

ここに「サイトアイコン」の設定があります。「画像を選択」ボタンを押します。

site_icon_03

メディアライブラリが開きますので、希望する画像を選びます。あるいは、専用画像を新たに用意したのなら、「ファイルをアップロード」タブを開いて、画像をアップロードします。アップロード方法は、通常の画像アップロード方法と同じです。

site_icon_04

画像サイズは、512×512ピクセル以上が推奨されています。

希望の画像を選んだら、右下の「選択」ボタンを押します。この際、選択した画像が正方形でなければ、切り抜きの画面が出てきますので、その指示に従って下さい。

そうすると、このように、プレビューが表示されます。

site_icon_05

後は、上の「保存して公開」を押せば終了です。

これで、無事、faviconが表示されました。

site_icon_06

念のため、スマートフォンでも確認しておきましょう。これは、iPhoneのSafariでサイトを開いた状態です。

site_icon_07

「お気に入りに追加」や「ブックマークを追加」などをタップすれば、アイコン入りで設定画面が表示されます。

site_icon_08

これは、「ホーム画面に追加」を選択した状態です。

site_icon_09

実際に、ホーム画面に追加すると、このようにアイコンが表示されます。

site_icon_10

WordPress本体がfavicon/サイトアイコンをサポートしてくれたので非常に簡単ですから、設定ておきましょう。