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

ヘッダ画像

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

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

ファビコンとは?

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

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

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

それでは具体的にファビコンの設置方法を紹介します。

自作のファビコン

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

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

無料で利用できるfreefavicon.com

無料で利用できるfreefavicon.com

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

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

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>

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

コメントを残す

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



関連記事

超簡単!アイコンフォント Font Awesomeの使い方 ひと昔前なら画像で表現していたようなアイコン。ウェブフォントの登場によって、描画速度が速く手軽に挿入できるテキストフォン...

3分で設置できる!?CSS3の角丸グラデーションボタン CSS3と対応ブラウザの登場により、角丸やグラデーションを使ったリンクやフォームの送信ボタンが画像なしで表現できるように...

ディレクトリへのアクセスでindex of/を表示させない レンタルサーバではリクエストされたディレクトリにindex.htmlなどブラウザで表示させるべき内容がない場合、inde...

ブラウザの画像などが更新されない WordPressをはじめ、サイト構築を行っていると変更が反映されない場合があります。通常、Windows環境のブラウザ...