サイトにオリジナルファビコンを表示させよう

ヘッダ画像

ファビコン設置で差をつけよう(WordPress編)

ネットサーフィンする方なら目にしたことがあるはずですが、ブラウザでタイトルの前に表示されるファビコンというアイコンのようなバッジのようなマークがあります。みなさんオリジナルを表示させているかと思いきや案外そうでもなく、自分のブックマークを眺めてみても、半数くらいは未表示です。
ファビコンがあるとブックマークの中からでも探しやすいですし、最近のタブブラウザ全盛の環境では視覚的に目立つというのは重要ですね。わたしもついつい、いくつものタグでページを表示してブラウジングしてしまいますが、ファビコンがあるサイトは非常に見つけやすいです。

ファビコンとは?

Favicon(ファビコン)はウェブサイトのシンボルマーク・イメージとして、ウェブサイト 運営者がウェブサイトやウェブページに配置するアイコンの俗称である。Favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。[ウィキより抜粋]

YahooやGoogleなんかだとこんな感じです。

ファビコンはタブやブックマークの中でも埋もれないことで多少なりともアクセスアップにも寄与すると考えます。
また、SEO的な効果はないと考えてしまいますが、あながちそうとも言い切れません、
サイトを閲覧した際にブラウザはfavicon.icoを要求しています。
読み込み速度という点において、無駄なHTTPリクエストを最小限に抑えるべきなのです。

それでは具体的にファビコンの設置方法を紹介します。この記事はWordPressのカスタマイズ情報ですが、基本的に通常のHTMLサイトでも同様の流れでファビコンがつけられます。

自作のファビコン

自分で作る場合はまずPhotoshopなどの画像処理ソフトを使って、16×16ピクセル(縦横の1対1の比率)で作成します。ただし、Photoshopなどではファビコン用の.icoという形式では保存できませんので、ひとまず、gif・jpg・pngなどで保存します。
これを変換するのですが、アップロードするだけで変換してくれるファビコン変換ツールを利用するとよいかと思います。ファビコンはサイズが小さいので、うまく作るにはちょっと特殊なスキルがいるような気もします。

フリーのファビコンを使う

無料で利用できるfreefavicon.com

無料で利用できるfreefavicon.com

自分でデザインする自信がなければ、ダウンロードフリーの素材を使うという手もあります。
国内・海外を問わずたくさんのフリーのファビコン画像がありますが、種類が豊富でとてもカッコいいデザインのファビコンが無料で利用できるわたしのお気に入りサイトを紹介します。

かくいうこのサイトのファビコンをここでダウンロードしたものを使っています。実際のところ、この方法が一番のおすすめです。自分でこのクオリティを超えるのはかなり難しいです。
これだけ種類があれば、他と被ることもそうはないと思いますしね。(たくさんありすぎて迷ってしまうほどです)

WordPressでのファビコン設定

画像が用意できたら、サイトでファビコンとして表示できるように設定が必要です。ここではWordPressでの2種類の設置方法を紹介します。
前準備としてファビコン画像はFTPなどでサーバにアップロードしてください。

header.phpでの設置

この場合はヘッダテンプレート(header.php)のhead内に以下のようにヘッダタグを加えます。

<link rel="shortcut icon" href="./favicon.ico" >

※通常のHTMLサイトの場合もこれでOKですが、favicon.icoをルート階層にアップロードするという想定ですので、パスは適時変更ください。

function.phpでの設置

次の例では使用するテーマのイメージフォルダにアップロードして、function.phpで指定するという方法です。function.phpに以下を記述します。

<?php
function blog_favicon() {
echo '<link rel="shortcut icon" type="image/x-icon" href="'.get_bloginfo('template_url').'/images/favicon.ico" />'."n";
}
add_action('wp_head', 'blog_favicon');
?>

使用しているテーマフォルダ/images/の中のfavicon.icoをファビコン画像として使うという指定です。

htaccessでの指定

この方法は通常のHTMLサイトはもちろん、WordPressほか、いろんなタイプのCMSでも有効です。

AddType image/xicon .ico
<Files favicon.ico>
ErrorDocument 404 http://example.com/favicon.ico
</Files>

それほど難しい作業ではありませんので、ぜひ、自分のサイトにカッコいいファビコンをつけてください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPressのログインユーザー名は丸見え!?

WordPressのセキュリティ対策で必ずいわれるのが、ユーザー名を「admin以外に変更しよう」で […]

Contact Form 7の送信完了画面がでない

お手軽にお問い合わせフォームなどを設置できるContact Form 7 添付ファイルも送信でき、シ […]

超簡単!アイコンフォント Font Awesomeの使い方

ひと昔前なら画像で表現していたようなアイコン。 ウェブフォントの登場によって、描画速度が速く手軽に挿 […]

3分で設置できる!?CSS3の角丸グラデーションボタン

CSS3と対応ブラウザの登場により、角丸やグラデーションを使ったリンクやフォームの送信ボタンが画像な […]