Favicons og Electron/Tauri: Merkevarebygging av skrivebordswebappen din

Så du har bygget en webapp og nå vil du pakke den som en skrivebordsapplikasjon. Du starter opp Electron eller Tauri, kjører byggekommandoen, og... der er det generiske standardikonet som stirrer tilbake på deg. Ikke akkurat det profesjonelle utseendet du var ute etter.

Her er saken: skrivebordsappikoner fungerer helt annerledes enn web-favicons. Den lille 32x32 PNG-en som ligger i public-mappen din? Den holder ikke. Skrivebordsapper trenger flere formater, spesifikke størrelser og plattformspesifikke filer som de fleste webutviklere aldri tenker på.

Hvorfor faviconet ditt ikke er nok

Når webappen din kjører i en nettleser, vises faviconet i fanen. Enkelt. Men når du pakker den samme appen i Electron eller Tauri, trenger du plutselig ikoner for:

Applikasjonsvinduets tittellinje
Docken (macOS) eller oppgavelinjen (Windows)
Installasjonsprogrammet og veiviseren
Listen «Legg til/fjern programmer»
Filassosiasjoner
Spotlight-søk og Finder-forhåndsvisninger

Hver av disse kontekstene forventer ulike størrelser og noen ganger helt ulike formater. Det er derfor en enkelt favicon-fil etterlater skrivebordsappen din med et uferdig utseende.

De tre formatene du faktisk trenger

ICO for Windows

Windows bruker ICO-formatet, som egentlig er en beholder som holder flere størrelser i én fil. ICO-filen din bør inkludere lag for 16, 24, 32, 48, 64 og 256 piksler. 256px-laget er spesielt viktig fordi Windows bruker det for høy-DPI-skjermer og store ikonvisninger.

En vanlig feil er å generere en ICO med bare et 32px-lag. Det fungerer for oppgavelinjen, men appen din vil se uskarp ut i Start-menyen og filutforskeren.

ICNS for macOS

Apples ICNS-format ligner i konsept på ICO — det samler flere størrelser sammen. Men størrelseskravene er strengere. Du trenger 16x16, 32x32, 128x128, 256x256 og 512x512 i både 1x- og 2x-versjoner for Retina-skjermer.

iconutil-kommandoen på macOS kan konvertere en spesialstrukturert mappe med PNG-er til en ICNS-fil, men ærlig talt er automatiserte verktøy enklere.

PNG for Linux

Linux-skrivebordsmiljøer er mer fleksible. De fleste godtar et sett med PNG-filer i standardstørrelser (128, 256, 512). Noen electron-builder- og Tauri-konfigurasjoner peker bare til en enkelt høyoppløselig PNG og lar systemet håndtere skaleringen.

Konfigurere Electron

Hvis du bruker electron-builder (som de fleste Electron-prosjekter gjør), legges ikonkonfigurasjonen i 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 ser etter ikonfiler i buildResources-katalogen (standard er build). Legg inn icon.icns, icon.ico og et sett med PNG-filer der, og du er klar.

For Electron Forge er prosessen lignende, men bruker et annet konfigurasjonsformat. forge.config.js-filen håndterer ikonstier for hver plattform.

Konfigurere Tauri

Tauri tar en litt annen tilnærming. Kommandoen tauri icon genererer alle nødvendige formater fra et enkelt kildebilde:

npm run tauri icon ./app-icon.png

Dette oppretter hele ikonmappen med riktig formaterte filer for alle plattformer. Utdata går til src-tauri/icons/ som standard.

tauri.conf.json refererer til disse ikonene i bundle-seksjonen:

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

Tauri 2.0 forenklet denne konfigurasjonen — bundle-nøkkelen er nå på toppnivå i stedet for nestet under tauri.

Web-faviconet ditt er fortsatt viktig

Her er noe som forvirrer folk: selv etter å ha satt opp skrivebordsikoner, brukes web-faviconet ditt fortsatt inne i appen. Når Electron- eller Tauri-appen din laster webinnholdet ditt, etterspør webvisningen fortsatt favicon.ico akkurat som en nettleser ville gjort.

Det betyr at du trenger begge:

Skrivebordsapplikasjonsikoner (icns, ico, png) for OS-nivå-UI
Web-favicons for det interne webvisningsinnholdet

Hvis du hopper over web-faviconet, kan noe intern nettleserkrom eller utviklerverktøy vise et ødelagt ikon. Det er et mindre problem, men enkelt å fikse.

Generere ikoner fra én enkelt kilde

Ingen vil manuelt lage 15+ ikonvarianter. Her er verktøy som faktisk fungerer:

For Electron:

electron-icon-builder - Gi den en 1024x1024 PNG og den lager alt du trenger
electron-icon-maker - Lignende funksjonalitet, npm-pakke

For Tauri:

Innebygd tauri icon-kommando - Det enkleste alternativet hvis du allerede bruker Tauri CLI

Generelle formål:

Real Favicon Generator - Nettbasert, håndterer både web-favicons og skrivebordsikoner
IconVectors - Konverterer en enkelt SVG til ICO-, ICNS- og PNG-sett

Nøkkelen er å starte med et kildebilde på minst 1024x1024 piksler. SVG er enda bedre siden det skalerer perfekt.

Designhensyn

Skrivebordsikoner lever i andre kontekster enn web-favicons. Noen ting å ha i tankene:

Enkelhet skalerer ned. Det 512px-ikonet ditt ser kanskje flott ut, men sjekk hvordan det gjengis ved 16px. Komplekse detaljer blir uklare klumper.

Test på faktiske bakgrunner. macOS dock-ikoner sitter på en gjennomskinnelig bakgrunn. Windows oppgavelinjeikoner kan være på lyse eller mørke temaer. Sørg for at ikonet ditt har nok kontrast i begge scenariene.

Respekter plattformkonvensjoner. macOS-ikoner har ofte subtile skygger og avrundede hjørner. Windows-ikoner har en tendens til å være flatere. Du trenger ikke følge disse nøyaktig, men å være klar over dem hjelper appen din å føles innebygd.

Vurder maskerbare varianter. Noen kontekster (spesielt Android hvis du også gjør mobil) vil beskjære ikonet ditt til en sirkel eller avrundet firkant. Design med sikre soner i tankene.

Vanlige problemer og løsninger

Ikon oppdateres ikke etter gjenoppbygging? Både Electron og Tauri mellomlagrer ikoner aggressivt under utvikling. Prøv å tømme hele byggeutdata-katalogen og bygge på nytt.

Uskarpe ikoner på Windows? ICO-filen din mangler 256px-laget. Generer på nytt med et verktøy som inkluderer alle nødvendige størrelser.

macOS viser generisk ikon? ICNS-filen kan være feilformatert eller på feil plassering. Kjør iconutil -c icns YourIcon.iconset -o icon.icns for å generere på nytt fra bunnen av.

Linux-ikon vises ikke i docken? Noen skrivebordsmiljøer trenger ikonet registrert gjennom en .desktop-fil. Sjekk electron-builder- eller Tauri-konfigurasjonen for Linux-spesifikke innstillinger.

Sette det hele sammen

Et riktig konfigurert ikonoppsett for en plattformuavhengig skrivebordsapp ser slik ut:

build/
├── icon.icns          # macOS-applikasjonsikon
├── icon.ico           # Windows-applikasjonsikon
├── icon.png           # 512px for Linux
├── 256x256.png        # Ekstra Linux-størrelser
└── 128x128.png

Pluss dine vanlige web-favicons i public- eller static-katalogen for webvisningsinnholdet.

Den ekstra innsatsen lønner seg. Et polert ikon signaliserer til brukerne at appen din er komplett og profesjonell — ikke bare en nettside pakket inn i et skall. Det er noe av det første folk ser, og førsteinntrykk betyr noe.

Referanser

Electron Forge Icon Guide - Offisiell dokumentasjon for å opprette og legge til ikoner i Electron-apper
electron-builder Icons - Konfigurasjonsreferanse for electron-builder ikonoppsett
Tauri App Icons - Tauri 2.0-dokumentasjon for ikongenerering og konfigurasjon
Apple Icon Image Format - Wikipedia-referanse for ICNS-formatspesifikasjoner
Define Your App Icons - MDN - Mozillas guide om krav til appikoner for PWAer