ファビコンの作成と設定 - 個人サイトのためのHTML LS講座

ファビコンの作成と設定方法についての説明です。

ファビコンとは、下記の画像のようにブラウザのタブやGoogleの検索結果などでサイト名の左横に表示されるアイコンのことです。お気に入り(favorite)に登録した際に表示されるアイコン(icon)を意味する「favorite icon(フェイバリット・アイコン)」を略して、「favicon(ファビコン)」と呼ばれています。たとえばGoogleの場合は「G」のアイコン、当サイト(ねがいぼしプロジェクト)の場合は紫の流れ星のアイコンがファビコンになります。
ブラウザのタブのファビコン例
Googleの検索結果のファビコン例
▲ページの先頭へ
ファビコンの作成方法は簡単で、作成した画像をFaviconジェネレーターなどのサイトで、ファビコン用の拡張子である「ico」形式に変換するだけです。
注意点として、ファビコンのサイズは48×48ピクセルで、正方形の中にバランス良く収まるように作成してください。48×48ピクセルにしないとGoogleの検索結果のファビコンに反映されなくなります。また、設定できるファビコンは1つのドメインにつき1つのみです。
詳しくは、Googleのガイドライン「検索結果に表示されるファビコンを定義する」を参照してください。
▲ページの先頭へ
icoファイルが完成したらサーバーにアップロードし、以下のソースコードを各ページのHTMLファイル内に記述すればOKです。
<link rel="icon" href="icoファイルのURL">
記述する場所は、metaタグの下が良いでしょう。
ファビコンのHTMLを書く場所
ファビコンは設定しなくても特段大きな問題はありませんが、細部までこだわりたい場合は設定しておきましょう。
▲ページの先頭へ

>>HTML LS講座メニューへ戻る