faviconが表示されない？WordPressのプラグインRealFaviconGeneratorでファビコンを簡単に設定する方法

皆さんはWEBサイトにfavicon（ファビコン）を設置していますか？

デバイスの多様化により色々なサイズのファビコンを用意しなければならない‥なかなか手間がかかりますよね。手間をかけたのに表示されない！なんて壁にぶつかっている方も多いかと思います。

今回はそんな方におすすめのプラグイン「Favicon by RealFaviconGenerator」をご紹介します！

そもそもファビコンって何！？という方もご安心下さい。
誰でも簡単にファビコンの設置が出来るので、ぜひ活用して頂きたいです。

【目次】
1．favcon（ファビコン）とは？
2．Real FaviconGeneratorをインストール
3．まずは画像の用意！
4．faviconの設定方法
5．まとめ

1．favcon（ファビコン）とは？

Wikipediaでは以下のように説明しています。

favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon（フェイバリット・アイコン：お気に入りアイコン）という英語の語句を縮約したものである。参考：Favicon-ウィキペディア

ファビコンとはWEBサイトを開いた時にタブに表示される小さなアイコンのことです。

ブックマークをした際にもこのアイコンが表示される為、ユーザーがお気に入り一覧から目当てのページを探す際の目印にもなります。

ファビコンはページを判別するための目印になる！リピート率の高いWEBサイトを目指すのであればユーザーの記憶に残りやすいファビコンの設置は必須です。

2．RealFaviconGeneratorをインストール

プラグインを使わずにファビコンを設置するとなると、ブラウザ上の表示だけでなく、iPhoneやandroid端末でブックマークされた時のアイコン、その他様々なデバイスにむけて対策しなくてはなりません。

それをひとまとめに設定してくれるのがこのプラグイン
「Favicon by RealFaviconGenerator」です。

WordPressのダッシュボードを開き、「プラグイン」→「新規追加」

Favicon by RealFaviconGeneratorで検索をしてこちらをインストールして下さい。

3．まずは画像の用意！

インストールをしたら、まずは画像の用意です。

注意点としてここでの画像サイズはプラグインが推奨する 260 × 260 ピクセル以上の正方形を用意しましょう。

画像ファイルの拡張子は「png」もしくは「gif」、背景を透過させたものが望ましいです。

illustratorやPhotoshopを使用するか、無料で利用できる画像編集・加工ソフトがありますので、画像をpngもしくは、gif形式で保存して下さい。

4．faviconの設定方法

プラグインをインストールすると、「設定」に「Favicon」が出てきますので、こちらを開いてください。

開くとこのような画面が出てきますのでAppearance > Faviconをクリック。

①Select from the Media Libraryをクリックするとメディアライブラリが開きますので、ここで先ほどファビコン用に作った画像をアップロードし、選択してください。

選択し終えたら②Generate faviconをクリック。

するとファビコンの細かい設定画面に切り替わります。
まずはiPhoneやAdroid端末でホーム画面にブックマークを追加したときの表示設定を行いましょう。

①のラジオボタン Add margins and a plain background. を選択。
②で背景の色を設定出来ます。
③のつまみでmarginのサイズを調整できます。

お好みにカスタマイズしてみて下さい。

Androidも同じようにカスタマイズしたら、次はWindows Metroの設定。
赤く囲った部分でアイコンの背景色がカスタマイズ出来ますので、こちらも同じように好みのものに設定して下さい。

最後にページ下にあるこちらの設定。

「App name」というタブを開き、ラジオボタンはSpecific app name, override the page title.を選択して下さい。

My Siteに入力したタイトルが、ホーム画面にブックマークを追加した時のタイトルになります。

ここまでの設定が終わったら「Generate your Favicons and HTML code」をクリックして終了です！

ご覧の通り、しっかりファビコンが反映しました。

5．まとめ

WEBサイトを制作する上で躓きがちなファビコンの設置
このプラグインを利用すれば簡単に設置することが出来ます。

デバイスごとに画像サイズを分けて作る必要もありませんので、手間もかかりません。

ファビコンの設置に悩まれていた方に、ぜひ有効活用して頂きたいです！