macOSで自作アプリ用にアイコン画像をお手軽に作る手順の覚え書です。
元ファイルとなる画像はPNG形式を使います。
(JPG形式は透過ができない。また、後述のiconutilはPNGが前提。)
OS version: macOS Sequoia 15.7
1. 画像を角丸+背景透過処理
標準でインストールされている「プレビュー」を使います。
① 対象の画像ファイルを右クリック - [このアプリケーションで開く] - [プレビュー]を選択する。
②プレビューで画像が開く。
マークアップツールバーを表示のアイコン(ピンクの部分)をクリックする。
③表示されたツールバーから[楕円で選択]をクリックする。
④微調整しながらアイコンに表示させる範囲を楕円で選択する。
⑤ツールバー[編集]メニューから[選択部分を反転]をクリックする。
⑥deleteキーを押して背景を消す。
※下図は消した状態
これでプレビューでの編集は終了です。
編集後の画像ファイルを作業フォルダ(例: work)に移動します。
2. macOS標準ツールのiconutilで .icns に変換
①ターミナルを起動してworkフォルダにカレントを移す。
cd ~/work
②xxx.iconsetフォルダを作成(xxxは任意)
mkdir ramen.iconset
.iconset フォルダは、macOS にとって「このアプリのアイコンはこれらのサイズで構成されています」と伝えるパッケージに相当する。
③ sipsコマンドでアイコンセットに必要な画像ファイルを作成する。
エラーなく作成されたことをコマンド結果で確認する。
sips -z 16 16 ramen.png --out ramen.iconset/icon_16x16.png
sips -z 32 32 ramen.png --out ramen.iconset/icon_16x16@2x.png
sips -z 32 32 ramen.png --out ramen.iconset/icon_32x32.png
sips -z 64 64 ramen.png --out ramen.iconset/icon_32x32@2x.png
sips -z 128 128 ramen.png --out ramen.iconset/icon_128x128.png
sips -z 256 256 ramen.png --out ramen.iconset/icon_128x128@2x.png
sips -z 256 256 ramen.png --out ramen.iconset/icon_256x256.png
sips -z 512 512 ramen.png --out ramen.iconset/icon_256x256@2x.png
sips -z 512 512 ramen.png --out ramen.iconset/icon_512x512.png
④ Retina用アイコンを元画像ファイルからコピーする。
cp ramen.png ramen.iconset/icon_512x512@2x.png
・元画像が既に1024×1024の場合、画像の劣化を防ぐために sipsではなくcpでコピーする。
・macOS の .icns 仕様に準拠するには、最低でも10種類のサイズが必要になる。
⑤ iconutilコマンドで .iconsetを .icns に変換する。
iconutil -c icns ramen.iconset
iconutilコマンドは.iconset フォルダを読み取り、すべてのサイズを1つの .icns ファイルにまとめる。
ramen.icnsがカレントディレクトリに作成されていることを確認する。
以上。
ramen.icnsを使ってRebuildしたアプリを起動すると、Dock上のアイコンが意図したように表示されました。
試しにアプリケーションフォルダに入れるとLaunchpadからいい感じに表示されます。
(補足)
macOSは .icns に含まれる複数サイズのアイコンを、表示環境（解像度・場所）に応じて動的に使い分けているらしいです。
| 使用場面 | 必要なサイズ例 |
|---|---|
| Finderのリスト表示 | 16×16、32×32 |
| Dock表示 | 128×128、256×256 |
| LaunchpadやSpotlight | 512×512、1024×1024 |
| Retinaディスプレイ | 各サイズの2倍解像度（高解像度） |