WordPress ファビコンの作り方・設定方法

2019年4月11日

サイトアイコン(ファビコン)の設定方法

以前までWordPressにファビコン(favicon)を設定する場合、head内に部分のファビコン用のタグを直接書きこんだり、プラグインを使用してファビコンを入れてきていました。

が、WordPressバージョン4.3以降、ファビコンを " サイトアイコン " という位置づけで設定できるようになりました。

今回はプラグインも小難しいタグの知識もなしにWordPress純正の機能でファビコンを簡単に設定する方法を解説します。

faviconの設定手順

Wordpress_favicon設定手順1

管理メニューの外観 → カスタマイズを選択

ファビコンの設定のためにはまず、管理画面にログイン。

管理メニューの外観内 カスタマイズを選択します。

Wordpress_favicon設定手順2

サイト基本情報を選択

並んでいるメニューの中から、サイト基本情報を選択します。

Wordpress_favicon設定手順3

画像を選択ボタンをクリックする。

一番下の画像を選択ボタンをクリックします。

この中にはもともとサイトのタイトルとキャッチフレーズを設定できる欄がありましたが、WordPressのバージョン4.3からサイトアイコンと言う形でファビコンをアップロード・設定できるようになりました。

もちろん4.3以降の4.4でも問題なく使用できています。

Wordpress_favicon設定手順3_2

アップロード or アップ済のファイルを選択

と、メディアライブラリ画面が表示されます。

既にアップロード済のファイルを選ぶか、新たに画像をアップロードして選択しましょう。

jpgだけでなくpngで透明を織り交ぜた画像も可能です。

本サイトもpngで丸いWordPressマークにし、丸枠の外は透明にしています。

なお、画像のサイズが最低でも512px × 512px必要です。

ちなみに本サイトでは、WordPressのマークをファビコンに設定しました。

Wordpress_favicon設定手順3_3

画像の編集画面

ファビコンは正方形でなければいけませんが、選択した画像が長方形で縦横サイズが揃っていない場合、画像を切り取る画面へと移ります。

適宜切り取ってかっこいいファビコンを作りましょう。

Wordpress_favicon設定手順4

最後は忘れずに保存して公開ボタンを押しましょう

結構忘れがちですが、ここで " 保存して公開ボタン " を押さないと反映されないので注意!

<link rel="icon" href="https://blog-blog.net/wp-content/uploads/2016/03/cropped-favicon-32x32.png" sizes="32x32">
<link rel="icon" href="https://blog-blog.net/wp-content/uploads/2016/03/cropped-favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon-precomposed" href="https://blog-blog.net/wp-content/uploads/2016/03/cropped-favicon-180x180.png">
<meta name="msapplication-TileImage" content="https://blog-blog.net/wp-content/uploads/2016/03/cropped-favicon-270x270.png">

この設定によって自動的にhead内に上記4つのタグが追加され、ファビコンが必要になる場面場面で適したサイズで表示してくれるように。

基本的にはその場面で適したサイズの物が選択されるようですので、もし既にプラグインやテーマのカスタマイズで似たようなタグを吐き出させている場合でも、表示上特に問題なければそのままでもよいでしょう。

ファビコンを設定するメリット

ファビコンは単純にビジュアル的な面での効果しかありませんが、そのメリットはなかなかです。

PCブラウザで見たときのタブの部分の目印になるのはもちろん、ブックマークがズラ~っと並んだ時に視覚的に探しやすいなんてメリットも。

また、ファビコンはWEBサイトをiPhone、Androidなどのスマホ、iPadなどタブレットのホーム画面にショートカットを追加する際のアイコンにもなります。

iPhoneのホーム画面に追加した時のファビコン(アイコン)の表示

iPhoneでサイトをホーム画面に追加した際のファビコンの表示

このようにPCブラウザのタブ上だけでなくあらゆる場所でサイトのアイコンとして包括的に対応してくれるので、基本的には設定した方がいいです。

そうでないと、せっかくサイトを気に入ってくれてお気に入りに入れたりiPhoneのホーム画面に追加してくれても没個性でわかりにくくなってしまいます。

とにかくビジュアルのみの部分なのでサイトを作る上で必須なわけではありませんが、WordPressのバージョン4.3以降では特にプラグインや特殊なカスタマイズが必要なしに簡単に設定できますので、ぜひ一つ設定しておきましょう。