問題の事象
ElectronアプリをmacOSでビルドした際、Dockに表示されるアプリアイコンが他のアプリケーション(Safari、Finder等)と比べて不自然に大きく見える現象が発生しました。
原因
アイコン内のロゴ部分がキャンバス全体(1024x1024px)を占有していることが原因でした。
- 他のmacOSアプリは適切な余白を持っていました(ロゴ部分は約80%)
- Apple Human Interface Guidelinesに準拠していませんでした
解決方法
1. ロゴを80%サイズに縮小して余白を作成
# ロゴを819px(80%)に縮小します
sips -z 819 819 build/logo_icon.png --out build/logo_icon_80percent.png
# 1024pxキャンバスに中央配置で余白を追加します
sips --padToHeightWidth 1024 1024 build/logo_icon_80percent.png --out build/logo_icon_80_padded.png
2. .icnsファイルを作成
# iconsetディレクトリを作成
mkdir -p build/icons.iconset
# 各解像度のアイコンを生成
sips -z 16 16 build/logo_icon_80_padded.png --out build/icons.iconset/icon_16x16.png
sips -z 32 32 build/logo_icon_80_padded.png --out build/icons.iconset/icon_16x16@2x.png
sips -z 32 32 build/logo_icon_80_padded.png --out build/icons.iconset/icon_32x32.png
sips -z 64 64 build/logo_icon_80_padded.png --out build/icons.iconset/icon_32x32@2x.png
sips -z 128 128 build/logo_icon_80_padded.png --out build/icons.iconset/icon_128x128.png
sips -z 256 256 build/logo_icon_80_padded.png --out build/icons.iconset/icon_128x128@2x.png
sips -z 256 256 build/logo_icon_80_padded.png --out build/icons.iconset/icon_256x256.png
sips -z 512 512 build/logo_icon_80_padded.png --out build/icons.iconset/icon_256x256@2x.png
sips -z 512 512 build/logo_icon_80_padded.png --out build/icons.iconset/icon_512x512.png
cp build/logo_icon_80_padded.png build/icons.iconset/icon_512x512@2x.png
# .icnsファイルを生成
iconutil -c icns build/icons.iconset --output build/icons.icns
3. プロジェクト設定を更新
{
"build": {
"icon": "build/icons.icns"
}
}
4. 作業ファイルを整理
rm -rf build/icons.iconset build/logo_icon_80percent.png