Electron App Icons from One SVG

Shipping an Electron app means producing three different icon containers — a Windows .ico, a macOS .icns, and a folder of Linux PNGs — each with its own required sizes. Instead of running three separate exporters, you can generate all three from a single SVG master in one pass with IconVectors and reference them directly from your electron-builder config.

Recommended sizes for desktop app icons

• Windows (ICO) — include 16, 24, 32, 48, 64, 128, 256 px inside one .ico.
• macOS (ICNS) — include the iconset that covers 16, 32, 64, 128, 256, 512, 1024 px (retina pairs are handled in the .icns).
• Linux (PNG) — provide a small set such as 16, 24, 32, 48, 64, 128, 256, 512 px. Many packagers pick up the best match automatically.

1 - Prepare your SVG master

Open an existing icon with File → Open... (Ctrl+O) or start a fresh one with New Icon (Ctrl+N). Keep the artwork centered with a little padding and favor a simple silhouette: anything thinner than a couple of pixels disappears once the icon is rendered at 16×16. Save a lean master with File → Export → Export Minified (Shift+Ctrl+M) so the same source drives every output.

2 - Export ICO, ICNS, and PNG in one pass

Open File → Export → Export to Multiple Bitmaps (Shift+F3), then pick a destination folder and a base filename such as app-icon.

• File Formats — check Windows Icons (*.ICO), Apple macOS Icons (*.ICNS), and PNG Icons (*.PNG) – 32BPP Alpha.
• Sizes in Pixels — tick the per-platform sets listed above so each container gets the sizes it needs.
• Output — IconVectors writes app-icon.ico, app-icon.icns, and a PNG set (app-icon-16.png, app-icon-32.png, and so on) in a single run.

3 - Wire the icons into electron-builder

Place your exported files under a build folder (for example, build/icons/) and reference them in the build section of package.json.

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "dist/main.js",
  "build": {
    "appId": "com.example.myapp",
    "directories": { "buildResources": "build" },
    "mac":   { "icon": "build/icons/app-icon.icns" },
    "win":   { "icon": "build/icons/app-icon.ico" },
    "linux": { "icon": "build/icons/png" }   // folder of PNGs (16..512)
  }
}

Note: On Linux you can point linux.icon at a single high-res PNG (512 px) and let the packager resize, but keeping the full PNG folder gives desktop environments an exact match at each size and avoids rescaling blur.

4 - Verify on each platform

• Windows — check taskbar, Start menu tile, and file properties show the correct .ico.
• macOS — verify the app bundle icon in Finder and the Dock; Spotlight should display a sharp icon.
• Linux — inspect the launcher/menu entries; ensure the PNG path is copied into your build output.

Troubleshooting

• Blurry small sizes — ensure shapes align to pixels; consider a 16 px preview PNG to tweak strokes/corners.
• Wrong icon after rebuild — clean the dist/output folder; some packagers cache icons between builds.
• Color fringes — export with a transparent background (32-bpp PNG) and avoid unintended mattes.