1. TOP
  2. ファビコンを WordPress に設定するプラグイン-RealFaviconGenerator のインストール方法

ファビコンを WordPress に設定するプラグイン-RealFaviconGenerator のインストール方法

WordPress この記事は約 8 分で読めます。
favicon

ファビコンとは、サイトをブラウザで閲覧する時に表示されるサイトのロゴマークとも言える画像です。

ファビコンを設定すればサイト閲覧時はもちろんの事、iPhoneのホーム画面にサイトを登録する時にもファビコンで設定した画像を表示させる事ができるし、PCのデスクトップにショートカットを作成した時にもファビコン画像が適用されます。

よく “第一印象で9割決まる” と言われる通り、イメージが人に与える影響はとても大きいです。なのでファビコンを設定する事により、一層サイトの価値を高める事ができるでしょう。

そんなファビコンをWordPressに簡単に設置できるプラグイン『 RealFaviconGenerator 』のインストールと初期設定方法を解説します。

世界を代表する会社からファビコンを学ぶ

イメージ=ブランドです。企業はこの “イメージ” を作り上げるために時には億を越える金額を投資します。

例えば企業のロゴ作成。たった1枚のロゴ(画像)を作るだけで、トップデザイナーに依頼すると数百万円依頼料が発生します。

そしてさらに企業イメージを高めるとなれば広告・宣伝の活用になりますが、毎年日本企業で広告費利用TOP10ランキングを見てみると、5位以上は500億円以上を広告費として年間に消費しているのが標準で、年によってはトップ企業は年間1000億円を越える広告費を消化する事もあります。

これぐらいブランドを創り上げる上でイメージというのは大事になってくるのです。それでは実際に世界的企業はファビコンを通じどのようなイメージを創り上げようとしているのか?ちょっと画像が小さくて見にくいですが実例を見てみようと思います。

・Google

1-10
画像赤枠で囲った左のアイコン画像がファビコンです。Googleは今年2015年秋にブランドの明確化から新会社 “アルファベット” の傘下に収まり、事実上子会社という立ち位置になりました。それとほぼ同時にGoogleのロゴも一新しました。

27-10

↓↓↓

26-10
ロゴ変更後の新しいファビコンが現在の画像です。Googleのロゴ変更は世界中で大きな話題になりました。そしてこの新しいロゴの『G』の文字をGoogleはファビコンとして設定しています。

・Amazon

2-10
お馴染みのAmazonのロゴです。このニッコリマーク(!?)はAmazonの段ボールにも採用され、Amazonの段ボールを見るとなぜか安心感を覚えるのは僕だけでしょうか。ラインのスタンプもリリースしており、Amaoznはこのロゴを中心としたイメージ戦略にとても力を入れております。

・Facebook

3-10
こちらはFacebookのロゴです。ウェブサイトなどで色を表現するために、色にはカラーコードという独自のコードが割り振られているのですが、Facebookと言えばこの独特の紫色のコーポレートカラーですが、『#3b5998』というカラーコードの紫色を採用しています。

この紫色を見ると『Facebookだ!』とピンとイメージが湧きますよね。Facebookはこのサイトの顔とも言えるべきコーポレートカラーを決めるのに様々な検証を重ねたようです。

・LINE

4-10

こちらがLINEのファビコンです。テレビCMでLINEの画面が出ると目がチカチカするぐらいの緑色ですが、圧倒的な存在感を放ちます。『緑と言ったらLINE!』これぐらい今では世間に浸透しています。

・ユニクロ

5-10
ユニクロはロゴマークを載せてみました。このロゴがウェブサイト等のファビコンにもなっています。

このロゴはトップデザイナーの佐藤可士和さんがプロデュースしているというのはとても有名な話です。可士和さんレベルになると、ただロゴやイメージを作成して納品するだけでなく、CM制作や新製品のプロモーション企画にも参加したりと、それこそまさにプロデューサーのような関わり方をするようになってきます。

それほどまでにロゴ作成を含めたイメージ戦略というのは重要なのです。これから解説するReal Favicon Generator を活用すれば簡単にWordPressにファビコンを設置できるので、早速インストール方法に移っていきましょう。

1. RealFaviconGenerator インストール方法

6-10
WordPress管理画面から、『プラグイン』⇒『新規追加』、『Favicon』でプラグイン検索し、『Favicon by RealFaviconGeneratorを今すぐインストール』をクリック。

7-10

『プラグインを有効化』をクリックしインストール完了。

2. ファビコンを設定する

それでは実際にファビコンの設定に入っていきます。まずは自分がファビコンに設定したい画像を、WordPress管理画面サイドバーにある『メディア』にアップロードしておきましょう。

2-1. ファビコン画像を選択する

8-10
WordPress管理画面から『外観』⇒『Favicon』を選択、表示されたら『 Select from the Media Library 』をクリック。

9-10
10-10
ファビコンに設定したい画像を選択し、右下の『選択』をクリック。今回は月の画像をファビコンとして設定してみたいと思います。

11-10
画像を選択したら『 Generate favicon 』をクリック。選択した画像のアップロードが完了し、詳細設定画面に移ります。

3. ファビコンの詳細設定

次にファビコンの詳細設定を行います。

3-1. ファビコンの詳細設定

12-10

この画面では、ファビコンが実際に表示される時の詳細を設定する事が可能です。『iOS=iPhoneやiPadなどのApple社製品』『Android=Apple社以外の製品』と細かな設定をする事が可能です。

特に画像の通りAndroid用の設定では、アプリ(ショートカット)下に表示される名前や、赤枠で囲った『Options』をクリックすれば、最初に表示されるページのURLを指定する事も可能です。

『Background color』欄に色コードを挿入すれば、色を指定する事も可能です。詳しくは『色 コード』で検索すると調べる事ができます。

13-10
Other platformsでは、MacとWindowsでの設定をする事ができます。色を変えるぐらいでデフォルトで良いでしょう。

4. ファビコン画像設定

最後の『Favicon Generator Options』では、画像の詳細設定を選択する事ができます。

4-1. Compression

14-10
Compressionでは、画像の形を選ぶ事ができます。画像によっては上記にようにほとんど差がでない場合があるので、任意で大丈夫です。

4-2. Scaling algorithm

15-10
レトロなドット絵に見えますが、こちらは画像認識の方法です。基本的にはデフォルトのままで大丈夫です。

4-3. App name

16-10
こちらは先ほど設定したように、スマホのホーム画面にブックマークしたり、PCのデスクトップに保存(ショートカット)した時に表示される名前の事です。運営するサイトのタイトルを設定するのが基本です。

5. ファビコンを出力する

ここまでの設定が終了したら、最終ステップです。

17-10
『Generate your Favicons and HTML code』をクリック。

18-10
『Favicon installed!』の表示を確認し、インストール完了です。『Check your favicon』をクリックすれば、実際の表示を確認する事ができます。

6. 反映を確認する

19-10
先ほどの画面で『Check your favicon』をクリックすると、赤枠の通り実際にブラウザ等で表示される画像を確認する事ができます。各デバイスでの表示や、アプリ名の表示などを確認しましょう。

まとめ

ファビコンを設定したからといってSEO的に有利になる事もなく、検索順位が上がる訳ではありません。

しかし、ファビコンを通じ良い印象を持ってもらう事ができるのであれば、このような小さな積み重ねがもしかしたら “0,1%” のリピート率向上に繋がるかもしれません。

インターネットの世界ではこの “0,1%” の積み重ねがとても重要で、例えば月間100万PVのメディアを運営したとすれば、0,1%は1000PVになります。ファビコンを設定するだけでもしかしたら1000PVの上昇が見込めるかもしれないのです。

この細かな0,1%の積み重ねが1%になり、そして2%になり、1万PV増、2万PV増という結果に繋がるのです。もしかしたらファビコンを設定しても多くの人は『このファビコンはスマートだ。』なんて事は思わないでしょう。しかしこのような小さな積み重ねが結果に繋がります。

ファビコンはプラグインをインストールして最初に画像を設定するだけで、あとはずっと自動的に機能してくれます。もちろん、途中で何度も画像を差し替える事はできるので、ぜひこれを機会に運営サイトにファビコンを設定してみてください。

【関連記事】
・WordPressおすすめプラグイン16選

\ SNSでシェアしよう! /

次世代ビジネス研究所の注目記事を受け取ろう

favicon

この記事が気に入ったら
いいね!しよう

次世代ビジネス研究所の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

運営者紹介 運営者一覧

次世代ビジネス研究所

次世代ビジネス研究所

大学卒業後、某企業へ就職。
その後サラリーマン生活を経て、脱サラ・起業。
気まぐれで独り言を不定期更新。

関連記事

  • mail

    Contact Form 7 の使い方と初期設定・カスタマイズ方法

  • ld2

    STINGER7のサイドバーにプロフィールを画像付きで設置する方法

  • wordpress-2

    WordPressとは? | 5つのメリットと3つのデメリット

  • edit

    TinyMCE Advanced の使い方と設定方法

  • head

    Head Cleaner の使い方と初期設定方法

  • source

    W3 Total Cache の使い方と初期設定・インストール方法