技術（tech）

Fix Electron App Dock Icon Appearing Too Large by Adding Padding

 
Contents
  1. Problem
  2. Root Cause
  3. Solution
  4. Result

Problem

When building an Electron app on macOS, the app icon displayed in the Dock appears unnaturally large compared to other applications (Safari, Finder, etc.).

Root Cause

The logo portion occupies the entire canvas (1024x1024px).

  • Other macOS apps have appropriate padding (logo portion is ~80%)
  • Non-compliance with Apple Human Interface Guidelines

Solution

1. Shrink Logo to 80% and Add Padding

# Shrink logo to 819px (80%)
sips -z 819 819 build/logo_icon.png --out build/logo_icon_80percent.png

# Center in 1024px canvas with padding
sips --padToHeightWidth 1024 1024 build/logo_icon_80percent.png --out build/logo_icon_80_padded.png

2. Create .icns File

# Create iconset directory
mkdir -p build/icons.iconset

# Generate icons for each resolution
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

# Generate .icns file
iconutil -c icns build/icons.iconset --output build/icons.icns

3. Update Project Configuration

{
  "build": {
    "icon": "build/icons.icns"
  }
}

4. Clean Up Working Files

rm -rf build/icons.iconset build/logo_icon_80percent.png

Result

  • Dock display size harmonizes with other apps
  • Compliance with macOS design guidelines
  • Maintains visibility while proper sizing
RELATED POST