WordPress

WordPressの管理画面の操作だけでFavicon(ファビコン)を設置しよう

WordPress

ファビコンというものをご存知でしょか?
サイトの上部に表示されるアイコンのことで、ブランディングやクリック率のUPに繋がると言われております。
またiPhoneなどで「ホームに画面に追加」した際も、アイコンとして機能することが出来ます。
ここで紹介するのはHTMLのheadタグ内に記述はせずに、管理画面から簡単に行える方法で設置していきます。

管理画面からファビコンの設置をする

ファビコンの設置

WordPressの管理画面を開いて、外観メニュー内の「カスタマイズ」を選択してください。

ファビコンの設置

続いて「サイト基本情報」を選択します。

ファビコンの設置

「画像を選択」を選択します。

ファビコンの設置

※事前に512×512ピクセルの画像を準備・作成する必要があります。
アイコンに使いたい画像をアップロードし、選択してください。

ファビコンの設置

ファビコンの表示されるイメージが下部に表示されます。
これでOKなら「公開」を選択し、変更される場合は「画像の変更」を選択します。

以上でファビコンの設置は完了です。
サイトのタブを確認すると指定した画像が表示されていると思います。
またiPhoneでサイトを「ホームに画面に追加」し確認してみてください。

HTMLのhead内に出力されるタグ

ここは気になる方だけ見てもらえたら大丈夫です。
今回のファビコンの指定によって出力されるタグは以下になります。

<link rel="icon" href="cropped-favicon-1-3-32x32.jpg" sizes="32x32">
<link rel="icon" href="cropped-favicon-1-3-192x192.jpg" sizes="192x192">
<link rel="apple-touch-icon-precomposed" href="cropped-favicon-1-3-180x180.jpg">
<meta name="msapplication-TileImage" content="cropped-favicon-1-3-270x270.jpg">

1、2行目の「 rel=”icon” 」は解像度が違うアイコンになり、デバイスの環境に合わせて読み込まれます。
3行目「 rel=”apple-touch-icon-precomposed” 」はスマホのアイコン用の指定になります。
4行目「 name=”msapplication-TileImage” 」はWindows8のピン留めに使われるそうです。

あなたにおすすめの記事