ワードプレスでファビコンを簡単に設置できるプラグインとは?

株式会社サンビリーフ認定マーケティングコンサルタントの山城憲大(ヤマシロ ノリヒロ)です。

 

このマーケティングレシピの私の記事で、SEO対策やホームページ制作・運営、プラグイン(ワードプレス)に関しての記事をを書いてきました。

 

今回は、その中でお客様に「信頼性の高いサイト」だという印象を与えるファビコンを設定してくれるプラグインについてお伝えします。

 

とこで皆さんは「ファビコン」を知っていますか?

 

おそらく誰もが目にしたことがあります。

それは「Yahoo」や「Google」などの大手サイトはもとより、近年ではワードプレスの普及に伴い、設定が簡単になったこともあり、小さな会社まで多くのサイトでファビコンを設定しています

 

百聞は一見に如かずということで、「ファビコン」とは何か画像で見てみましょう。

↑コレです。見たことあるのではないでしょうか。

 

ちなみにこれが「ファビコン」を設定していないWebサイトのタブです。

 

ファビコンを設定しているサイトとしてないサイトを比べると、設定しているサイトは、デザイン的にも良く見えるし、サイトのブランド的にも良く見えますし、お客様には、「信頼できるサイト」だという印象を与えます。

 

設定していないサイトは、寂しい印象を与えます。

 

そんなお客様に好印象をもってもらえるファビコン、ぜひあなたのWebサイトでも設置することをオススメします。

 

ということで、今日は「ファビコン」を設定するプラグインを紹介します。Webサイトをワードプレスで運営している方は、ぜひ最後まで読んでください。

 

【目次】

1、プラグインを使う前にやるべきこと

2、「RealFaviconGenerator」の使い方手順

3、まとめ

 

1、プラグインを使う前にやるべきこと

プラグインを使って「ファビコン」を設定する前に、やらなければいけない工程が1つあります。

それは、そもそものファビコンのデータを用意する。という工程のことです。

 

このデータを用意しなければ、ファビコンを設定するプラグインをインストールしても、データがないので、ファビコンを設定できません

 

ということで、用意するファビコンのデータって何なのか。

 

そのデータを用意する時には「データ形式」と「サイズ」というポイントを押さえる必要があります。

 

では、その2つのことについて説明します。

 

【データ形式】について

ファビコンは画像です。

その画像のデータ形式には、PNG、GIF、JPG、PSD、EPS、SVGなど様々な形式があります。

ファビコンの場合は、PNGやGIF形式が良いとされています。

私はこれまでの制作したファビコンについては、PNGで制作することがほとんどです。

その理由は、PNGは画像の劣化が少ないからといです。

なので、PNGで制作することをオススメします。

 

【サイズ】について

Webで画像を使用する際は、必ず「サイズ」ということを考えなくてはいけません。

 

ここで言うサイズには2つの意味があります。

一つが何メガバイト(MB)とか、何キロバイト(KB)などの、容量(※人間で言う体重みたいなもの)。

もう一つが、何ピクセル(px)という、縦横の長さ(※人間でいうところの身長みたいなもの)。

※上記の()内の英字は単位を表現する文字です。

 

容量については、Webで使う画像の場合は表示速度を考えると、すべての画像は出来るだけ容量は少ないほうがいいと言えます。

もちろん画像提供サービスのサイトなど例外はあります(※その場合でも表示用と提供用で分けるべきです)。

※最後に容量を小さくするWebサービス(無料)を紹介します。

 

そしてファビコンでサイズと言えば、こちらのほうで「縦横の長さ」です。

ファビコンのサイズは、ブラウザ(IE、chrome、firefoxなど)やデバイス(PC、スマホ、タブレット)などで推奨サイズがことなり、その種類は10数種類あります。

つまりファビコンは複数サイズ用意する必要がある。ということです。

 

10数種類も画像を用意するのは、大変ですよね。

なので、最低限用意するサイズをお伝えします。

 

最低限用意するサイズは以下の1種類のみです。

そのサイズ = 260px × 260px

 

実はこの1種類を用意すれば、プラグインで自動で様々なサイズの画像を生成してくれます。

それではファビコンが設定できるプラグイン「RealFaviconGenerator」の使い方を教えたいと思います。

 

2、「RealFaviconGenerator」の使い方手順

まずはいつものようにプラグインをインストールします。

今回プラグインの検索欄に入力する文字は「RealFaviconGenerator」にします。

 

それではここからが使い方の手順です(プラグインのインストール後)。

手順1、「外観」>「favicon」をクリック。

手順2、「Select from the Media Library」ボタンをクリック。

手順3、メディアライブラリになるので、使用する画像をドラック&ドロップ(ドロップした画像がチェックされて選択された状態になる)。

手順4、画面右下の「選択」ボタンをクリック。

手順5、「Generate favicon」ボタンをクリック(※外部サイトの自動生成画面になる)。

手順6、「Compression」タブをクリック。

ここでは、画像容量の圧縮設定ができます。デフォルトでOKです。

手順7、「Scaling algorithm」タブをクリック。

ここでは、ファビコンの画像を選択します。

手順8、「App name」タブをクリック。

ここでは、iPhoneやWindows 8のPC上のサイト名を設定します(※iPhoneホームに表示される文字が6文字なので、5~6文字がオススメ)。。

手順9、「Generate your Favicons and HTML code」ボタンをクリック。

手順10、以下の「Favicon installed!」という文字が表示されれば、問題なくファビコンが設定されました。

以上が使い方の手順です。

ちょっと手順は多いですが、ファビコンを自動生成したりしてくれるので、簡単に設定できます。

 

3、まとめ

今回は、「Favicon Rotator」の方法を紹介しました。

おさらいですが、設定するには以下のステップを踏みます。

1、260px×260pxのファビコンに使用する画像を用意。

2、「RealFaviconGenerator」プラグインをインストール。

3、プラグインの設定画面で設定。

以上です。

 

先にも述べましたが「ファビコン」は、Webサイトのデザイン的も良く見えるし、お客様には「信頼できるサイト」だという印象を持ってもらえます

 

また、お気に入りに関して言うと、下記の画像のように「ファビコン」があると、目立ちます。
そのため、お客様がお気に入りの中で、発見しやすくなり、クリックされる回数も増えます。

 

視覚的な観点で言うと、アイコンは記憶しやすいものなので、Webサイトのシンボルとして、お客様の記憶に刷り込まれます。そうすることで好印象を持ってもらえるし、クリックもされやすくなります。

 

これまでみてきたように、「ファビコン」とはSEO的な対策ではありませんが、直接お客様に好印象を持ってもらったり、記憶してもらったりといったポジティブな感情を持ってもらえます。

なので、あなたのWebサイトにもファビコンを設定することをオススメします。

 

今回の記事を参考にして、あなたもWebサイトを改善することに役立ててください。
では、また次回にあいましょう。

 

***** PS *****
<容量を小さくするWebサービス>

Tinypng.com

※PNGの容量を小さくするにはこのサイトがオススメです。

 

Optimizilla

※JPGの容量を小さくするにはこのサイトがオススメです。

おすすめの記事