Favicons und Electron/Tauri: Branding für Ihre Desktop-Web-App

Sie haben also eine Web-App entwickelt und möchten sie nun als Desktop-Anwendung verpacken. Sie starten Electron oder Tauri, führen den Build-Befehl aus, und... da starrt Sie dieses generische Standard-Icon an. Nicht gerade der professionelle Look, den Sie angestrebt haben.

Die Sache ist die: Desktop-App-Icons funktionieren völlig anders als Web-Favicons. Das kleine 32x32 PNG in Ihrem Public-Ordner? Das reicht nicht aus. Desktop-Apps benötigen mehrere Formate, spezifische Größen und plattformspezifische Dateien, an die die meisten Webentwickler nie denken.

Warum Ihr Favicon nicht ausreicht

Wenn Ihre Web-App im Browser läuft, erscheint das Favicon im Tab. Einfach. Aber wenn Sie dieselbe App in Electron oder Tauri verpacken, brauchen Sie plötzlich Icons für:

Die Titelleiste des Anwendungsfensters
Das Dock (macOS) oder die Taskleiste (Windows)
Den Installer und Setup-Assistenten
Die Liste „Programme hinzufügen/entfernen"
Dateizuordnungen
Spotlight-Suche und Finder-Vorschauen

Jeder dieser Kontexte erwartet unterschiedliche Größen und manchmal völlig unterschiedliche Formate. Deshalb lässt eine einzelne Favicon-Datei Ihre Desktop-App unfertig aussehen.

Die drei Formate, die Sie wirklich brauchen

ICO für Windows

Windows verwendet das ICO-Format, das eigentlich ein Container ist, der mehrere Größen in einer Datei enthält. Ihre ICO-Datei sollte Ebenen für 16, 24, 32, 48, 64 und 256 Pixel enthalten. Die 256px-Ebene ist besonders wichtig, weil Windows sie für High-DPI-Displays und große Icon-Ansichten verwendet.

Ein häufiger Fehler ist die Generierung einer ICO-Datei mit nur einer 32px-Ebene. Das funktioniert für die Taskleiste, aber Ihre App wird im Startmenü und Datei-Explorer unscharf aussehen.

ICNS für macOS

Apples ICNS-Format ist vom Konzept her ähnlich wie ICO – es bündelt mehrere Größen zusammen. Aber die Größenanforderungen sind strenger. Sie brauchen 16x16, 32x32, 128x128, 256x256 und 512x512 sowohl in 1x- als auch 2x-Versionen für Retina-Displays.

Der iconutil-Befehl auf macOS kann einen speziell strukturierten Ordner mit PNGs in eine ICNS-Datei konvertieren, aber ehrlich gesagt sind automatisierte Tools einfacher.

PNG für Linux

Linux-Desktop-Umgebungen sind flexibler. Die meisten akzeptieren einen Satz PNG-Dateien in Standardgrößen (128, 256, 512). Einige electron-builder- und Tauri-Konfigurationen verweisen einfach auf ein einzelnes hochauflösendes PNG und lassen das System die Skalierung übernehmen.

Electron konfigurieren

Wenn Sie electron-builder verwenden (was bei den meisten Electron-Projekten der Fall ist), wird die Icon-Konfiguration in Ihrer package.json oder electron-builder.yml vorgenommen:

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

electron-builder sucht nach Icon-Dateien im buildResources-Verzeichnis (standardmäßig build). Legen Sie Ihre icon.icns, icon.ico und einen Satz PNG-Dateien dort ab, und Sie sind fertig.

Für Electron Forge ist der Prozess ähnlich, verwendet aber ein anderes Konfigurationsformat. Die forge.config.js-Datei verwaltet Icon-Pfade für jede Plattform.

Tauri konfigurieren

Tauri verfolgt einen etwas anderen Ansatz. Der tauri icon-Befehl generiert alle benötigten Formate aus einem einzigen Quellbild:

npm run tauri icon ./app-icon.png

Dies erstellt den gesamten Icons-Ordner mit korrekt formatierten Dateien für alle Plattformen. Die Ausgabe landet standardmäßig in src-tauri/icons/.

Ihre tauri.conf.json referenziert diese Icons im Bundle-Bereich:

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

Tauri 2.0 hat diese Konfiguration vereinfacht – der Bundle-Schlüssel liegt jetzt auf der obersten Ebene statt unter tauri verschachtelt.

Ihr Web-Favicon ist weiterhin wichtig

Hier stolpern viele: Selbst nach dem Einrichten der Desktop-Icons wird Ihr Web-Favicon weiterhin innerhalb der App verwendet. Wenn Ihre Electron- oder Tauri-App Ihren Web-Content lädt, fordert die Webview favicon.ico genau wie ein Browser an.

Das bedeutet, Sie brauchen beides:

Desktop-Anwendungs-Icons (icns, ico, png) für die OS-Level-UI
Web-Favicons für den internen Webview-Inhalt

Wenn Sie das Web-Favicon weglassen, zeigen einige interne Browser-Chrome-Elemente oder Devtools möglicherweise ein defektes Icon. Es ist ein kleines Problem, aber leicht zu beheben.

Icons aus einer einzigen Quelle generieren

Niemand möchte manuell 15+ Icon-Varianten erstellen. Hier sind Tools, die tatsächlich funktionieren:

Für Electron:

electron-icon-builder - Geben Sie ein 1024x1024 PNG ein und es generiert alles, was Sie brauchen
electron-icon-maker - Ähnliche Funktionalität, npm-Paket

Für Tauri:

Integrierter tauri icon-Befehl - Die einfachste Option, wenn Sie bereits die Tauri CLI verwenden

Allgemein:

Real Favicon Generator - Webbasiert, verarbeitet sowohl Web-Favicons als auch Desktop-Icons
IconVectors - Konvertiert ein einzelnes SVG zu ICO, ICNS und PNG-Sets

Der Schlüssel ist, mit einem Quellbild von mindestens 1024x1024 Pixeln zu starten. SVG ist sogar noch besser, da es perfekt skaliert.

Designüberlegungen

Desktop-Icons leben in anderen Kontexten als Web-Favicons. Einige Dinge, die Sie beachten sollten:

Einfachheit skaliert nach unten. Ihr 512px-Icon mag großartig aussehen, aber prüfen Sie, wie es bei 16px dargestellt wird. Komplexe Details werden zu matschigen Flecken.

Auf tatsächlichen Hintergründen testen. macOS-Dock-Icons sitzen auf einem halbtransparenten Hintergrund. Windows-Taskleisten-Icons können auf hellen oder dunklen Themes sein. Stellen Sie sicher, dass Ihr Icon in beiden Szenarien genug Kontrast hat.

Plattformkonventionen respektieren. macOS-Icons haben oft subtile Schatten und abgerundete Ecken. Windows-Icons sind tendenziell flacher. Sie müssen diese nicht exakt befolgen, aber das Bewusstsein dafür hilft, dass sich Ihre App nativ anfühlt.

Maskierbare Varianten berücksichtigen. Einige Kontexte (insbesondere Android, wenn Sie auch mobil entwickeln) beschneiden Ihr Icon zu einem Kreis oder abgerundeten Quadrat. Gestalten Sie mit Sicherheitszonen im Hinterkopf.

Häufige Probleme und Lösungen

Icon aktualisiert sich nach Neuaufbau nicht? Sowohl Electron als auch Tauri cachen Icons aggressiv während der Entwicklung. Versuchen Sie, das Build-Ausgabeverzeichnis vollständig zu leeren und neu zu bauen.

Unscharfe Icons unter Windows? Ihrer ICO-Datei fehlt die 256px-Ebene. Generieren Sie sie mit einem Tool neu, das alle erforderlichen Größen enthält.

macOS zeigt generisches Icon? Die ICNS-Datei ist möglicherweise fehlerhaft oder am falschen Ort. Führen Sie iconutil -c icns YourIcon.iconset -o icon.icns aus, um sie von Grund auf neu zu generieren.

Linux-Icon wird nicht im Dock angezeigt? Einige Desktop-Umgebungen benötigen das Icon, das über eine .desktop-Datei registriert wird. Prüfen Sie Ihre electron-builder- oder Tauri-Konfiguration für Linux-spezifische Einstellungen.

Alles zusammenführen

Eine korrekt konfigurierte Icon-Einrichtung für eine plattformübergreifende Desktop-App sieht so aus:

build/
├── icon.icns          # macOS-Anwendungsicon
├── icon.ico           # Windows-Anwendungsicon
├── icon.png           # 512px für Linux
├── 256x256.png        # Zusätzliche Linux-Größen
└── 128x128.png

Plus Ihre regulären Web-Favicons im Public- oder Static-Verzeichnis für den Webview-Inhalt.

Der zusätzliche Aufwand lohnt sich. Ein poliertes Icon signalisiert den Benutzern, dass Ihre App vollständig und professionell ist – nicht nur eine in eine Hülle verpackte Webseite. Es ist eines der ersten Dinge, die Menschen sehen, und der erste Eindruck zählt.

Referenzen

Electron Forge Icon Guide - Offizielle Dokumentation zum Erstellen und Hinzufügen von Icons zu Electron-Apps
electron-builder Icons - Konfigurationsreferenz für electron-builder Icon-Setup
Tauri App Icons - Tauri 2.0 Dokumentation für Icon-Generierung und Konfiguration
Apple Icon Image Format - Wikipedia-Referenz für ICNS-Formatspezifikationen
Define Your App Icons - MDN - Mozillas Leitfaden zu App-Icon-Anforderungen für PWAs