ブラウザタブやブックマークしたサイトにロゴのようなものが表示されるのを見たことがありませんか？
このアイコンを「ファビコン（favicon）」といいます。

https://www.google.co.jp/

ファビコンの有無はSEOにはそれほど関係がないと考えがちですが、サイトのブランディングや、クリック率UPには効果があるとも言われています。もちろんWordPressでもファビコンを表示することができます。ここでは、ファビコンの作成方法から設置方法、おすすめのプラグインの紹介をいたします。

ファビコンの作成

まずはファビコンを用意します。オリジナルで用意したい場合にはPhotoshopなどのソフトを用い作成するといいですが、デザインをする自信が無いという方にはフリーの素材を使う事がおすすめです。

フリーのファビコン

国内・海外を問わずたくさんのフリーのファビコン画像がありますが、種類が豊富でとてもカッコいいデザインのファビコンが無料で利用できるおすすめのサイトを紹介します。

「freefavicon.com」

http://www.freefavicon.com/

配布されているファビコンは28000点以上。ジャンル分けされ、探しやすくなっています。お好みのファビコンが見つかったら、「Download this favicon」をクリックし、ダウンロードしてください。

自作のファビコン

16×16ピクセル(IEのタブ用)と32×32ピクセル(Chrome、Firefox、Safariなどのタブ用)で作成します。ただし、Photoshopなどではファビコン用の.icoという形式では保存できませんので、pngなどで保存します。また、作成の際には必ず透過することをおすすめします。簡単なことですが、透過によってサイトの出来映えが変わってきます。
これを変換するのですが、アップロードするだけ良いファビコン変換ツールを利用すると便利です。
マルチアイコン作成

WordPressでのファビコン設定

それでは、WordPressでファビコンを設定する方法を説明します。

テーマファイルを編集する方法

①まずは、メディアよりfaviconアイコン（拡張子が.ico）をアップロードします。
ダッシュボード「メディア」→「新規追加」→「ファイルを追加」より
ファビコン画像をアップロードします。

②ファビコン画像のURLを記録しておきます。
アップロードした画像のURLをメモしておき、このURLをheader.php内に記述することでファビコンを表示させます。

③header.phpに以下の記述を追加します。
Wordpressダッシュボード「外観」→「テーマ編集」→「ヘッダー（header.php）」より
headタグの中に以下の記述を追加します。
※/headを検索していただくと早く見つけることができます。

ここの/headタグの上に下記のコードを記入ください。

<link rel="shortcut icon" href="あなたのファビコン画像のURL">

これで表示することができます。

プラグインを利用する方法

プラグイン「Favicon Rotator」を利用することでもファビコンを設定できます。

「Favicon Rotator」のインストール

管理画面から「Favicon Rotator」を検索してインストールして下さい。

もしくは、下記のサイトからプラグインをダウンロードし、wp-content/pluginsディレクトリにインストールしてください。

Favicon Rotator

「Favicon Rotator」の設定

「外観」→「Favicon」よりファビコンにしたい画像をアップロードします。
※画像はプラグインが自動調整してくれるため、ファビコンサイズでなくても大丈夫です。

以上でファビコンが設定できます。

その他にも以前紹介いたしました、「Favicon by RealFaviconGenerator」というプラグインでもファビコンを設置できますので活用くださいませ。
すべてのプラットフォーム向けのファビコンが簡単に設定できるプラグイン「Favicon by RealFaviconGenerator」

まとめ

見た目は小さなファビコンですが、あるのとないのとでは、サイトイメージなども変わってきますし、サイトを訪問者に覚えてもらいやすいという効果も期待できます。
この機会にファビコンの設置をしてみてはいかがでしょうか。
後半で説明したようなプラグインを利用すると簡単に設定できますが、サイトが重くなる可能性がありますので、できれば直接header.phpに記述する方がおすすめです。
ご活用くださいませ。

• ツイート
•