favicon.ico で複数画像のマルチファビコンをつくってみた

2009年06月23日 | Posted by ohsuda in MovableType

favicon.gif

ブラウザのお気に入りのアイコンを賑やかにしてくれるfavicon(ファビコン)。

以前までは、アイコン作成ソフトなどで16ピクセル×16ピクセルの画像を作成し、favicon.icoとして保存していましたが、実は、32ピクセル×32ピクセルや、48ピクセル×48ピクセルといった複数の画像をひとつの .ico 形式のマルチアイコンとして保存することができるんですねぇ~。

てか、知らなかったです。∑(゚□゚;)ガーン

そんなこんなで、忘れないウチに作り方をメモ。

1. 16×16、32×32、48×48ピクセルの画像ファイルを用意する。
  (画像はGIF、JPG、PING形式で、アニメGIFや透過もOKです)

2. http://ao-system.net/favicon/ にアクセスし、
  前項で作成した画像をそれぞれ参照し、【favicon.ico 作成】をクリック

3. 画面右側の【ダウンロード】ボタンをクリックしてできあがり

4. 作成した favicon.ico を Webサーバのルートディレクトリに
  FTPソフトでアップロードする
  (通常は index.html と同階層にアップします)

5. htmlファイルの <head> から </head> タグのあいだに、
  以下のソースを挿入します。


  ※favicon.ico の場所はhttp://~からはじまる絶対参照でも参照できます。

▼ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。
http://ao-system.net/favicon/