Top > HP作成小技集 > faviconの作り方
  • favicon.ico って何?
    favicon.ico というのは、そのサイト独自のアイコンのこと。

IE だと「お気に入り」に追加したときにアイコンがそのサイト独自のものになるが、それが favicon だ。mozilla だったらタブやアドレスバーの脇に出るので目にする機会も多いだろう。favicon を用意しているサイトはたくさんあり、http://www.debian.org/http://www.mozilla.org/ などで見ることができる。

当サイトをお気に入りに入れればすぐ見られる。ぜひお気に入りに入れてみよう (PR)。

  • favicon.ico の作り方
    要するに Windows icon ファイルを作ればいい。
    まず、元となる画像を作る。ビットマップでも png でも何でもいい。次に、icon 形式に変換できるツールを使うか、Chami.com の "FavIcon from Pics" のような変換サービスを利用するなどして icon ファイルを得る。

Chami.com FavIcon from Pics
http://www.chami.com/html-kit/services/favicon/

簡単に作るのであれば上記サービスを利用するのが良いが、今回はエンジニアらしく一手間かけて自分の納得のいく favicon を作ることにする。まず元となる画像を作り、それを縮小、減色し、icon 形式への変換ツールで favicon.ico ファイルを作るという流れだ。

2002-09-30 では favicon は png で作成すると良いと書いたが、IE でも見られるようにしておきたいので、今回は windows icon 形式で作成することにする。Firefox なら png でも favicon にできるんだけど、IE ではできないからね。

  • まずは favicon のデザインを決める
    うーん、どんな favicon にしよう? Landscape の L 、副題である エンジニアのメモ の engineer の e あたりを使おうか。よし、背景はやわらかいブルーで、そこに白の L を浮かべた画像にしよう。これを作るとなると画像編集ソフトが要るな。でも Photoshop は仕事場にしかないから、無料のフォトレタッチソフトである Gimp で作ろう。確か最近 2.0 がリリースされてたはずだし。フリーソフトはこういう時にも重宝するね。

上記ページからWindows 版の Gimp 2.0 と GTK2 をダウンロードできる。GTK はGIMP を動かすために必要なライブラリ。2004-04-11 現在の最新版は Gimp が 2.0.1、GTK2 が 2.2.4 だったが、2004-11-04 現在の最新版は Gimp が 2.0.5、GTK2 が 2.4.10 だ。配布サイトも sourceforge に移転している。

以下の URL にアクセスすると、sourceforge のミラーサイトの一覧が出る。日米間の回線は大容量らしいので、North America のどれかからダウンロードすると良いのではないだろうか。

Gimp2.0
http://prdownloads.sourceforge.net/gimp-win/gimp-2.0.5-i586-setup.zip

GTK2
http://prdownloads.sourceforge.net/gimp-win/gtk%2B-2.4.10-20041001-setup.zip

それぞれダウンロードしたら、GTK からインストールする。GIMP を先にインストールしようとすると 「GTK 入れてね」という意味の警告が出る。インストールは「次へ」や「Yes」を連打すれば終わるだろう。勝手に画像ファイルを関連づけしたりすることもないので安心。

  • Gimp2 を起動して favicon の元になる画像を作成
    インストールはあっという間に完了し、マスコットのウィルバー (Wilber) くんのアイコンをダブルクリックして起動。おおっ、何もしてないのに全部日本語化されてる。素晴らしい。では制作開始。ある程度大きな画像を作って、それを縮小して使おう。256 * 256 で背景を作成。テキストレイヤを作成して、L の字を入力。e の字はレイアウトを思いつかなかったので使うのはやめた。

script-fu でドロップシャドウを掛けて、完了。うん、簡単にできた割にはなかなか良いぞ。ここでマスターとして GIMP xcf ファイルを保存しておく。xcf のレイヤを統合して bmp で出力して一丁上がり。Gimp 2.0 は Celeron 500MHz のマシンでも十分良い働きをしてくれた。

  • 減色して縮小して ico に変換 - favicon.ico ファイル完成
    2004-02-16 にも書いた減色ツール padie で 1677万色から256色に減色。これをさらに btj32 というツールで 32 * 32 と 16 * 16 に縮小。これで素材は揃った。bmp から ico への変換は、@icon変換 というツールを使った。16 * 16 と 32 * 32 の両サイズを一つの ico に格納してくれる優れものだ。

@icon変換
http://www.vector.co.jp/soft/win95/amuse/se201729.html

@icon変換に読ませて、マルチプルアイコンとして保存してできあがり。今回は手間をいろいろ手間を掛けて作ったけど、Chami.com FavIcon from Pics http://www.chami.com/html-kit/services/favicon/ のような png をアップロードするだけで簡単に favicon を作成してくれるサービスを利用するともっと簡単に作れる。減色やサイズ調整とかも全部やってくれるし。

ico ファイルは作成したし、サーバにもアップロードした。あとは html のヘッダに favicon を参照する記述を追加すれば作業完了。html ヘッダに記述を追加せずにサーバの /favicon.ico にファイルを置いておくだけでもいいらしいが、ブラウザによっていろいろと挙動が異なるようなので、可能なら両方やっておくと良いだろう。

以下の記述を html の <head> タグ中に追加。このページのソースを見てもらった方が早いかも。

link rel="shortcut icon" href="favicon.ico">

MIME タイプを指定する場合は以下のようにするが、これを追加したところ Mozilla Firefox で favicon を表示してくれなかったので指定しないことにした。

type="image/vnd.microsoft.icon"



リロード   新規 編集 凍結解除 差分 添付 複製 名前変更   ホーム 一覧 単語検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: 2007-02-07 (水) 01:32:16 (4930d)