Electron App Icon from Favicon: Step-by-Step Setup

If your packaged Electron app still shows the default Electron logo, its native bundle icon has not been configured. Creating an electron app icon from favicon files requires platform assets; the page resource declared with rel='icon' is separate from an installed app's icon ([HTML Standard](https://html.spec.whatwg.org/multipage/links.html#rel-icon)).

Prerequisites

• An Electron project, electron-builder, and ImageMagick available on your PATH.
• A square SVG or the largest PNG favicon available. Do not enlarge a 16-pixel raster and expect sharpness.
• For the macOS commands, open a macOS shell with sips and iconutil.

If the source is missing, see How to Download a Favicon from Any Website. Mzu favicondl can convert it to PNG and ICO.

Create an Electron app icon from favicon files

1. Create a 1024-pixel master. Keep the artwork centered on a transparent square canvas:

   magick -background none favicon.svg -resize '1024x1024>' -gravity center -extent 1024x1024 icon.png

   Replace favicon.svg with your file. Prefer vector artwork; redraw a tiny raster before export.
2. Build a multi-resolution ICO. Renaming a PNG does not create one:

   magick -background none favicon.svg -define icon:auto-resize=256,128,64,48,32,24,16 icon.ico

   Substitute the actual input and keep icon.png beside icon.ico.
3. Create the macOS ICNS on macOS from that master:

   mkdir -p icon.iconset
   sips -z 16 16 icon.png --out icon.iconset/icon_16x16.png
   sips -z 32 32 icon.png --out icon.iconset/[email protected]
   sips -z 32 32 icon.png --out icon.iconset/icon_32x32.png
   sips -z 64 64 icon.png --out icon.iconset/[email protected]
   sips -z 128 128 icon.png --out icon.iconset/icon_128x128.png
   sips -z 256 256 icon.png --out icon.iconset/[email protected]
   sips -z 256 256 icon.png --out icon.iconset/icon_256x256.png
   sips -z 512 512 icon.png --out icon.iconset/[email protected]
   sips -z 512 512 icon.png --out icon.iconset/icon_512x512.png
   cp icon.png icon.iconset/[email protected]
   iconutil -c icns icon.iconset -o icon.icns

   This produces a native ICNS container.
4. Point electron-builder at each asset in electron-builder.yml:

   win:
     icon: build/icon.ico
   mac:
     icon: build/icon.icns
   linux:
     icon: build/icon.png

   Copy all three files into build/. Run npx electron-builder and inspect the package for that platform.

Common pitfalls

• Using only a browser favicon. A tab favicon does not replace the bundle icon. See Favicon and App Icon Difference for the design distinction.
• Renaming PNG to ICO. The extension does not create the multi-size container; use the conversion command above.
• Losing the mark when cropped. Keep important shapes away from edges and test the smallest rendering. Native icons need simpler artwork than a full logo.
• Using mismatched paths. YAML paths are relative to the project configuration, and Linux paths are case-sensitive. Confirm each file exists before building.

Conclusion

Use the favicon as source artwork, export platform-native containers, and let the packaging tool place the correct icon in each application bundle. Mzu favicondl handles favicon-to-PNG and ICO preparation so you can focus on a clean mark and a reproducible Electron build.