ファビコン設置で差をつけよう（WordPress編）
2013/06/06
タグ: 初心者
ネットサーフィンする方なら目にしたことがあるはずですが、ブラウザでタイトルの前に表示されるファビコンというアイコンのようなバッジのようなマークがあります。
みなさんオリジナルを表示させているかと思いきや案外そうでもなく、自分のブックマークを眺めてみても、半数くらいは未表示です。
ファビコンがあるとブックマークの中からでも探しやすいですし、最近はタブブラウザ全盛の時代です。
視覚的に目立つというのはとても重要ですね。
わたしもついつい、いくつものタグでページを表示してブラウジングしてしまいますが、そんなとき、ファビコンがあるサイトは非常に見つけやすいです。
もはや、オリジナルのファビコンなしはあり得ないですね～
ファビコンとは？
Favicon（ファビコン）はウェブサイトのシンボルマーク・イメージとして、ウェブサイト 運営者がウェブサイトやウェブページに配置するアイコンの俗称である。Favorite icon（フェイバリット・アイコン：お気に入りアイコン）という英語の語句を縮約したものである。[ウィキより抜粋]
YahooやGoogleなんかだとこんな感じです。
ファビコンはタブやブックマークの中でも埋もれないことで多少なりともアクセスアップにも寄与すると考えます。
SEO的な効果はないと考えてしまいますが、あながちそうとも言い切れません、
Firefoxをはじめ、ブラウザによっては無条件でfavicon.icoを要求しています。
この場合、ファビコン未定義ならば404を返してしまいます。
読み込み速度という点において、無駄な404は最小限に抑えるべきです。
また、たくさんのタブを開いている状況では目立つファビコンの存在でその後のユーザー行動が変わる可能性もあります。
※Google検索結果では、2019年よりファビコンが表示されています。
ファビコンの有無は検索結果からのCTRにも若干の影響を与えるはずです。
それでは具体的にファビコンの設置方法を紹介します。
自作のファビコン
まずは表示させるファビコンを用意する必要があります。
自分で作る場合はPhotoshopなどの画像処理ソフトを使って、サイズ：16×16ピクセル（縦横の1対1の比率）で作成します。
ただし、Photoshopなどではファビコン用の.icoという形式では保存できませんので、ひとまず、gif・jpg・pngなどで保存します。
これを変換するのですが、元画像があればアップロードするだけでファビコンを作ってくれるファビコン変換ツールを利用するとよいでしょう。
ファビコンはサイズが小さいので、うまく作るにはちょっと特殊なスキルがいるように思います。
フリーのファビコンを使う
無料で利用できるfreefavicon.com
自分でデザインする自信がなければ、ライセンスフリーの素材を使うのもありです。
国内・海外を問わず利用できるたくさんのファビコン画像があります。
種類が豊富でとてもカッコいいデザインのファビコンが無料で利用できるわたしのお気に入りサイトを紹介します。
かくいうこのサイトのファビコンをここでダウンロードしたものを使っています。
実際のところ、自分でこのクオリティを超えるのはかなり難しく、この方法が一番のお勧めです。
これだけ種類があれば、他と被ることもそうはないと思いますしね。
「たくさんありすぎて迷ってしまう」ほどです。
ファビコン設置手順
ますは基本となる静的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
いかがでしたか。
それほど難しい作業ではありませんので、ぜひ、自分のサイトにカッコいいデザインのファビコンをつけてください！
WEBサービスの構築・監修が生業の