Favicons och Electron/Tauri: Varumärkesbygg din skrivbordswebbapp

Så du har byggt en webbapp och nu vill du paketera den som en skrivbordsapplikation. Du startar Electron eller Tauri, kör build-kommandot, och... där stirrar den generiska standardikonen tillbaka mot dig. Inte direkt det professionella utseendet du var ute efter.

Här är grejen: skrivbordsappikoner fungerar helt annorlunda än webbfavicons. Den lilla 32x32 PNG:en som ligger i din public-mapp? Den räcker inte. Skrivbordsappar behöver flera format, specifika storlekar och plattformsspecifika filer som de flesta webbutvecklare aldrig tänker på.

Varför din favicon inte räcker

När din webbapp körs i en webbläsare visas faviconen i fliken. Enkelt. Men när du paketerar samma app i Electron eller Tauri behöver du plötsligt ikoner för:

Applikationsfönstrets titelrad
Dockan (macOS) eller aktivitetsfältet (Windows)
Installationsprogrammet och installationsguiden
Listan "Lägg till/ta bort program"
Filassociationer
Spotlight-sökning och Finder-förhandsgranskningar

Vart och ett av dessa sammanhang förväntar sig olika storlekar och ibland helt olika format. Därför lämnar en enda favicon-fil din skrivbordsapp med ett ofärdigt intryck.

De tre formaten du faktiskt behöver

ICO för Windows

Windows använder ICO-formatet, som egentligen är en behållare som rymmer flera storlekar i en fil. Din ico-fil bör innehålla lager för 16, 24, 32, 48, 64 och 256 pixlar. 256px-lagret är särskilt viktigt eftersom Windows använder det för högupplösta skärmar och stora ikonvyer.

Ett vanligt misstag är att generera en ico med bara ett 32px-lager. Det fungerar för aktivitetsfältet, men din app kommer att se suddig ut i Start-menyn och filutforskaren.

ICNS för macOS

Apples ICNS-format liknar ICO i konceptet — det buntar ihop flera storlekar. Men storlekskraven är striktare. Du behöver 16x16, 32x32, 128x128, 256x256 och 512x512 i både 1x och 2x-versioner för Retina-skärmar.

Kommandot iconutil på macOS kan konvertera en specialstrukturerad mapp med PNG:er till en icns-fil, men ärligt talat är automatiserade verktyg enklare.

PNG för Linux

Linux-skrivbordsmiljöer är mer flexibla. De flesta accepterar en uppsättning PNG-filer i standardstorlekar (128, 256, 512). Vissa electron-builder- och Tauri-konfigurationer pekar bara på en enda högupplöst PNG och låter systemet hantera skalningen.

Konfigurera Electron

Om du använder electron-builder (vilket de flesta Electron-projekt gör) läggs 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 letar efter ikonfiler i buildResources-katalogen (standard är build). Lägg dina icon.icns, icon.ico och en uppsättning PNG-filer där, så är det klart.

För Electron Forge är processen liknande men använder ett annat konfigurationsformat. Filen forge.config.js hanterar ikonsökvägar för varje plattform.

Konfigurera Tauri

Tauri har en något annorlunda metod. Kommandot tauri icon genererar alla nödvändiga format från en enda källbild:

npm run tauri icon ./app-icon.png

Detta skapar hela ikonmappen med korrekt formaterade filer för alla plattformar. Utdata hamnar i src-tauri/icons/ som standard.

Din tauri.conf.json refererar till dessa 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 förenklade denna konfiguration — bundle-nyckeln finns nu på toppnivå istället för nästlad under tauri.

Din webbfavicon spelar fortfarande roll

Här är något som förvirrar folk: även efter att du konfigurerat skrivbordsikoner används din webbfavicon fortfarande inne i appen. När din Electron- eller Tauri-app laddar ditt webbinnehåll begär webview:n fortfarande favicon.ico precis som en webbläsare.

Det betyder att du behöver båda:

Skrivbordsapplikationsikoner (icns, ico, png) för OS-nivåns gränssnitt
Webbfavicons för det interna webview-innehållet

Om du hoppar över webbfaviconen kan viss intern webbläsarkrom eller devtools visa en trasig ikon. Det är ett mindre problem, men enkelt att fixa.

Generera ikoner från en enda källa

Ingen vill manuellt skapa 15+ ikonvarianter. Här är verktyg som faktiskt fungerar:

För Electron:

electron-icon-builder - Ge den en 1024x1024 PNG och den genererar allt du behöver
electron-icon-maker - Liknande funktionalitet, npm-paket

För Tauri:

Inbyggt tauri icon-kommando - Det enklaste alternativet om du redan använder Tauri CLI

Generella verktyg:

Real Favicon Generator - Webbaserat, hanterar både webbfavicons och skrivbordsikoner
IconVectors - Konverterar en enda SVG till ICO, ICNS och PNG-uppsättningar

Nyckeln är att börja med en källbild på minst 1024x1024 pixlar. SVG är ännu bättre eftersom det skalas perfekt.

Designöverväganden

Skrivbordsikoner lever i andra sammanhang än webbfavicons. Några saker att tänka på:

Enkelhet skalar ned. Din 512px-ikon kan se bra ut, men kontrollera hur den renderas vid 16px. Komplexa detaljer blir grumliga klumpar.

Testa på verkliga bakgrunder. macOS dock-ikoner sitter på en halvgenomskinlig bakgrund. Windows aktivitetsfältsikoner kan vara på ljusa eller mörka teman. Se till att din ikon har tillräcklig kontrast i båda scenarierna.

Respektera plattformskonventioner. macOS-ikoner har ofta subtila skuggor och rundade hörn. Windows-ikoner tenderar att vara plattare. Du behöver inte följa dessa exakt, men att vara medveten om dem hjälper din app att kännas inhemsk.

Överväg maskerbara varianter. Vissa sammanhang (särskilt Android om du även gör mobil) kommer att beskära din ikon till en cirkel eller rundad ruta. Designa med säkra zoner i åtanke.

Vanliga problem och lösningar

Ikon uppdateras inte efter ombyggnad? Både Electron och Tauri cachar ikoner aggressivt under utveckling. Prova att rensa byggutdatakatalogen helt och bygga om.

Suddiga ikoner på Windows? Din ico-fil saknar 256px-lagret. Regenerera med ett verktyg som inkluderar alla nödvändiga storlekar.

macOS visar generisk ikon? ICNS-filen kan vara felformaterad eller på fel plats. Kör iconutil -c icns YourIcon.iconset -o icon.icns för att regenerera från grunden.

Linux-ikon visas inte i dockan? Vissa skrivbordsmiljöer behöver ikonen registrerad via en .desktop-fil. Kontrollera din electron-builder- eller Tauri-konfiguration för Linux-specifika inställningar.

Sätt ihop allt

En korrekt konfigurerad ikoninstallation för en plattformsoberoende skrivbordsapp ser ut så här:

build/
├── icon.icns          # macOS-applikationsikon
├── icon.ico           # Windows-applikationsikon
├── icon.png           # 512px för Linux
├── 256x256.png        # Ytterligare Linux-storlekar
└── 128x128.png

Plus dina vanliga webbfavicons i public- eller static-katalogen för webview-innehållet.

Den extra ansträngningen lönar sig. En polerad ikon signalerar till användare att din app är komplett och professionell — inte bara en webbsida inpackad i ett skal. Det är en av de första sakerna folk ser, och första intrycket spelar roll.

Referenser

Electron Forge Icon Guide - Officiell dokumentation för att skapa och lägga till ikoner i Electron-appar
electron-builder Icons - Konfigurationsreferens för electron-builder ikoninstallation
Tauri App Icons - Tauri 2.0 dokumentation för ikongenerering och konfiguration
Apple Icon Image Format - Wikipedia-referens för ICNS-formatspecifikationer
Define Your App Icons - MDN - Mozillas guide om appikonkrav för PWA:er