お気に入りアイコン(ファビコン)の設置方法

『お気に入りアイコン(ファビコン)』とは、ブラウザのアドレスバー、お気に入りのリストに表示される、16×16 の小さなアイコンのことです。

 
自分のページがお気に入りに追加されても、アイコンが表示されなければ見つかりにくく、次にアクセスしてくれる可能性も少なくなります。

 
そこで、ここではファビコンの設置方法(とくに無料ブログサービス利用時)についてご説明します。

 

① ファビコン用の画像を用意する

 
まずは、ファビコンにしたい画像を用意します。

 
任意の方法で作成しましょう。その際の注意点は下記のとおりです。

 
●正方形にする
●ファビコンのサイズは 16×16 と小さいので複雑なデザインは避ける
●画像は、GIFまたはPNG形式等で保存する
●あらかじめ、画像サイズを 16pix × 16pix にしておくとよい

 
おいらが用意した画像は以下のようなものです。

 
watabonfavicon.gif

 

② ファイル形式を変換する

 
ファビコンとして使用するために、下記のサイトでファイル形式を変換します。

 
FavIcon from Pics(英語)

 
favicon1.jpg

 
上図のような画面が表れます。

 
「参照…」をクリックして、用意した画像を指定しましょう。

 
favicon2.jpg

 
画像を指定できたら、となりの「Generate FavIcon.ico」をクリックします。

 
favicon3.jpg

 
上図のような画面になります。

 
「Download Favicon Package」をクリックすると、完成したファビコンをダウンロードすることができます。

 
ダウンロードしたファイルはzip形式なので、解凍ソフトを使ってこのファイルを解凍します。

 
favicon4.jpg

 
解凍したファイル内は、上図のようになっています。

 
真中の「favicon.ico」という拡張子のファイルを使用します。

 
※左側のgif形式のものは動画アイコンです。これも使用することができます。

 

③ 「favicon.ico」を設置する

 
完成した「favicon.ico」を、サーバーにアップロードしましょう。

 
通常のファイルをアップロードするのと同様に行います。

 
アップロードされたファイル名をクリックするなどして、ファイルのURLをコピーします。

 
コピーしたURLはメモ帳などに控えておきましょう。

 
HTMLの中にある HEAD ~ /HEAD 内に、下記のようなLINKタグを設定します。

 


 
上記の「favicon.ico」部分に、メモ帳に控えたファイルのURLを入力することでパスを指定します。

 
以上を保存し、自分のページを表示してみましょう。

 
ブラウザのアドレスバーに、ファビコンが表示されれば完了です。