技術（tech）

ElectronアプリのDockアイコンが大きく見える問題を余白追加で解決

 
Contents
  1. 問題の事象
  2. 原因
  3. 解決方法

問題の事象

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
RELATED POST