携帯・無料ツールサービス

● icoファイル内には、複数の異なるサイズの画像を納める事ができ、アドレス欄やお気に入りリストの表示では 16x16ピクセル画像を、デスクトップ上などショートカットの表示では 32x32ピクセル画像を表示します。　該当するサイズの画像が内蔵されていない場合は、その他の含まれる画像を拡大縮小し表示します。（縮小に伴い画質が劣化する場合があります）

●画像ファイルには、BMP、PNG、PSD、他など、様々なファイル形式のものを使用する事ができ、アルファーチャネルを持つ透過画像などを格納する事で表現豊かなアイコンを作ることができます。

※16x16ピクセル画像とは、縦横それぞれ 16ドットの点で構成された四角い画像の事です。　32x32ピクセル画像も同様に、縦横それぞれ 32ドットから成る画像です。

※最近の Windowsでは、48x48ピクセルや半透明アイコンをサポートしてます。

今回は当サイトのファビコンアイコンを例に、16x16ピクセルの画像と 32x32ピクセルの透過画像の、２つの画像からなるマルチプルアイコンという、スタンダードな綺麗なファビコンの作り方を紹介します。　Windowsのアイコン同様、32x32ピクセル画像はデスクトップにショートカットを作った時の、ほのかに影を持ち浮き上がって見える画像です。

全体の作業の流れは以下のとおり、とても簡単です。

1). 32x32ピクセル画像（ショートカット表示用）の作成。
2). 16x16ピクセル画像（アドレス欄表示用）の作成。
3). ２つの画像から icoファイルを作成。

使用する無料ツールは２つ、「画像作成ツール」と「icoファイル作成ツール」です。
今回は、画像作成ツールとして「Gimp」、icoファイル作成ツールとして「@icon変換」を使います。

アルファチャネルによる透過画像を使ったファビコンを作らない場合は、Gimpの代わりに Windows標準のペイントなど OS標準ツールをご利用になってもかまいません。　その場合は下記手順を適宜、ご利用中の画像編集ツールの場合に読み替えてご覧下さい。

※ GIMP(ギンプ) ... GIMPとは、Gimp Developer Teamにより開発が進められ GPLで配布されている、商用のフォトレタッチソフトに劣らない多彩な機能を備えたフリーの画像編集ソフト。　[Download]

※ @icon変換 ... @icon変換とは、towofu's SOFTさんにて公開されている、PNG、透過マスク、アルファチャンネルなどに対応した、画像とアイコンの相互変換ソフト。　[Download]

１）32x32ピクセル画像（ショートカット表示用）の作成

GIMPを使って、透過背景に影を持つアイコン画像を作成します。　32x32ピクセルの画像領域のうち、アイコン本体は左上の 30x30ピクセルの領域へ描画し、その他の右端 2ピクセルと 下端 2ピクセルの範囲はアイコン本体の影を透明背景をベースに描画する領域として使用します。

作成手順は以下のとおりです。

�@. 30x30ピクセル画像を描画。
�A. アイコン画像の影を作成。
�B. 30x30ピクセル画像と影レイヤーを結合し、PNGファイル出力。

※右図はステップ�A終了後の GIMPレイヤー、チャンネル＆パス ウィンドウです。

以下は各ステップの詳細です。



�@. 30x30ピクセル画像を描画
32x32ピクセルの透明背景の画像領域を新規作成し、左上の 30x30ピクセルの領域へアイコン本体を描画します。（右図の選択中領域）

※作成後、画像領域の選択は解除しておきます。



�A. アイコン画像の影を作成
今作成した 30x30ピクセル画像上で右クリックし、右クリックメニューから Script-fu - 影 - 影付け を選択、新たに開く影付けウィンドウ上で下記パラメータを参考に、描画する影（ドロップシャドウ）のパラメータを指定し 了解ボタンを押して Drop-Shadowを作成します。

※ Drop-Shadowの作成を実行すると、レイヤー、チャンネル＆パス ウィンドウ上の 30x30ピクセル画像レイヤーの下に Drop-Shadowレイヤーが追加されます。

※右図では分かりにくいですが、30x30ピクセル画像を元に作られた自然なグラデーションをもつ影が右下へ伸びています。

※ここで一旦、作成したレイヤー画像を GIMPの XCFファイル（ favicon32.xcf ）として保管。　この　XCFファイルは、以後アイコンのメンテナンス用とします。

◎ Script-fu - 影 - 影付け のパラメータ

オフセットX: 1
オフセットY: 1
ぼかし半径: 2
色: 黒（デフォルト）
不透明度: 75%
画像サイズ変更可: チェック外す

※この指定値は、アイコン左上前面の光源を元にアイコン画像の左下背景の近い位置へ影が出来るものです。


�B. 30x30ピクセル画像と影レイヤーを結合し、PNGファイル出力。
30x30ピクセル画像上で右クリックし、右クリックメニューから レイヤー - 可視レイヤーの統合 を選択、新たに開くレイヤー結合オプションウィンドウ上で最背面レイヤーサイズに切り取りを選択し、了解ボタンを押して２つのレイヤーを結合します。

最後に、結合した画像上で右クリックし、右クリックメニューから ファイル - 別名で保存 を選択、新たに開く画像の保存ウィンドウでファイル保管先のディレクトリを指定し、選択欄でファイル名を指定（今回は favicon32.png を指定）し、了解ボタンを押してPNGファイルとして保管します。　途中、エクスポートウィンドウが開きますのでエクスポートを選択、さらにPNN形式で保存するウィンドウが開きますので、デフォルト指定のまま了解ボタンを押します。

※上記手順とは別の作成方法として、ファイル出力時に可視レイヤーを結合して出力する方法もあります。


◎レイヤー結合オプション のパラメータ


◎PNGエクスポート確認


◎PNN形式で保存する のパラメータ




作成した 32x32ピクセルのアイコン画像（ favicon32.png 、326バイト ）

２）16x16ピクセル画像（アドレス欄表示用）の作成

32x32ピクセルの画像とは異なり 16x16ピクセルの画像では、画像サイズが小さく限られていますので、影を持たないシンプルな画像を作成します。

作成手順は以下のとおりです。

�@. 16x16ピクセル画像を描画。
�A. 16x16ピクセル画像をPNGファイル出力。

※右図はステップ�@終了後の GIMPレイヤー、チャンネル＆パス ウィンドウです。

以下は各ステップの詳細です。



�@. 16x16ピクセル画像を描画
16x16ピクセルの画像領域を新規作成し、領域全面を使ってアイコンを描画します。

※小さなキャンバスなので、時々実物サイズで表示を確認しながら、ウェブサイトのシンボルなどをシンプルに描く方が良いでしょう。


�A. 16x16ピクセル画像をPNGファイル出力。
32x32ピクセル画像の時と同様に、作成した画像上で右クリックし、右クリックメニューから ファイル - 別名で保存 を選択、新たに開く画像の保存ウィンドウでファイル保管先のディレクトリを指定し、選択欄でファイル名を指定（今回は favicon16.png を指定）し、了解ボタンを押してPNGファイルとして保管します。　途中、エクスポートウィンドウが開きますのでエクスポートを選択、さらにPNN形式で保存するウィンドウが開きますので、デフォルト指定のまま了解ボタンを押します。



作成した 16x16ピクセルのアイコン画像（ favicon16.png 、210バイト ）

GIMPによるファビコンの元となる32x32ピクセルと16x16ピクセルの２つの画像ファイルの準備はこれで完了。
ここからは作成したの２つの画像ファイルを元に、@icon変換を使って透過背景のファビコン作成に移ります。

３）２つの画像から icoファイルを作成

GIMPで作成した32x32ピクセルと16x16ピクセルの２つの画像ファイルを元に、@icon変換を使って透過背景のファビコンを作成します。　@icon変換の使い方は簡単なので、どなたでもすぐに favicon.ico ファイルを作ることができます。

作成手順は以下のとおりです。

�@. 起動した @icon変換へ２つの画像を読みこむ。
�A. icoファイルを作成。

※右上図はステップ�A実行前の @icon変換 画面です。（クリックで拡大表示）

以下は各ステップの詳細です。


�@. 起動した @icon変換へ２つの画像を読みこむ
@icon変換画面上へ、２つの画像ファイルをドラッグ＆ドロップで登録します。

※画面上の２つのファイルの並びを上から順に 色(bit)の大きなものを上、色数が同じであれば画像サイズの大きなものを上 とします。（移動するファイルを選択し、上へ移動、下へ移動ボタンを使用します）

�A. icoファイルを作成
Ctrlキーを押しながら、画面上に並ぶ２つのファイルを順にクリックし、２つのファイルとも上図のように選択状態とします。　次に@icon変換画面のメニューから ファイル - マルチiconの保存 を選択し、新たに開かれる マルチアイコンに保存 ダイアログ画面で保管先のディレクトリを指定し、ファイル名に favicon と入力、保存ボタンを押して favicon.ico ファイルを保存します。

※今回作成した当サイトの透過画像を使ったファビコンのファイルサイズは 約 5KBでした。　格納する画像ファイルにより icoファイルのファイルサイズも変わりますが、当サイトのようなマルチプルアイコンで 5KB程度は普通のようです。

以上で ファビコンアイコン（ favicon.ico )の作成完了！

作成したファビコンアイコン（ favicon.icoファイル ）は通常、ウェブサイトのホームページと同じルートディレクトリ（最上位のディレクトリ）へ配置します。　

ウェブページへの組み込みは、ファビコンを表示するページのHTMLソースの <head> 〜 </head>タグ領域へ以下のような favicon.icoファイルへの linkタグ（リンクタグ）を記述し、href属性には favicon.icoファイルへのパスを絶対パス、または相対パスで指定します。

HTMLソース例 - 相対パス指定 ( カラー文字部 )

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

HTMLソース例 - 絶対パス指定 ( カラー文字部 )

<head>  <link rel="shortcut icon" href="http://www.popdom.jp/favicon.ico"> </head>

※ファビコンはウェブサイトのルートディレクトリ以外の場所へ保管する事もでき、ページ毎にファビコンを切り替える事も可能です。

※ファビコンのファイル名は、デフォルトが favicon.icoですが、linkタグと合わせ任意のファイル名とする事も可能です。

・Gimp 1.0 ユーザーズマニュアルの日本語版 http://www.geocities.jp/gimpfile/gum_jp/index.html

・今回、紹介したマルチプルアイコンではありませんが、シングル画像のファビコンをウェブ上で作成できるウェブサイトも有ります。