Web素材

【Web素材】5クリックfavicon.icoができる！　「お気に入り」を目立たせよう

Web素材関連情報

更新日：2005年03月15日

5クリックfavicon.icoができる！　「お気に入り」を目立たせよう

浅野今日子

あるWebページをIEで「お気に入り」に登録すると、おなじみの「ｅ」マークではなく、独自のマークがついている場合があります。あなたのページも、オリジナルのアイコンで目立たせませんか？

あるWebページをInternetExplorerで「お気に入り」に登録すると、おなじみの「ｅ」マークではなく、独自のマークがついている場合あります。これは「favicon.ico」という特別なアイコンを使うことで実現できます。特別とはいっても、その方法はとても簡単！あなたのページも、オリジナルのアイコンで目立たせませんか？

★この記事はWindowsXPと、InternetExplorer6.0で検証をおこなっております。

favicon.ico

ＩＥの「お気に入り」に登録すると、一覧で表示した際に、サイト名の左にというマークがつきます。下図のような感じですね。

ところが、中には、下図のように、以外のマークがついているものがあります。

この、小さなアイコン（マーク）をfavicon.icoといいます。faviconとは「Favorite　Icon」、つまりお気に入りアイコンです。favicon.icoという名前を持つアイコンファイルをあらかじめWebサーバにアップロードしておき、かつHTMLファイルにその記述をしておくことで、ユーザーがそのWebサイトを「お気に入り」に加えた場合には、favicon.icoの画像がサイトの目印として表示される、というわけです。

通常のWindows用のアイコンを作りなれている方であれば、favicon.icoを作ることもきわめて簡単でしょう。サイズを15ピクセル×15ピクセルにして、なおかつファイル名を「favicon.ico」にするだけです。

ここで、Windows用のアイコンを作るためのツールをいくつかご紹介しておきます。

＠icon変換（towofu's SOFT）

KH IconStudio2001 Standard Edition（KH Software Factory）

クリック五回でfavicon.icoができる！

でも「作った事がない」「作り方知ってるけど面倒だー」という場合。どうしましょう。大丈夫！

あらかじめ用意してあるデジカメ画像などを指定するだけでfavicon.icoにしてくれるWebサービスがあるんです。それがこちら、FavIcon from Pics(英語)です。

今回は、FavIcon from Picsで、こんな写真（下図。ちなみに白鳥のアップ）をfavicon.icoにしてみました。

　まず、FavIcon from Pics(英語)にアクセスしてください。ここで、これからSource Image と書いてある入力フォームに、favicon.icoにしたい画像を指定します。下図の、赤枠でかこってある部分です。

　「参照」ボタンをクリック【１】すると、「ファイルの選択」ダイアログボックスが開きます。ここで、favicon.icoにしたい画像を指定します【２】。画像はGIFかJPEGに限ります。サイズは大きくてもかまわないようですが、縦横のピクセル数が同じ、正方形の画像にしてください。次に、「Generate　Favicon.ico」ボタンをクリック【３】します。