「ファビコン」って何だ？ WordPress用サイトアイコンの設置方法【プラグイン不要】

こんにちは。
ネット系フリーランサー mammina です。

「ファビコン」ってご存じですか？ ウェブサイトやブログを作っても、案外忘れがちなポイントなんですね。

WordPress にファビコンを設置するには、以前は、favicon.ico ファイルを用意したり、WordPress のプラグインを使ったりする必要がありました。

でも、WordPress バージョン4.3 以降なら、そんな必要はありません。ワードプレスの基本機能に含まれているんですね。画像さえあれば「3分」で出来ます！

私もこのサイト 37min.com に、まだ ファビコンを付けていなかったので、設置しながら手順を公開していきます。

そもそも「ファビコン」って何？

「ファビコン」とは、サイトをイメージさせる「小さなアイコン」のこと

Favarite Icon の略で、ブラウザのお気に入り画面やタブ、アドレスバー、ブックマークなどに表示される小さなアイコンのことです。

「お気に入り」＝ブックマークに表示されていたことから、この名前がついたものと思われます。

スマホで、サイトを「ホーム画面に追加」する時にも使われる

今はスマホやタブレットで、サイトへのリンクを「ホーム画面」に置いたりしますよね？ その時にも、ファビコンを設定しておくと、見た目がカッコいいです。

まみーな

実際には「アプリアイコン」という
別モノになりますが、
この方法だと同じ画像が表示されます

WordPress へのファビコン設置

ファビコンを設置する基本的な流れとしては、

1. 512×512ピクセルの正方形の画像を用意する
2. ワートプレスの [外観] – [カスタマイズ] で設定する

となります。

さっそくやっていきましょう！

【ステップ1】ファビコン画像(サイトアイコン画像)の用意

まずは、WordPress 用にファビコン画像として、どんなものを用意したらいいか、選び方のコツを紹介します。

512 × 512px の正方形の画像を用意する

私は、これにしました。

ファビコンといえば、32×32ピクセル、16×16ピクセルなどの、小さいサイズで用意していましたが、WordPress のサイトアイコン設定では「512×512ピクセル以上」が推奨されています。

ブラウザのタブの横に「小さく表示させる」のに、なぜこんなに大きな画像が必要かは謎ですが、おそらくスマホなどの機器で「リンクをホームに追加」した時に見栄えを良くするためなのかな、と思います。

まみーな

この後、設定の部分で出てきますが、
設定項目の名前も「ファビコン」でなく
「サイトアイコン」と別物ですしね。

正方形の画像でなくても、あとで「切り抜く」ことができますが、設置された時のイメージが湧きやすいように最初からピッタリサイズで用意しておくことをオススメします。

【画像の選び方】細かい描写のある画像より「シンボル」的なマークを

これは、ブラウザのタブに表示される様子をイメージするとわかりやすいのですが……

かなり小さいサイズで表示されます。具体的に言うと、16×16ピクセルです。

もうこの小ささになると、顔を描いても表情なんかわからないし、文字をたくさん書いても読めません。

なので、「文字1文字」とか「マーク」とか、ワンポイントに絞るようにしましょう。迷ったら、他のサイトを参考にするといいですね！

【注意】背景が透明なものはNG！ iPhone だと「透明」部分は「黒」になります

iPhone のアプリアイコンについては、決まった枠内に表示されることが理由なのだと思うのですが……「.png」形式などで作って、背景を透明にすると「透明」部分が「黒く」表示されてしまいます！

私の場合、「黒い文字」を「透明背景」に載せたので、何がなにやら(^^;

なので、背景は付けておいた方が無難です。

【ステップ2】ワードプレスへのファビコンの設置

続いて、WordPress に設置していきます。普段やっている「記事投稿で画像をひとつ追加する」のと、さほど変わらない手順なのでカンタンですよ！

ワードプレス「カスタマイズ」の「サイトアイコン」項目で設定する

管理メニューから[外観] – [カスタマイズ] をクリックします。

[サイト基本情報] をクリックします。

[サイトアイコン] 項目から設定します。[画像を選択] ボタンをクリックします。

画像選択画面から、ファビコンにしたい画像を選択します。

ファビコン画像が読み込まれたので、[保存して公開] ボタンをクリックします。

ブラウザでサイトを見て確認

ブラウザで見るとファビコン画像がばっちり設定されています。

ファビコン(サイトアイコン)が必要な２つの理由

ここまでで無事にファビコン画像が設置されました。でも、そもそも、なぜ、ファビコン(サイトアイコン)が必要なのでしょうか？

【必要な理由1】サイトの信頼感アップ

ファビコンというのは、設置していなくても「ウェブサイトの表示に影響しない」細かい部分になります。でも、あるのとないのでは、やっぱり印象が違いますよね？

特に、スマホの「ホームに追加」された時の見た目が大きく違います。

「人は見た目が9割」なんていう本もありましたが、見た目の印象が整えるというのは、そこまで「きちんと手を掛けている」という信頼感につながってきます。

【必要な理由2】自分のサイトを憶えてもらえる

これは、もう、見比べていただければ明らかでしょう。

アイコンがあるのとないのでは、明らかに「サイトアイコンあり」の方が印象に残りますよね？ (サイトアイコンなしは、途中で切れたりしていて、中途半端な印象ですし……)

まとめ

今回は、ブラウザのタブなどに表示される「ファビコン」を WordPress で設定する方法を紹介しました。

今のWordPress 4.3以降なら、基本機能で「サイトアイコンの設置」があるので、512px四方の画像さえあれば、3分で設置できます。

あなたのサイトに「ファビコン」は設置してありますか？ サイトの印象アップ・信頼性アップに有効なのでぜひ。