2018/07/24*解説を更新しました
2020/06/04*解説を更新しました

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

favi12

スマホなど他のデバイスでもファビコンはブラウザ内で使われます。

ファビコンスマホ

ファビコンの有無はSEOにはそれほど関係がないと考えがちですが、サイトのブランディングや、クリック率UPには効果があるとも言われています。

この記事ではファビコンの作り方やWordPressでの設定方法を解説します。ここでは、ファビコンの作成方法から設置方法、おすすめのプラグインの紹介をいたします。

ファビコンを用意する

ファビコンを用意するには、2つの方法があります。1つ目は自分で作る方法。2つ目はフリー素材サイトからダウンロードして使う方法です。

オリジナルにしたい方は自作すると良いでしょう。自作すると言っても画像編集ソフトが使えればできるので、ハードルはさほど高くありません。また逆に素材サイトのファビコンを使うのでも最近はクオリティの高いものが無料で配布されていますので、十分という気もします。フリーの素材サイトをいくつか紹介していますので、ご自身でクオリティを確かめてみてください。

ファビコンを自作する

ファビコンは16×16ピクセル(IEのタブ用)か32×32ピクセル(Chrome、Firefox、Safari などのタブ)の.ico形式のファイルを用意しなければいけません。

なので、一般的な方法としてはPhotoshopなどの画像編集ソフトで上記サイズでPNG形式などで作成します。なぜPNGかというと、PNGは背景を透過できるからです。

そして次にPNGをICOに変換する際に、下記のような変換ツールを利用します。ブラウザ上からアップロードするだけ良いファビコン変換ツールなので便利です。
マルチアイコン作成

フリーのファビコン素材サイトを使う

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

icooon-mono

フリーのファビコン素材サイト

icooon-mono

ビジネス向けの様々な業種のファビコン素材が無料で使えます。日本人がデザインしているので実用性が高いです。

icon rainbow

icon-rainbow

icon rainbow

6000以上のファビコンが登録されています。数が豊富なのでここにないものはないかもしれません。

ハンコでアソブ

はんこのようなファビコン

ハンコでアソブ

はんこで押したような、かわいいファビコンを配布してくれています。

freefavicon.com

フリーのファビコン素材サイト

Free object favicons to download.

国内外のフリーファビコン素材サイトの中で配布数が飛び抜けている印象。登録数は約14000点。

WordPressにファビコンを表示する

WordPressにファビコンを表示させるには、テーマファイルを直接編集する方法とプラグインを利用する方法があります。自作のWordPressテーマを使っている場合は直接編集、他社製のテーマを使っている場合はプラグインがおすすめです。理由は後者の場合、プラグインで設定していればテーマアップデートをしてもファビコンが消えることがないからです。

それでは解説していきましょう。

テーマファイルを直接編集して設定する方法

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

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

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

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

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

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

WordPressプラグインを利用して表示する方法

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

プラグインを利用する

ここでは設定がシンプルなWordPressプラグイン「Favicon Rotator」を使います。管理画面から「Favicon Rotator」を検索してインストールして下さい。

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

Favicon Rotator

詳しくはこちらの記事にも解説しています。

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

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

「Favicon by RealFaviconGenerator」というプラグインでもファビコンは設置できます。

おまけ: TCDならプラグイン不要です。

ファビコンは必ずしも必要なわけではありませんが、個人的にはファビコンがないサイトを見ると気になってしまいます。職業柄かもしれませんが、一般ユーザーも無意識の内に視線に入るため、サイトの印象に関わるスペースなのは間違いないからです。

また、TCDテーマであればここ数年(初期のTCDテーマには非実装)にリリースされたものだとファビコンを管理画面からアップできます。TCDテーマにはファビコンだけでなく、サイト運営者が必要なカスタマイズや設定はすべてテーマの機能として備わっています。

というわけで、話は逸れましたがぜひファビコンを設置してみてください。