2021/4/30 情報を更新いたしました。
ブラウザタブやブックマークしたサイトにロゴのようなものが表示されるのを見たことがありませんか？このアイコンを「ファビコン（favicon）」といいます。
スマホなど他のデバイスでもファビコンはブラウザ内で使われます。
ファビコンの有無はSEOにはそれほど関係がないと考えがちですが、サイトのブランディングや、クリック率UPには効果があるとも言われています。
この記事ではファビコンの作り方やWordPressでの設定方法を解説します。ここでは、ファビコンの作成方法から設置方法、おすすめのプラグインの紹介をいたします。
目次
ファビコンを用意する
ファビコンを用意するには、2つの方法があります。1つ目は自分で作る方法。2つ目はフリー素材サイトからダウンロードして使う方法です。
オリジナルにしたい方は自作すると良いでしょう。自作すると言っても画像編集ソフトが使えればできるので、ハードルはさほど高くありません。また逆に素材サイトのファビコンを使うのでも最近はクオリティの高いものが無料で配布されていますので、十分という気もします。フリーの素材サイトをいくつか紹介していますので、ご自身でクオリティを確かめてみてください。
ファビコンを自作する
ファビコンは16×16ピクセル（IEのタブ用）か32×32ピクセル（Chrome、Firefox、Safari などのタブ）の.ico形式のファイルを用意しなければいけません。
なので、一般的な方法としてはPhotoshopなどの画像編集ソフトで上記サイズでPNG形式などで作成します。なぜPNGかというと、PNGは背景を透過できるからです。
そして次にPNGをICOに変換する際に、下記のような変換ツールを利用します。ブラウザ上からアップロードするだけ良いファビコン変換ツールなので便利です。
マルチアイコン作成
フリーのファビコン素材サイトを使う
国内・海外を問わずたくさんのフリーのファビコン画像がありますが、種類が豊富でとてもカッコいいデザインのファビコンが無料で利用できるおすすめのサイトを紹介します。
icooon-mono
ビジネス向けの様々な業種のファビコン素材が無料で使えます。日本人がデザインしているので実用性が高いです。
icon rainbow
6000以上のファビコンが登録されています。数が豊富なのでここにないものはないかもしれません。
ハンコでアソブ
はんこで押したような、かわいいファビコンを配布してくれています。
freefavicon.com
Free object favicons to download.
国内外のフリーファビコン素材サイトの中で配布数が飛び抜けている印象。登録数は約14000点。
WordPressにファビコンを表示する
WordPressにファビコンを表示させるには、テーマファイルを直接編集する方法とプラグインを利用する方法があります。自作のWordPressテーマを使っている場合は直接編集、他社製のテーマを使っている場合はプラグインがおすすめです。理由は後者の場合、プラグインで設定していればテーマアップデートをしてもファビコンが消えることがないからです。
それでは解説していきましょう。
テーマファイルを直接編集して設定する方法
①まずは、メディアよりfaviconアイコン（拡張子が.ico）をアップロードします。
ダッシュボード「メディア」→「新規追加」→「ファイルを追加」より
ファビコン画像をアップロードします。
②ファビコン画像のURLを記録しておきます。
アップロードした画像のURLをメモしておき、このURLをheader.php内に記述することでファビコンを表示させます。
③header.phpに以下の記述を追加します。
Wordpressダッシュボード「外観」→「テーマ編集」→「ヘッダー（header.php）」より
headタグの中に以下の記述を追加します。
※/headを検索していただくと早く見つけることができます。
ここの/headタグの上に下記のコードを記入ください。
<link rel="shortcut icon" href="あなたのファビコン画像のURL">
これで表示することができます。
WordPressプラグインを利用して表示する方法
プラグイン「Favicon Rotator」を利用することでもファビコンを設定できます。
プラグインを利用する
ここでは設定がシンプルなWordPressプラグイン「Favicon Rotator」を使います。管理画面から「Favicon Rotator」を検索してインストールして下さい。
もしくは、下記のサイトからプラグインをダウンロードし、wp-content/pluginsディレクトリにインストールしてください。
詳しくはこちらの記事にも解説しています。
あなたはWebサイトにファビコンを設置していますか？ファビコンがWebサイトの運命を握るほど重要なものではないものの、ワンポイントとしての役割があるものなので、ぜひ設置しておきたいものです。 本稿でご紹介するのはWordPressで簡単にファビコン・タッチアイコンを設置できるプラグイン「Fav...
「外観」→「Favicon」よりファビコンにしたい画像をアップロードします。
※画像はプラグインが自動調整してくれるため、ファビコンサイズでなくても大丈夫です。
以上でファビコンが設定できます。
「Favicon by RealFaviconGenerator」というプラグインでもファビコンは設置できます。
WordPressに限らず、ウェブサイトを作るときに意外と軽視されがちなファビコン。いざ設置しようとすると、PCサイト用だけではなくスマートフォンなど端末に合わせたものを複数用意する必要があり、煩わしく感じることがあります。 そこでおすすめなのが、「Favicon by RealFavicon...
おまけ： TCDならプラグイン不要です。
ファビコンは必ずしも必要なわけではありませんが、個人的にはファビコンがないサイトを見ると気になってしまいます。職業柄かもしれませんが、一般ユーザーも無意識の内に視線に入るため、サイトの印象に関わるスペースなのは間違いないからです。
また、TCDテーマであればここ数年（初期のTCDテーマには非実装）にリリースされたものだとファビコンを管理画面からアップできます。TCDテーマにはファビコンだけでなく、サイト運営者が必要なカスタマイズや設定はすべてテーマの機能として備わっています。
というわけで、話は逸れましたがぜひファビコンを設置してみてください。
追記：ファビコン設定機能の廃止（TCD088以降）
「SOLARIS（TCD088）」以降のテーマでは、TCDテーマオプションのファビコン設定機能を廃止しております。代替機能として、WordPressにデフォルトで備わっているサイトアイコン機能をお使いください。
既に実装済みの過去テーマではテーマオプション上でファビコンを設定いただけます。詳細につきましては下記のお知らせをご覧いただけますと幸いです。
