Prod0

Free tool

Electron app
icon generator.

Drop in one image and get the build/ directory electron-builder picks up on its own. Correct macOS padding, multi-resolution .ico, and the Linux hicolor set.

Drop a PNG, or click to choose

1024x1024 recommended. PNG, JPEG, WebP, or SVG.

Platforms

macOS padding

macOS shadow

Where the files go

Unzip the download into your project root. electron-builder treats build/ as its default resources directory, so if you use these names you do not have to configure the macOS or Windows icon at all.

tree
build/
  icon.icns          macOS, 1024px source
  icon.ico           Windows, 256px down to 16px
  icon.png           512px fallback
  icons/
    512x512.png      Linux hicolor set
    256x256.png
    128x128.png
    64x64.png
    48x48.png
    32x32.png
    16x16.png

The only path worth declaring is the Linux one, since that points at a directory of PNGs rather than a single file.

package.json
{
  "build": {
    "appId": "com.example.app",
    "directories": {
      "buildResources": "build"
    },
    "linux": {
      "icon": "build/icons"
    }
  }
}

Three things that go wrong

The macOS icon looks too big. This is the common one, and it is not a bug in your build. Native macOS icons sit inside a rounded square occupying about 80% of the canvas, so a full-bleed icon renders noticeably larger than everything around it in the Dock. The macOS file here gets a squircle mask and roughly 10% margin per side by default. If your artwork already includes that margin, switch padding to none.

The Windows icon is blurry in the taskbar. That happens when the .ico holds a single large image and Windows downscales it on the fly. The file this produces carries six separate entries, from 256px down to 16px, each rendered at its own size, so Windows picks rather than resizes.

Nothing changes after you replace the icon. electron-builder caches aggressively. Delete the dist/ directory and rebuild. On macOS the Finder icon cache can also hold a stale copy of an app you have already launched, which is a separate problem from your build being wrong.

Common questions

Where do Electron app icons go?

In a build/ directory at your project root. electron-builder uses build/ as its default buildResources path, so icon.icns and icon.ico are picked up with no configuration. Linux is the exception: point the linux.icon field at build/icons, the directory holding the PNG set.

What icon sizes does electron-builder need?

For macOS, a single .icns containing everything from 16px to 1024px. For Windows, a single .ico with multiple resolutions, ideally 256, 64, 48, 32, 24 and 16. For Linux, individual PNGs named by dimension, typically 512 down to 16. This tool produces all three from one source image.

Why does my Electron icon look bigger than other Mac apps?

Because it is full-bleed and theirs are not. macOS icons are drawn inside a rounded square with transparent margin so they optically match each other in the Dock. Generate with macOS padding set to auto and the margin is applied for you.

Can I use the same icons for Electron Forge?

The files are the same, the paths differ. Forge expects an icon path in its maker config rather than a conventional build/ directory, and it wants the path without an extension so each platform maker can append its own. Generate with the generic layout if you would rather organise them by platform.

Is my image uploaded anywhere?

No. The .icns and .ico encoding both run in your browser in a web worker, so your artwork never leaves the machine. Nothing is stored and nothing is sent.