HTML index
ホームページ作成ガイド

ステップアップ＆テクニック - ホームページ作成ガイド
HTML&CSS Web制作リファレンス
-ホームページ作成を学ぶ・調べる-

< HOME / ホームページ作成ガイド / お気に入りアイコン（ファビコン）の作り方
お気に入りアイコン（ファビコン）の作り方
お気に入りアイコン - favicon.ico（ファビコン）とは、ブラウザのアドレスバーやお気に入りのリストに表示される、16×16 の小さなアイコンのことです。

独自の favicon.ico を設定しておくことで、そのページをブックマークした際に、オリジナルの「お気に入りアイコン」が表示されるようになります。

※ブラウザにより表示される条件は異なります。（機能しないブラウザもあります）
※ここでご紹介する設定方法では、画像編集ソフトと、zip形式のファイルを解凍できるソフトが必要です。
　ファビコンの表示例
HTML indexのファビコンです。（IEでの表示例）

ファビコン表示例 ファビコン表示例
アドレスバーの表示 お気に入りリストの表示

このファビコンは、デスクトップ上でも使用することができます。アドレスバーのファビコンをドラッグしてデスクトップ上でペーストすると、やや大きめ（32x32）のサイズでショートカットアイコンが表示されます。

ファビコン表示例 デスクトップ上のアイコン

　ファビコン作成の流れ
1. ファビコン用の画像を作成する

ファビコンで使用する画像を作成します。サイズは問いませんが、正方形である必要があります。作成した画像は、GIFやPNG形式等で保存しておきます。

2. ファイル形式を変換する

作成した画像は、ファビコン用の形式に変換する必要があります。アイコン作成ソフトでも変換できますが、ここではFavIcon from Pics（変換サイト）を利用して変換することにします。このサイトで変換したファイルはzip形式でダウンロードすることになるので、それを解凍して使用します。

3. ファビコンファイルをアップロードする

作成されたファビコンファイル（favicon.ico）を、サーバーにアップロードします。

4. タグの設定

ページの <HEAD> 〜 </HEAD> 内に、LINKタグを設定します。
以上で完了です。（慣れれば5〜10分程度の作業）

　1. ファビコン用の画像を作成する
画像編集ソフトでファビコン用の画像を作成します。ファビコンのサイズは 16×16 と小さいので、あまり複雑でないデザインが良いでしょう。

作成した画像は、GIFまたはPNG形式等で保存しておきます。

※ファビコンで使用する画像は、あらかじめ 16×16 に縮小しておくことをお勧めします。大きめの画像でもファビコンに変換することができますが（変換時に自動的に縮小される）、画質がやや悪くなってしまうようです。
※ファビコンには、アニメーションGIFも使えます。

　2. ファイル形式を変換する
次に、作成した画像をファビコン用の形式に変換します。ファイル形式の変換は、次のサイトで行うことができます。

FavIcon from Pics （英語）
※ご安心ください。英語が苦手の私でも簡単に操作できました。

このページにアクセスすると、

表示サンプル

Source Image: という入力欄がありますので、その項目の「参照」ボタンを押して、作成した画像ファイルを選択します。選択を完了したら、その下の「Generate FavIcon.ico」ボタンを押します。

表示サンプル

ページが切り替り、ファビコンのサンプルが表示されます。この内容で良い場合は、隣の「Download Favicon」ボタンを押します。

ダウンロードが開始されますので、任意のフォルダに保存してください。ダウンロードしたファイルはzip形式なので、解凍ソフトを使ってこのファイルを解凍します。

ファビコンサンプル

解凍したファイルの中に favicon.ico というファイルがあると思います。これがファビコンですので、任意のフォルダに保存しておいてください。

　3. ファビコンファイルをアップロードする
ファビコンファイル（favicon.ico）をサーバーにアップロードします。

LINKタグを設定しない場合は、最上位のディレクトリに設置してください。LINKタグを設定する場合は、任意のディレクトリに設置できます。

　4. タグの設定
ページの <HEAD> 〜 </HEAD> 内に、LINKタグを設定します。

<LINK REL="SHORTCUT ICON" HREF="favicon.ico">

HREF="" に、favicon.ico ファイルへのパスを指定します。http:// で始まる絶対パス、または相対パスで指定することができます。

IEなどでは、この設定がない場合でもファビコンを表示してくれるみたいですが、ブラウザにより挙動が異なる可能性がありますので、念のため設定しておくことをお勧めします。

※LINKタグについての詳細は、「お気に入りアイコン（ファビコン）を指定する」をご覧ください。

　複数のファビコンを設定する
ページごとに異なるファビコンを設定することも可能です。

LINKタグを設定する場合、ファビコンのファイル名を変更することができます。そのため、次のような感じで複数のファビコンを設置することができます。

favi01.ico
favi02.ico
favi03.ico

それぞれのファビコンを、

<LINK REL="SHORTCUT ICON" HREF="favi01.ico">

上記のような感じで読み込めば、ページごとにファビコンを変えることが可能になります。

または、ディレクトリごとにファビコンを設置しておき、ディレクトリ単位で異なるファビコンを表示させる、といったことも可能です。

※LINKタグを設定しない場合は、ファビコンのファイル名は favicon.ico で固定です。

ホームページ作成ガイドTOP

HTMLタグ｜スタイルシート｜JavaScript｜Webツール｜カラーチャート｜テンプレート｜
< HOME PageTop▲

inserted by FC2 system