WordPressでファビコン表示「FaviconbyRealFaviconGenerator」の使い方

ファビコンを設定する事でブラウザのタブ部分にオリジナルのアイコンが追加されます。
特に複数のタブを開いた時でもわかりやすくなりますので、ユーザービリティの為にも設定しましょう。

WordPressであれば「Favicon by RealFaviconGenerator」というプラグインを使えば簡単に対応する事ができますのでおすすめです。

ファビコンとは


↑当サイトのファビコンです。

まずはファビコンについて簡単に説明します。

ファビコンは上記の画像のようにブラウザの「タブ」や「お気に入り」表示されるアイコンの事を言います。
設定する事でオリジナルの画像を使用する事ができるのでブランディングやイメージ向上に役立ちます。

タブが並んでいてもわかりやすい

タブブラウザでは大量のタブが並ぶとタイトルが読めなくなりファビコンしか見えなくなってしまう事があります。
そんな時でもユーザーに少しでも見つけてもらいやすくするためにファビコンを設定するのが有効です。


↑大量のタブが開いていてもファビコンを設定していることでユーザーにわかりやすい。

Favicon by RealFaviconGeneratorの使い方

ここまでファビコンについて説明していきましたが、続いてファビコンの設定方法を紹介していきます。

WordPressでファビコンを設定するならFavicon by RealFaviconGeneratorというプラグインがおすすめです。

①ファビコン用の画像を準備する

まずはファビコンの画像を準備しましょう。
サイトのロゴやアイコンなどをファビコンとして設定するとユーザーにもわかりやすくおすすめです。
推奨されている260×260px以上ですので、できるだけこれ以上のサイズの画像を選択しましょう。

ちなみに私の場合は有料のロゴジェネレーターを利用してオリジナルのロゴを作りました。

②プラグインのインストールと有効化

WordPressの管理画面から「プラグイン > 新規登録」を洗濯します。
検索ウィンドウに「Favicon by RealFaviconGenerator」と入力してプラグインを検索します。

検索したらインストール&有効化してください。

③Favicon Settingsを開く

WordPressの管理画面「設定 > Favicon」を選択してFavicon Settingsを開きましょう。
Favicon Settings画面を開いたら続いて「Appearance > Favicon」をクリックしてください。

④ファビコンとなる画像の選択

ファビコンとなる画像の指定をします。
「Select from the Media Library」ボタンを押すことで、メディアライブラリが開くのでファビコンとして設定したい画像を選びましょう。

画像の選択が終わったら「Generate favicon」ボタンを押します。

Generate faviconを押すことで、画像の読み込みが始まります。
読み込みにはそれほど時間がかかりません。

⑤ファビコンの表示を調整

ファビコンの表示を確認確認しながら調整する事ができます。
色合いを調整したりできますので、気になるのであれば調整しましょう。

参考までに当サイトの設定を紹介していきます。
この辺りはファビコンの色合いなどで変わってくると思いますのでプレビューを見ながら各自で調整しましょう。

①Favicon for iOS – Web Clip

デフォルトだと黒い背景でアイコンが埋もれてしまうため「Add a solid, plain background to fill the transparent regions.」を選択して背景を白(#ffffff)に設定。

②Favicon for Android Chrome

デフォルトだと背景が透過されており、見ずらいため「Add a solid, plain background to fill the transparent regions.」を選択して背景を白(#ffffff)に設定。

③Windows Metro

デフォルトだとロゴが見ずらいため「Use a white silhouette version of the favicon. Works well with pictures with significant transparent regions.」を選択しロゴを白に設定。

macOS Safari、Favicon Generator Optionの両方ともデフォルトの状態で設定。
表示を確認して問題なければ「Generate your Favicons and HTML code」をクリックしてファビコンを作成します。

Generate your Favicons and HTML codeをクリックするとファビコンが作成されるので少し待ちましょう。
処理が終わると自動で管理画面に戻ってきます。

設定したファビコンが反映されるまで少し待ちましょう。

まとめ

ファビコンを設定する事で、ブラウザのアドレスバーに指定した画像やアイコンなどを表示することができます。
タブブラウザではたくさんのページを開いたままにしてるユーザーも多いため、アドレスバーにファビコンが表示されているだけでも目立ちやすくなります。

また、ファビコンに表示する画像をサイトのロゴにするなどすればブランディングにもなるでしょう。

WordPressで運営されているサイトならFavicon by RealFaviconGeneratorを使えば簡単にファビコンを設定できますので、ユーザービリティやブランディングの為にも設定しておくと良いでしょう。

ABOUTこの記事をかいた人

ウェブマーケティング・SEOコンサルタント 100以上のメディア運営に関わり、担当メディアの売上を半年で5倍に経験を持つ。バナー・LPの作成から、広告の運用、コンテンツの改善等、ウェブメディアの運営に欠かせない業務を全て経験。現場で喜ばれるだけの改善でなく、結果につながるマーケティングを実現します。 詳しく知りたい場合はこちら→ポートフォリオ