ネットサーフィンする方なら目にしたことがあるはずですが、ブラウザでタイトルの前に表示されるファビコンというアイコンのようなバッジのようなマークがあります。
みなさんオリジナルを表示させているかと思いきや案外そうでもなく、自分のブックマークを眺めてみても、半数くらいは未表示です。
ファビコンがあるとブックマークの中からでも探しやすいですし、最近はタブブラウザ全盛の時代です。
視覚的に目立つというのはとても重要ですね。
わたしもついつい、いくつものタグでページを表示してブラウジングしてしまいますが、そんなとき、ファビコンがあるサイトは非常に見つけやすいです。
もはや、オリジナルのファビコンなしはあり得ないですね～
ファビコンとは？
Favicon（ファビコン）はウェブサイトのシンボルマーク・イメージとして、ウェブサイト 運営者がウェブサイトやウェブページに配置するアイコンの俗称である。 Favorite icon（フェイバリット・アイコン：お気に入りアイコン）という英語の語句を縮約したものである。[ウィキより抜粋]
ファビコンはタブやブックマークの中でも埋もれないことで多少なりともアクセスアップにも寄与すると考えます。
SEO 的な効果はないと考えてしまいますが、あながちそうとも言い切れません、
Firefox をはじめ、ブラウザによっては無条件で favicon.ico を要求しています。
この場合、ファビコン未定義ならば 404 を返してしまいます。
読み込み速度という点において、無駄な404は最小限に抑えるべきです。
また、たくさんのタブを開いている状況では目立つファビコンの存在でその後のユーザー行動が変わる可能性もあります。
※Google 検索結果では、 2019 年よりファビコンが表示されています。
ファビコンの有無は検索結果からの CTR にも若干の影響を与えるはずです。
それでは具体的にファビコンの設置方法を紹介します。
自作のファビコン
まずは表示させるファビコンを用意する必要があります。
自分で作る場合は Photoshop などの画像処理ソフトを使って、サイズ：16×16 ピクセル（縦横の1対1の比率）で作成します。
ただし、 Photoshop などではファビコン用の.ico という形式では保存できませんので、ひとまず、 gif ・ jpg ・ png などで保存します。
これを変換するのですが、元画像があればアップロードするだけでファビコンを作ってくれるファビコン変換ツールを利用するとよいでしょう。
ファビコンはサイズが小さいので、うまく作るにはちょっと特殊なスキルがいるように思います。
フリーのファビコンを使う
自分でデザインする自信がなければ、ライセンスフリーの素材を使うのもありです。
国内・海外を問わず利用できるたくさんのファビコン画像があります。
種類が豊富でとてもカッコいいデザインのファビコンが無料で利用できるわたしのお気に入りサイトを紹介します。
かくいうこのサイトのファビコンをここでダウンロードしたものを使っています。
実際のところ、自分でこのクオリティを超えるのはかなり難しく、この方法が一番のお勧めです。
これだけ種類があれば、他と被ることもそうはないと思いますしね。
「たくさんありすぎて迷ってしまう」ほどです。
ファビコン設置手順
ますは基本となる静的 HTML での設置方法です。
ルート直下の images フォルダにアップロードしたとして、<head>内の<tilte>下あたりに記述します。
これでブラウザで表示が確認できるはずです。
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">簡単ですね！
WordPress でのファビコン設定
WordPress では2種類の設置方法を紹介します。
いずれの場合も画像はお使いのテーマの中の images フォルダにアップロードします。
header.php での設置
仕様テーマのヘッダテンプレート：header.php の<head>内に下記のようにメタタグを加えます。
<?php
echo '<link rel="shortcut icon" type="image/x-icon" href="'.get_stylesheet_directory_uri().'/images/favicon.ico">'.PHP_EOL;
?>※留意するべき点はテーマフォルダまでのパスの取得にget_bloginfo('template_url')やget_template_directory_uri()を使用しないということです。
前者は非推奨となっていますし、両者ともに子テーマで使用した際には親テーマのパスを取得してしまいます。
親子いずれで使用しても有効化しているテーマディレクトリを取得するget_stylesheet_directory_uri()を使用します。
子テーマのファビコン表示でうまくいかない場合はここをチェックしましょう。
functions.php での設置
次の例では使用するテーマの functions.php で指定するという方法です。
<?php
//ファビコン
function blog_favicon() {
echo '<link rel="shortcut icon" type="image/x-icon" href="'.get_stylesheet_directory_uri().'/images/favicon.ico">'.PHP_EOL;
}
add_action('wp_head', 'blog_favicon');
?>使用しているテーマフォルダthema/images/の中の favicon.ico をファビコン画像として使うという指定です。
htaccess での指定
Apache の ErrorDocument を利用したこの方法は通常の HTML サイトはもちろん、 WordPress ほか、いろんなタイプの CMS でも有効です。
AddType image/xicon .ico
<Files favicon.ico>
ErrorDocument 404 http://example.com/favicon.ico
</Files>ファビコンが更新されない
これまでのファビコンから変更した場合によく見られる現象ですが、画像が変更されないことがあります。
ほとんどのケースでこれはブラウザのキャッシュが原因です。
下記のようにヘッダのソース上で出力されているパスに直接アクセスしても、古いファビコンが表示されるはずです。
<link rel="shortcut icon" type="image/x-icon" href="https://seous.info/wp-content/themes/enoughone-kappa-s/images/favicon.ico">この場合はブラウザのスーパーリロードを行ってください。
ちなみにキャッシュがしつこい Chrome（Windows）では以下の場所にFaviconとFavicons-journalという2つのキャッシュ関連ファイルがありますので、 Chrome を終了してから、こちらを直接削除しても構いません。
%USERPROFILE%\AppData\Local\Google\Chrome\User Data\Default
いかがでしたか。
それほど難しい作業ではありませんので、ぜひ、自分のサイトにカッコいいデザインのファビコンをつけてください！
