ImageMagickでマルチアイコンを簡単に作る

Windows実行ファイルのアイコンやWebサイトのFaviconを作るときなど**.icoファイルが必要になるときがあります。そんなときImageMagickを使うと1枚の画像からマルチアイコンを簡単に作ることができます**。

マルチアイコンとは

マルチアイコンは、複数の解像度のアイコンを1つの.icoファイルに格納したものです。実行ファイルのアイコンやFaviconは表示される場所によってサイズが異なるため、あらかじめ様々なサイズのアイコンを用意しておくことできれいに表示させることができます。

例えばマイクロソフトのガイドラインによると、アプリケーションアイコンは16、32、48、256のサイズを含めることが求められています。

ImageMagickとは

ImageMagickはCUIで画像編集や変換などができるソフトウェアで、.icoファイル作成もサポートしています。icon:auto-resizeオプションを使うと、自動的に1つの画像からマルチサイズアイコンを作成してくれます。さらにバージョン6.8.8-3からは、マルチアイコンに含めるサイズを指定できるようになりました。

ImageMagickを使うと、元画像を複数サイズにリサイズしてマルチアイコンとして.icoに変換するまでの作業をすべて行うことができます。また、サイズによって画像を変えることも簡単にできます。

サポートするフォーマットは多岐にわたり、.svgや.aiなどのベクタグラフィックスもサポートしています。この記事ではリサイズと変換しか使いませんが、他にも様々な機能があります。

アイコンを作る

1枚の画像から

次のコマンドで、「icon.png」を256、192、128、96、64、48、40、32、24、16のサイズにリサイズしてマルチアイコンに変換します。

$ convert icon.png -define icon:auto-resize icon.ico

マルチアイコンに含めるサイズを指定するには次のようにします。

$ convert icon.png -define icon:auto-resize=128,64,32 icon.ico

複数の画像から

1枚の画像からアイコンを作る方法を各画像に適用してそれぞれアイコンを作り最後に結合すると、サイズによって画像を変えたアイコンを作成できます。

次の例ではlarge.pngから128、48、small.pngから32、16サイズのアイコンを作成し、それらを結合して128、48、32、16のサイズを含むfavicon.icoを作成しています。

$ convert large.png -define icon:auto-resize=128,48 large.ico
$ convert small.png -define icon:auto-resize=32,16 small.ico
$ convert large.ico small.ico favicon.ico

Faviconを指定するにはサイトのヘッダに次のコードを挿入します。

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

おまけ

サイズの確認

作成したアイコンにどのサイズが含まれているかはidentifyコマンドで確認できます。

$ identify icon.ico
icon.ico[0] ICO 128x128 128x128+0+0 32-bit sRGB 82.7KB 0.000u 0:00.003
icon.ico[1] ICO 48x48 48x48+0+0 32-bit sRGB 82.7KB 0.000u 0:00.006
icon.ico[2] ICO 32x32 32x32+0+0 32-bit sRGB 82.7KB 0.000u 0:00.008
icon.ico[3] ICO 16x16 16x16+0+0 32-bit sRGB 82.7KB 0.000u 0:00.010

ウェブクリップアイコン

リサイズするだけなら次のコマンドのようになります。

$ convert icon.png -resize 180 apple-touch-icon.png

ウェブクリップアイコンを指定するにはサイトのヘッダに次のコードを挿入します。

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />