Favicons and Electron/Tauri: Branding Your Desktop Web App

So you've built a web app and now you want to package it as a desktop application. You fire up Electron or Tauri, run the build command, and... there's that generic default icon staring back at you. Not exactly the professional look you were going for.

Here's the thing: desktop app icons work completely differently from web favicons. That little 32x32 PNG sitting in your public folder? It's not going to cut it. Desktop apps need multiple formats, specific sizes, and platform-specific files that most web developers never think about.

Why Your Favicon Isn't Enough

When your web app runs in a browser, the favicon shows up in the tab. Simple. But when you wrap that same app in Electron or Tauri, suddenly you need icons for:

The application window title bar
The dock (macOS) or taskbar (Windows)
The installer and setup wizard
The "Add/Remove Programs" list
File associations
Spotlight search and Finder previews

Each of these contexts expects different sizes and sometimes different formats entirely. That's why a single favicon file leaves your desktop app looking unfinished.

The Three Formats You Actually Need

ICO for Windows

Windows uses the ICO format, which is actually a container that holds multiple sizes in one file. Your ico file should include layers for 16, 24, 32, 48, 64, and 256 pixels. The 256px layer is particularly important because Windows uses it for high-DPI displays and large icon views.

A common mistake is generating an ico with only a 32px layer. This works for the taskbar, but your app will look blurry in the Start menu and file explorer.

ICNS for macOS

Apple's ICNS format is similar in concept to ICO - it bundles multiple sizes together. But the size requirements are stricter. You need 16x16, 32x32, 128x128, 256x256, and 512x512 in both 1x and 2x versions for Retina displays.

The iconutil command on macOS can convert a specially-structured folder of PNGs into an icns file, but honestly, automated tools are easier.

PNG for Linux

Linux desktop environments are more flexible. Most will accept a set of PNG files at standard sizes (128, 256, 512). Some electron-builder and Tauri configurations just point to a single high-resolution PNG and let the system handle scaling.

Configuring Electron

If you're using electron-builder (which most Electron projects do), icon configuration goes in your package.json or electron-builder.yml:

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

electron-builder looks for icon files in the buildResources directory (defaults to build). Drop your icon.icns, icon.ico, and a set of PNG files there, and you're set.

For Electron Forge, the process is similar but uses a different configuration format. The forge.config.js file handles icon paths for each platform.

Configuring Tauri

Tauri takes a slightly different approach. The tauri icon command generates all required formats from a single source image:

npm run tauri icon ./app-icon.png

This creates the entire icons folder with properly formatted files for all platforms. The output goes to src-tauri/icons/ by default.

Your tauri.conf.json references these icons in the bundle section:

{
  "bundle": {
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

Tauri 2.0 simplified this configuration - the bundle key is now at the top level rather than nested under tauri.

Your Web Favicon Still Matters

Here's something that trips people up: even after setting up desktop icons, your web favicon is still used inside the app. When your Electron or Tauri app loads your web content, the webview still requests favicon.ico just like a browser would.

This means you need both:

Desktop application icons (icns, ico, png) for the OS-level UI
Web favicons for the internal webview content

If you skip the web favicon, some internal browser chrome or devtools might show a broken icon. It's a minor issue, but easy to fix.

Generating Icons from a Single Source

Nobody wants to manually create 15+ icon variants. Here are tools that actually work:

For Electron:

electron-icon-builder - Give it a 1024x1024 PNG and it outputs everything you need
electron-icon-maker - Similar functionality, npm package

For Tauri:

Built-in tauri icon command - The easiest option if you're already using Tauri CLI

General purpose:

Real Favicon Generator - Web-based, handles both web favicons and desktop icons
IconVectors - Converts a single SVG to ICO, ICNS, and PNG sets

The key is starting with a source image at least 1024x1024 pixels. SVG is even better since it scales perfectly.

Design Considerations

Desktop icons live in different contexts than web favicons. A few things to keep in mind:

Simplicity scales down. Your 512px icon might look great, but check how it renders at 16px. Complex details become muddy blobs.

Test on actual backgrounds. macOS dock icons sit on a translucent background. Windows taskbar icons might be on light or dark themes. Make sure your icon has enough contrast in both scenarios.

Respect platform conventions. macOS icons often have subtle shadows and rounded corners. Windows icons tend to be flatter. You don't have to follow these exactly, but being aware of them helps your app feel native.

Consider maskable variants. Some contexts (particularly Android if you're also doing mobile) will crop your icon into a circle or rounded square. Design with safe zones in mind.

Common Problems and Fixes

Icon not updating after rebuild? Both Electron and Tauri cache icons aggressively during development. Try clearing the build output directory completely and rebuilding.

Blurry icons on Windows? Your ico file is missing the 256px layer. Regenerate with a tool that includes all required sizes.

macOS shows generic icon? The icns file might be malformed or in the wrong location. Run iconutil -c icns YourIcon.iconset -o icon.icns to regenerate from scratch.

Linux icon not showing in dock? Some desktop environments need the icon registered through a .desktop file. Check your electron-builder or Tauri configuration for Linux-specific settings.

Putting It All Together

A properly configured icon setup for a cross-platform desktop app looks like this:

build/
├── icon.icns          # macOS application icon
├── icon.ico           # Windows application icon
├── icon.png           # 512px for Linux
├── 256x256.png        # Additional Linux sizes
└── 128x128.png

Plus your regular web favicons in the public or static directory for the webview content.

The extra effort pays off. A polished icon signals to users that your app is complete and professional - not just a web page wrapped in a shell. It's one of the first things people see, and first impressions matter.

References

Electron Forge Icon Guide - Official documentation for creating and adding icons to Electron apps
electron-builder Icons - Configuration reference for electron-builder icon setup
Tauri App Icons - Tauri 2.0 documentation for icon generation and configuration
Apple Icon Image Format - Wikipedia reference for ICNS format specifications
Define Your App Icons - MDN - Mozilla's guide on app icon requirements for PWAs