たまにWebサイトで、タイトルバーに表記されるアイコンが

そのサイト独自のものの事がありますのよね。

 

これです。ファビコンと言います。

Favicon by RealFaviconGenerator010

 

設定をする際、PCだけでなくスマホ用も用意したりと複数用意する画像を必要があり

めんどくさくて後回しにして、そのまま未設定のまま・・・。

という事は経験ないでしょうか?

僕がまさにそれですが・・・。

 

 

しかし、今回紹介するwordpress プラグイン【Favicon by RealFaviconGenerator】を使えば

用意する画像はたった一つで、しかも簡単にファビコンの設定が出来てしまいます。

 

 

そんなファビコンの役割と必要性

そして簡単な設定方法について解説します。

是非あなたのサイトにも取り入れてみてください^^

 

 

 

スポンサーリンク

【前説】ファビコンの役割と必要性

ファビコンは、英語でFaviconと書き、Facvorite icon、お気に入りのアイコンという意味で

もともとInternet Explorer(以下IE)の独自機能で、お気に入り登録をすると表示されるものでした。

あるとオシャレ程度で、もとはそこまで重要なものではなかったようです。

 

しかし、最近ではGoogle Crome 等IE以外のブラウザでもお気に入りの登録に関係なく

表示されるようになりました。

また、お気に入り登録時のアイコンだけではなく

デスクトップへのショートカットアイコンとしても反映され

数あるサイトの中からあなたのサイトを識別するための視覚的な手掛かりになるようになりました。

 

このアイコン=あなたのサイトと紐づけば、より読者さんも定着しやすくなるきっかけとなりえます。

以上の事から、これからサイト独自のファビコンを持つことは、

ファインダビリティ(findability:情報の見つけやすさ)の

助けに繋がるとても重要な要素になりそうです。

 

特にお金のかかるものでもありませんし、簡単な導入でこれだけの恩恵をえられるのであれば

ここはひとつ、やってみましょう!

 

【導入方法】早速インストールをしましょう

Favicon by RealFaviconGeneratorプラグインをインストールにするには

【ダッシュボード】⇒【プラグイン】⇒新規追加で表示される画面の検索ボックスで

【Favicon by RealFaviconGenerator】と検索すると出てきます。

 

尚、プラグインのインストール方法についてはこちらで解説しています。

機能拡張!簡単なプラグインのインストール方法

 

【Favicon by RealFaviconGenerator】プラグインが表示されたら、

【いますぐインストール】と書かれた箇所をクリックしてインストールして下さい。

これだけで、インストールが完了します。

***

尚、ダウンロードしてインストールをする場合は、下記のアドレスからダウンロードできます。

https://wordpress.org/plugins/favicon-by-realfavicongenerator/screenshots/

Favicon by RealFaviconGenerator01

 

この場合も有効化を忘れずに行って下さい。

利用するための準備はこれで完了です。

 

【使い方】画像さえ用意すればすぐに設定できる!

インストールが完了したら、【ダッシュボード】⇒【設定】⇒【Favicon】から設定が出来ます。

Favicon by RealFaviconGenerator02

 

設定ページが開いたら、まずはをクリックしてファビコンに設定した画像を決めます。

選択する画像は260×260ピクセル以上のものとなりますので注意してください。

①まずは、【Select from the Media Library】ボタンをクリックして画像を選択してください。

②次に、【Ganerate favicon】ボタンをクリックします。

Favicon by RealFaviconGenerator03

 

そうすると、ページが切り替わり、詳細設定が出来るようになります。

 

iOS用のショートカットアイコン

Favicon by RealFaviconGenerator04

 

Windows8用のスタート画面でのタイル表示のさせ方

Favicon by RealFaviconGenerator05

 

ファビコン画像の選択

右下に行くほど、画像の圧縮率が高くなり、が劣化してゆきます。

左の上オリジナルに一番近いものを選ぶといいでしょう。

Favicon by RealFaviconGenerator06

 

設定が終わったら、Favicon by RealFaviconGenerator07をクリックします。

 

Favicon by RealFaviconGenerator08

この様な画像が表示されれば、完了です!

 

早速見てみましょう・・・

Favicon by RealFaviconGenerator09

み・・・・見えないですね(笑)

何度でも設定できるので、納得が出来るまでやってみてください。

 

まとめ

あまり重要視していなかったファビコンですが、最近は視覚的な観点からその役割は大きくなりつつあるようです。

 

特に難しい事をせずに設置できますし

画像を用意したら5分でも時間をとって是非設定にチャレンジしてみてください^^

 

manual