Creating a Mac App Icon (ICNS) and Windows ICO for Electron Apps

Explore with AI

Welcome to this step-by-step guide on creating app icons in ICNS format for macOS and ICO format for Windows for your Electron application. Whether you’re reviving an old design from .ai or .psd files or starting fresh, this tutorial will help you convert your artwork into formats compatible with both platforms, ensuring a professional look for your app. Let’s dive in!

What You’ll Need

Source Files: You have .ai (Adobe Illustrator) and .psd (Photoshop) files, plus two additional image files (e.g., PNGs). These will serve as the basis for your icon.
Mac with Terminal: All macOS tools are built-in; Windows tools require free software.
Electron Project: Your app’s codebase where the ICNS and ICO will be integrated.

Step 1: Prepare Your Icon Design

Start with your .ai or .psd file, which likely contains your app’s visual identity (e.g., a bullseye with red lines). Export a high-resolution PNG with transparency to use as the source.

From .ai:
- Open the file in Adobe Illustrator.
- Ensure the design has a transparent background (remove any solid fill outside the bullseye).
- Go to File > Export > Export As, choose PNG, set resolution to 1024x1024, and check “Transparent Background.”
- Save as icon-transparent.png on your Desktop.
From .psd:
- Open in Photoshop.
- Select the layer with your design, ensure the background layer is deleted or transparent.
- File > Export > Export As, select PNG, set to 1024x1024, and enable transparency.
- Save as icon-transparent.png.
From Other Images: If your two additional files are PNGs, pick the highest resolution one with transparency and rename it icon-transparent.png. Use Preview to adjust if needed (Tools > Adjust Size, ensure “Alpha” is preserved on export).

Step 2: Create the Iconset Folder

The ICNS format requires multiple image sizes, stored in an icon.iconset folder.

Open Terminal and navigate to your working directory (e.g., cd ~/Desktop).
Create the folder:
```
mkdir icon.iconset
```
Ensure it’s recognized as a folder (in Finder, right-click > New Folder if needed, name it icon.iconset, and click “Don’t Add” if prompted about the extension).

Step 3: Generate Required Sizes

Use the sips command to resize your PNG into the sizes needed for macOS, including Retina variants.

sips -z 16 16     icon-transparent.png --out icon.iconset/icon_16x16.png
sips -z 32 32     icon-transparent.png --out icon.iconset/icon_16x16@2x.png
sips -z 32 32     icon-transparent.png --out icon.iconset/icon_32x32.png
sips -z 64 64     icon-transparent.png --out icon.iconset/icon_32x32@2x.png
sips -z 128 128   icon-transparent.png --out icon.iconset/icon_128x128.png
sips -z 256 256   icon-transparent.png --out icon.iconset/icon_128x128@2x.png
sips -z 256 256   icon-transparent.png --out icon.iconset/icon_256x256.png
sips -z 512 512   icon-transparent.png --out icon.iconset/icon_256x256@2x.png
sips -z 512 512   icon-transparent.png --out icon.iconset/icon_512x512.png
sips -z 1024 1024 icon-transparent.png --out icon.iconset/icon_512x512@2x.png

If you encounter “Error 13,” ensure icon.iconset is a writable folder (use chmod -R u+w icon.iconset if needed).

Step 4: Convert to ICNS

Combine the resized images into a single ICNS file.

iconutil -c icns icon.iconset -o AppIcon.icns

This creates AppIcon.icns in the same directory. Open it in Preview to verify the design and transparency.

Step 5: Integrate into Electron (macOS)

Upload AppIcon.icns to your Replit Electron project and update the build configuration.

Upload: Drag AppIcon.icns into the Replit file explorer.

Edit package.json: Add or update the build section:

"build": {
    "mac": {
        "icon": "AppIcon.icns"
    }
}

Install Dependencies: Run npm install electron-builder --save-dev in Replit’s terminal.
Build: Add a script if missing ("build": "electron-builder --mac") and run npm run build.
Test: Download the .dmg or .app and check the icon in Finder.

Step 6: Create a Windows ICO File

For Windows compatibility, convert your PNG into an ICO file with multiple sizes.

Option 1: Using ImageMagick (Command-Line, Free):
- Install ImageMagick from imagemagick.org.
- Open Command Prompt (search cmd in Start menu).
- Navigate to your project folder (e.g., cd C:\Users\YourName\Projects\NewElectronApp).
- Run:
```
convert icon-transparent.png -define icon:auto-resize=256,48,32,16 AppIcon.ico
```
- This generates AppIcon.ico with sizes 256x256, 48x48, 32x32, and 16x16, preserving transparency.
Option 2: Using GIMP (Free GUI Tool):
- Download GIMP from gimp.org.
- Open icon-transparent.png, then File > Export As > Choose .ico format.
- Select sizes (e.g., 256x256, 48x48, 32x32, 16x16), uncheck “Save background color” for transparency, and save as AppIcon.ico.
Option 3: Online Converter:
- Use Convertio or Online-Convert.
- Upload icon-transparent.png, select sizes, and download AppIcon.ico. Avoid sensitive designs due to security risks.

Verify: Open AppIcon.ico in Windows Photos or IrfanView to confirm sizes and transparency.

Step 7: Integrate into Electron (Windows)

Add the ICO to your Electron project for Windows builds.

Upload: Place AppIcon.ico in the project root in Replit.

Edit package.json: Update the build section:

"build": {
    "win": {
        "icon": "AppIcon.ico"
    },
    "mac": {
        "icon": "AppIcon.icns"
    }
}

Build: Run npm run build (ensure "build": "electron-builder --win --mac" in scripts if targeting both).
Test: Check the .exe icon in Windows Explorer.

Tips for Success

Transparency: Start with a transparent PNG to preserve the outer transparency of your design.
Resolution: Use 1024x1024 as the base for ICNS/ICO to avoid pixelation.
Troubleshooting: If icons don’t appear, verify paths in package.json and check build logs.

With your .ai, .psd, and additional files, this process will give you polished icons for both macOS and Windows Electron apps. Happy designing!