Desktop Export Bundle

The Desktop export bundle provides everything you need for cross-platform desktop application icons. It includes native formats for macOS (.icns), Windows (.ico), and Linux (PNG set).

What's Included

desktop-icons/
├── icon.icns           # macOS app icon
├── icon.ico            # Windows app icon
├── icons/              # Linux PNG set
│   ├── icon-16x16.png
│   ├── icon-32x32.png
│   ├── icon-48x48.png
│   ├── icon-64x64.png
│   ├── icon-128x128.png
│   ├── icon-256x256.png
│   └── icon-512x512.png
└── SETUP.md

File Format Details

macOS (.icns)

The .icns file is Apple's native icon format containing multiple resolutions:

• 16x16, 32x32, 64x64, 128x128, 256x256, 512x512, 1024x1024
• Includes @2x versions for Retina displays

Used in:

• App bundle (YourApp.app/Contents/Resources/icon.icns)
• Dock
• Finder
• Spotlight
• Launchpad

Windows (.ico)

The .ico file is Windows' native icon format containing:

• 16x16, 32x32, 48x48, 64x64, 128x128, 256x256

Used in:

• Taskbar
• Desktop shortcuts
• File Explorer
• Start menu
• Window title bar

Linux (PNG set)

Linux uses PNG files following the freedesktop.org icon theme specification:

• 16x16 through 512x512 in standard sizes

Used in:

• Application menu
• Panel/taskbar
• Desktop shortcuts
• Window decorations

Electron Setup

1. Extract Files

Extract the ZIP to your project's build/ folder:

your-electron-app/
├── build/
│   ├── icon.icns
│   ├── icon.ico
│   └── icons/
│       ├── icon-16x16.png
│       ├── icon-32x32.png
│       └── ...
├── package.json
└── src/

2. Configure electron-builder

Add to your electron-builder.yml:

appId: com.yourcompany.yourapp
productName: Your App

mac:
  icon: build/icon.icns
  category: public.app-category.utilities

win:
  icon: build/icon.ico

linux:
  icon: build/icons
  category: Utility

Or in package.json:

{
  "build": {
    "appId": "com.yourcompany.yourapp",
    "mac": {
      "icon": "build/icon.icns"
    },
    "win": {
      "icon": "build/icon.ico"
    },
    "linux": {
      "icon": "build/icons"
    }
  }
}

3. Build

# All platforms
electron-builder --mac --win --linux

# Or specific platform
electron-builder --mac
electron-builder --win
electron-builder --linux

Tauri Setup

1. Extract Files

Place icons in your Tauri project:

your-tauri-app/
├── src-tauri/
│   ├── icons/
│   │   ├── icon.icns
│   │   ├── icon.ico
│   │   ├── icon-16x16.png
│   │   ├── icon-32x32.png
│   │   └── ...
│   └── tauri.conf.json

2. Configure tauri.conf.json

{
  "bundle": {
    "icon": [
      "icons/icon-32x32.png",
      "icons/icon-128x128.png",
      "icons/icon-256x256.png",
      "icons/icon-512x512.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

3. Build

npm run tauri build
# or
cargo tauri build

NW.js Setup

In package.json:

{
  "window": {
    "icon": "build/icon-256x256.png"
  }
}

For Windows installer, reference the .ico in your build configuration.

Platform-Specific Notes

macOS

• Code signing: Icons are preserved during code signing
• App Store: macOS App Store accepts .icns with all required sizes
• Dark mode: Consider how your icon looks on both light and dark menu bars

Windows

• High DPI: Windows automatically selects the appropriate size from the .ico
• Installer icon: Use the same .ico for your installer (NSIS, Squirrel, etc.)
• Taskbar: Windows uses 24x24 or 32x32 depending on DPI settings

Linux

• Desktop entry: Reference the icon by name in .desktop files:

  [Desktop Entry]
  Name=Your App
  Icon=your-app
  Type=Application

• System integration: Copy icons to ~/.local/share/icons/hicolor/[size]/apps/
• Flatpak/Snap: Include icons in your package manifest

Testing

macOS

# Build and test
npm run build
open dist/mac/YourApp.app

Verify in:

• Dock
• Finder sidebar
• Launchpad
• Spotlight search

Windows

# Build and test
npm run build
./dist/win-unpacked/YourApp.exe

Verify in:

• Taskbar (pinned)
• Desktop shortcut
• Start menu
• File Explorer

Linux

# Build and test
npm run build
./dist/linux-unpacked/yourapp

Verify in:

• Application menu
• Desktop (if .desktop file created)
• Window switcher

Troubleshooting

macOS icon not updating?

1. Touch the app bundle: touch /Applications/YourApp.app
2. Restart Finder: killall Finder
3. Clear icon cache: sudo rm -rf /Library/Caches/com.apple.iconservices.store

Windows icon appears blurry?

The .ico file contains multiple sizes. Ensure all sizes from 16x16 to 256x256 are included (the Favycons bundle includes all required sizes).

Linux icon not showing in menu?

1. Update icon cache: gtk-update-icon-cache -f ~/.local/share/icons/hicolor/
2. Verify .desktop file references the correct icon name
3. Check icon is installed in correct location

Build fails with icon error?

1. Verify file paths in your build configuration
2. Ensure icon files are not corrupted (try opening them in an image viewer)
3. For Windows, ensure the .ico is a valid multi-resolution icon