Favicons og Electron/Tauri: Branding af din desktop-webapp

Du har bygget en webapp, og nu vil du pakke den som en desktopapplikation. Du starter Electron eller Tauri, kører build-kommandoen, og... der er det generiske standardikon, der stirrer tilbage på dig. Ikke ligefrem det professionelle look, du gik efter.

Sagen er: desktop app-ikoner fungerer helt anderledes end web-favicons. Den lille 32x32 PNG, der ligger i din public-mappe? Den er ikke nok. Desktop-apps har brug for flere formater, specifikke størrelser og platformspecifikke filer, som de fleste webudviklere aldrig tænker over.

Hvorfor dit favicon ikke er nok

Når din webapp kører i en browser, vises faviconen i fanen. Simpelt. Men når du indpakker den samme app i Electron eller Tauri, har du pludselig brug for ikoner til:

Programmets vinduetitellinje
Docken (macOS) eller proceslinjen (Windows)
Installationsprogrammet og opsætningsguiden
Listen "Tilføj/fjern programmer"
Filtilknytninger
Spotlight-søgning og Finder-forhåndsvisninger

Hver af disse sammenhænge forventer forskellige størrelser og sommetider helt forskellige formater. Derfor efterlader en enkelt favicon-fil din desktopapp med et ufærdigt udseende.

De tre formater du faktisk har brug for

ICO til Windows

Windows bruger ICO-formatet, som faktisk er en beholder, der indeholder flere størrelser i én fil. Din ico-fil bør inkludere lag for 16, 24, 32, 48, 64 og 256 pixels. 256px-laget er særligt vigtigt, fordi Windows bruger det til høj-DPI-skærme og store ikonvisninger.

En almindelig fejl er at generere en ico med kun et 32px-lag. Det fungerer til proceslinjen, men din app vil se sløret ud i startmenuen og filstifinderen.

ICNS til macOS

Apples ICNS-format ligner ICO i koncept — det samler flere størrelser sammen. Men størrelseskravene er strengere. Du har brug for 16x16, 32x32, 128x128, 256x256 og 512x512 i både 1x og 2x versioner til Retina-skærme.

iconutil-kommandoen på macOS kan konvertere en specielt struktureret mappe med PNG'er til en icns-fil, men ærligt talt er automatiserede værktøjer nemmere.

PNG til Linux

Linux-desktopmiljøer er mere fleksible. De fleste accepterer et sæt PNG-filer i standardstørrelser (128, 256, 512). Nogle electron-builder- og Tauri-konfigurationer peger bare på en enkelt højopløselig PNG og lader systemet håndtere skaleringen.

Konfigurering af Electron

Hvis du bruger electron-builder (hvilket de fleste Electron-projekter gør), placeres ikonkonfigurationen i din package.json eller 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 leder efter ikonfiler i buildResources-mappen (standard er build). Læg dine icon.icns, icon.ico og et sæt PNG-filer der, og du er klar.

For Electron Forge er processen lignende, men bruger et andet konfigurationsformat. forge.config.js-filen håndterer ikonstier for hver platform.

Konfigurering af Tauri

Tauri tager en lidt anderledes tilgang. Kommandoen tauri icon genererer alle nødvendige formater fra ét enkelt kildebillede:

npm run tauri icon ./app-icon.png

Dette opretter hele ikonmappen med korrekt formaterede filer til alle platforme. Outputtet går til src-tauri/icons/ som standard.

Din tauri.conf.json refererer til disse ikoner i bundle-sektionen:

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

Tauri 2.0 forenklede denne konfiguration — bundle-nøglen er nu på øverste niveau i stedet for indlejret under tauri.

Dit web-favicon er stadig vigtigt

Her er noget, der forvirrer folk: selv efter opsætning af desktop-ikoner bruges dit web-favicon stadig inde i appen. Når din Electron- eller Tauri-app indlæser dit webindhold, anmoder webviewet stadig om favicon.ico ligesom en browser ville gøre.

Det betyder, at du har brug for begge dele:

Desktop-applikationsikoner (icns, ico, png) til OS-niveau UI'en
Web-favicons til det interne webview-indhold

Hvis du springer web-faviconen over, kan noget internt browser-chrome eller devtools vise et ødelagt ikon. Det er et mindre problem, men nemt at rette.

Generering af ikoner fra én enkelt kilde

Ingen vil manuelt oprette 15+ ikonvarianter. Her er værktøjer, der faktisk virker:

Til Electron:

electron-icon-builder - Giv det en 1024x1024 PNG, og det outputter alt, hvad du har brug for
electron-icon-maker - Lignende funktionalitet, npm-pakke

Til Tauri:

Indbygget tauri icon-kommando - Den nemmeste mulighed, hvis du allerede bruger Tauri CLI

Generelt:

Real Favicon Generator - Webbaseret, håndterer både web-favicons og desktop-ikoner
IconVectors - Konverterer en enkelt SVG til ICO, ICNS og PNG-sæt

Nøglen er at starte med et kildebillede på mindst 1024x1024 pixels. SVG er endnu bedre, da det skalerer perfekt.

Designovervejelser

Desktop-ikoner lever i andre sammenhænge end web-favicons. Et par ting at huske på:

Enkelhed skalerer ned. Dit 512px-ikon ser måske fantastisk ud, men tjek hvordan det renderes ved 16px. Komplekse detaljer bliver mudrede klatter.

Test på faktiske baggrunde. macOS dock-ikoner sidder på en translucent baggrund. Windows-proceslinjeikoner kan være på lyse eller mørke temaer. Sørg for, at dit ikon har nok kontrast i begge scenarier.

Respektér platformkonventioner. macOS-ikoner har ofte subtile skygger og afrundede hjørner. Windows-ikoner plejer at være fladere. Du behøver ikke følge dette nøjagtigt, men at være opmærksom på det hjælper din app til at føles native.

Overvej maskable varianter. Nogle sammenhænge (særligt Android, hvis du også laver mobil) vil beskære dit ikon til en cirkel eller afrundet firkant. Design med sikkerhedszoner i tankerne.

Almindelige problemer og løsninger

Ikon opdateres ikke efter rebuild? Både Electron og Tauri cacher ikoner aggressivt under udvikling. Prøv at rydde build-outputmappen fuldstændigt og genbyg.

Slørede ikoner på Windows? Din ico-fil mangler 256px-laget. Regenerér med et værktøj, der inkluderer alle nødvendige størrelser.

macOS viser generisk ikon? icns-filen kan være fejlformateret eller på forkert placering. Kør iconutil -c icns YourIcon.iconset -o icon.icns for at regenerere fra bunden.

Linux-ikon vises ikke i dock? Nogle desktopmiljøer kræver, at ikonet registreres via en .desktop-fil. Tjek din electron-builder- eller Tauri-konfiguration for Linux-specifikke indstillinger.

Det hele samlet

En korrekt konfigureret ikonopsætning til en cross-platform desktopapp ser sådan ud:

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

Plus dine almindelige web-favicons i public- eller static-mappen til webview-indholdet.

Den ekstra indsats betaler sig. Et poleret ikon signalerer til brugerne, at din app er komplet og professionel — ikke bare en hjemmeside pakket ind i en skal. Det er en af de første ting, folk ser, og førsteindtryk betyder noget.

Referencer

Electron Forge Icon Guide - Officiel dokumentation til oprettelse og tilføjelse af ikoner til Electron-apps
electron-builder Icons - Konfigurationsreference for electron-builder ikonopsætning
Tauri App Icons - Tauri 2.0-dokumentation til ikongenerering og -konfiguration
Apple Icon Image Format - Wikipedia-reference for ICNS-formatspecifikationer
Define Your App Icons - MDN - Mozillas guide til app-ikonkrav for PWA'er