GIMP で簡単に Favicon を作る方法

アドレスバーの左端に微笑むファビコンを絵心がなくても楽々作成するための覚書。（作成日: 2007年2月11日 (日曜日) 03:27:10 AM）

1. よさげなフォントを探す

はじめに、使用条件が比較的自由なフリーフォントを探す。海外のフリーフォントサイトの中には、絵文字フォントが充実している所も多い。フォントならば絵を描くのが苦手な人でも安心。今回は dafont.comの Linus Faceを使用。ぶちゃいくな仔猫ちゃん達がいっぱいでグッとくる。
但し、Mac では拡張子が「.ttf」の TrueType フォントでなければ使えない為、ダウンロード時には要注意。

2. 解凍したフォントをGIMPへインストール

今回使用するフォントは GIMP のみで扱うことができれば良いので、GIMP 本体に含まれる Fonts フォルダへインストールする。Tiger の Gimp で日本語入力でも使用した、TinkerTool を開き、Finder 設定の「隠されたファイルおよびシステムファイルを表示する」にチェックを入れ、「Finder を再起動」をクリックし、不可視ファイルが表示された状態にする。
ホーム / .gimp2.2- / fonts を開き、中へ解凍したフォントを放り込む。TinkerTool のチェックを外して Finder を再起動させ、終了する。

3. GIMPを起動

GIMPを開く。起動後、Ctrl + N を押し、16×16 px の新規画面を作成。

4. お好みの仔猫ちゃんを入力

画面左のメニュー画面にある「T」アイコンをクリックし、文字色、フォントサイズを調整しながら文字を入力する。今回の仔猫ちゃんは 18pt で画面に収まった。

5. 後々の為にフォントレイヤーを画像に変更

フォントレイヤーのままでは、次回 .xcf 書類を開く際に、使用フォントがインストールされていないとレイヤーが空白に変わるという事態が発生する。よってフォントを画像へと変換する作業を行った。画面右のレイヤーメニューにあるフォントレイヤーを右クリックし、「文字情報の破棄」を選択。すると文字レイヤーが画像レイヤーへと変わる。また、透過ファビコンを作りたい場合は、この時点で背景レイヤーを削除すると良い。

6. 画像の出力と保存

原本も .xcf で保存し、作成画面の上メニューにある、「ファイル/保存」より「コピーを保存」を選択。

保存するファイル名を「favicon.ico」と設定し、保存する。
画像の保存画面にある「ファイルタイプの選択」より、「Microsoft Windows アイコン」を選んでもOK。(2007.08.12 修正)

7. 設置方法

できあがった favicon.ico は、public_html 直下などインデックスファイルと同一階層にアップロードすれば大抵のブラウザで表示されるはずだ。任意の場所へアップロードするときは、<HEAD> ～ </HEAD> 内に <LINK REL="SHORTCUT ICON" HREF="favicon.icoへのパス"> と記述すれば表示されるようになる。Firefox などのブラウザを開いて確認してみよう。う〜ん。ぶちゃいく！