LABO IWASAKI

favicon.icoとWindowsアイコンの作り方

icon for Win

拡張子icoのアイコン作成方法です。
faviconやWindowsアイコンに利用できます。
途中までMac用icnsの作り方と同じです。

icoはicnsと同じく複数サイズ対応。
サイズはicnsより幅が狭く限られています。
作成環境はMacです。ターミナルを使用します。

icoを作る手順

Make the favicon

まずアイコン画像を作る前にフォルダを作ります。
デスクトップに「app.iconset」というフォルダを作りましょう。

「app」の部分は、何でもいいです。
もしfaviconに利用する場合は「favicon」とするのが通例ですね。
Windowsアイコン用の場合は好きな名前で大丈夫です。

こう聞かれたら「追加」を選択

faviconを作る際と、Windowsアイコンを作る際では作成サイズが違うので以下の表を参考にして、それぞれ作成してください。

 アイコン画像を作る 
 1、【サイズ】 256 × 256   【保存名】icon_256x256.png  2、【サイズ】 128 × 128   【保存名】icon_128x128.png  3、【サイズ】 48 × 48   【保存名】icon_48x48.png  4、【サイズ】 32 × 32   【保存名】icon_32x32.png faviconを作る
 1、【サイズ】 32 × 32   【保存名】favicon_32x32.png  2、【サイズ】 24 × 24   【保存名】favicon_24x24.png  3、【サイズ】 16 × 16   【保存名】favicon_16x16.png

上記のサイズと名前の画像をそれぞれ作ってフォルダに入れます。

※ faviconは、もっと大きなサイズがあった方がいいという意見もあります。
しかし僕の経験上、タブに表示されるfaviconは、ほとんどの場合32と16です。
それ以外の大きいサイズが必要な場合はapple_touch_iconが採用されるので、ここではfaviconを上記のサイズにしています。
大きいサイズが欲しい場合は、作って同梱してもいいと思います。

まずicnsを作る

Operation Terminal

ターミナルを立ち上げたら、まずデスクトップまで移動しましょう。

 cdでデスクトップまで移動 
 iwasakiDESK:~ takayoshi$ cd ~/desktop

次にさっきのフォルダをアイコンに変換します。
フォルダ名は「app.iconset」と仮定します。

 icnsに変換 
 iwasakiDESK:desktop takayoshi$ iconutil -c icns app.iconset

これでデスクトップに「app.icns」というアイコンが出来たはずです。
出来なかった場合はスペルミスとカレントディレクトリを見直してください。

icoに変換

Conversion

次に完成した「icns」を「ico」に変換します。
さっき作った「icns」をダブルクリックしてください。

するとプレビューが表示されると思います。
複数サイズがあるのでgif画像と同じように表示されています。

次に上部メニュー「ファイル」を選択します。
その中に「書き出す」という項目があるので選択してください。

すると「どこに」「どのフォーマットで」保存するか指定する表示が現れます。
今回は「書き出す」を選択しましたが、ファイルを一旦複製して「保存」を選んでも同じ事ができます。

ここで「フォーマット」を「Microsoftアイコン」を選びます。
しかしOS Lion以降は「Microsoftアイコン」という選択肢がありません。

そこで今度は「option」キーを押しながら「フォーマット」をクリックします。
すると「Microsftアイコン」という選択肢が現れます。

これを選んで保存しましょう。

すると無事「ico」がデスクトップに現れました。

ダブルクリックしてプレビューを表示すると「icns」と同じように複数サイズが同梱されている事を確認できます。

これにて完了です。