favicon.ico を作る

* favicon.ico を作る

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [HTML]

当サイト Landscape の 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 がリリースされてたはずだし。フリーソフトはこういう時にも重宝するね。

- 画像製作ソフト Gimp と GTK2 のダウンロードとインストール

GIMP - Windows installers
http://gimp-win.sourceforge.net/

上記ページから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- ...

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

それぞれダウンロードしたら、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 を作成してくれるサービスを利用するともっと簡単に作れる。減色やサイズ調整とかも全部やってくれるし。

- html ヘッダに favicon への参照を追加

完成した Landscape の favicon
http://sonic64.com/favicon.ico

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

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

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

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

type="image/vnd.microsoft.icon"

- Unix で favicon を作る

unix 環境で favicon を作るツール。16 * 16 と 32 * 32 の両方を含む favicon を作れる優れもののようだ。試していないけど。

ToICO
http://wizard.ae.krakow.pl/~jb/toico/

Toico converts PNG, GIF, TIFF, BMP and XPM files to Windows icon format (ICO). It is possible to create multi-image icon. Program compiles on Linux, FreeBSD, Solaris, HP/UX and CygWin, maybe more.

Usage example:

toico icon-16x16.png icon-32x32.png -o favicon.ico

すべての記事の見出し (全1029件)

全カテゴリの一覧と記事の数

カテゴリごとに記事をまとめ読みできます。記事の表題だけを見たい場合は、すべての記事の見出し (カテゴリ別表示) へ。