GIMPでfavicon.icoを作る
Windowsを使っていなくてもfavicon.ico(Windows用icon)は作れます。ここではGIMPとwiniconプラグインを使って作ってみます。基本的にプラグインは自分で入れる必要がありますが、バージョンやパッケージによっては本体にwiniconプラグインが同梱されているものもあります。
サイズ・色数
Windows用iconを作るためには、どういうサイズ、色数で画像を作るべきか知っておく必要があります。Microsoftの資料を見ると、サイズは 48×48、32×32、16×16、色は 24ビットカラー+8ビットアルファチャンネル、8ビットカラー+1ビット透明色、4ビットカラー+1ビット透明色 をそれぞれ用意すればいいことがわかります。3通りのサイズに3通りの色数で合わせて9通りが必要というわけです。
ところで、どこに表示されるにしろ、ブラウザで表示されるのは 16×16ピクセルサイズだけです。IEなどでアドレスバーからデスクトップへドラッグ&ドロップするとショートカットが作られますが、この表示には 32×32ピクセル(Windowsの設定を「大きなアイコンを使う」にした場合は48×48)のアイコンが使われます。
また色数は、Windows XP では24ビットカラーのアイコンが使えますが、それ以前のWindowsでは256色(8ビットカラー)までです。ただし、IE以外のブラウザでは24ビットカラーで表示できます。
以上のことから、ショートカットを考えなければサイズは16×16だけで十分、色は256色でOK(アルファチャンネルを無視すれば、1ピクセルずつ違う色を使ったとしても16×16=256なので)ということになります。
ここではサンプルとして3×3=9種類入りのアイコンを作ります。最終的には1つのファイルに複数レイヤーを作るのですが、作業の面から別々に作ってあとでまとめる方がいいでしょう。
作成
それではアイコン作りに取りかかります。既存の絵を加工するもよし、1からドット打ちをするもよし。
既存の絵を縮小して作る場合は、りんかく線や色使いのはっきりした絵を選びましょう。32×32や16×16ピクセルに縮小すると、かなりディテールがわからなくなりますので。縮小したあとでシャープフィルタ(フィルタ>強調>Sharpen)やアンシャープマスク(フィルタ>強調>Unshrp Mask)をかけると少しましになります。
場合によってはドット修正した方がいいかもしれません。
ドット打ちをする場合は、RGBモードではなくインデックスカラーモードで作業する方が便利だと思います。ドット打ちは、1×1サイズの鉛筆ツールでドットを打ち、スポイトなどで違う色に切り替えてまたドット打ち、という作業の繰り返しになりますが、GIMPのスポイト(カラーピッカー)は色を拾うたびに確認のダイアログが出て作業効率がよくありません。インデックスカラーモードでは、カラーマップ(ダイアログ>カラーマップ)が使えます。カラーマップ上の欲しい色をクリックすればすぐに描画色が切り替わるので、作画ウインドウの横にこれを置いて作業すればいいでしょう。
256色モードでは256以内に収まっていればどの色でもいいようですが、16色の場合は「Windows の 16色パレット」でないといけないようです。この16色は、HTML4で定められている16色と同じです。ただし、色そのものは同じですが、色の名前は違います。[Windowsの色名, HTML4の色名] ここではHTML4での色名でリストアップします。色の数値はHTML表記です(RGB値の16進表記)。
- Black
#000000 - Silver
#C0C0C0 - Gray
#808080 - White
#FFFFFF - Maroon
#800000 - Red
#FF0000 - Purple
#800080 - Fuchsia
#FF00FF - Green
#008000 - Lime
#00FF00 - Olive
#808000 - Yellow
#FFFF00 - Blue
#0000FF - Teal
#008080 - Aqua
#00FFFF
正直、この色だけで絵を描くのはきついものがあります。
減色はwiniconプラグインに任せるという方法もあります。が、16色ではなぜかこの基本16色にならず、1600万色中16色になります。まあ、いまどき16色しか使えない環境も珍しいので、これでもいいんじゃないかという気はします。
組み立て
それぞれのサイズ・色数のアイコンができあがったら一つのファイルに組み立てます。
用意したうちで一番サイズの大きいもののサイズ(例えば一番大きいのが32×32ならそのサイズ)で新規ファイルを作ります。画像のモードはインデックスカラーではなくRGBにしてください。
レイヤーを作って張りつけていきますが、小さいアイコンを張るレイヤーは、そのアイコンの大きさで作ってください。
レイヤーの順序は気にしなくても大丈夫です。
保存
組み上がったら、ICOフォーマットで保存します。winiconプラグインが入っているGIMPでは、拡張子"ico"のついたファイル名で保存を実行すると次のようなダイアログが出ます。
色モードが合っているか確認して(違う場合は正しいものを選択して)OKを押せば完成です。ここのサムネイルがおかしな表示になってる(まっ黒になってる、など)場合は、保存対象のファイルがRGBモードになってるかどうか確認してください。
完成したアイコンは、このページにLINK要素で指定してありますので、対応したブラウザではタブなどに表示されているでしょう。
まとめ
ここでは9種類入りのアイコンを作りましたが、前述したように、実際には256色(8ビットカラー)16×16ピクセルのみのアイコンで十分でしょう。256色であればRGBで描いてwiniconプラグインに減色を任せて仕上げても十分だと思います。
