Favicons en Electron/Tauri: Branding voor je desktop-webapp

Je hebt dus een webapp gebouwd en nu wil je het als desktopapplicatie verpakken. Je start Electron of Tauri op, voert het build-commando uit, en... daar staart dat generieke standaardicoon je aan. Niet bepaald de professionele uitstraling die je voor ogen had.

Het punt is: desktop-app-iconen werken compleet anders dan web-favicons. Die kleine 32x32 PNG in je public-map? Die volstaat niet. Desktop-apps hebben meerdere formaten, specifieke maten en platformspecifieke bestanden nodig waar de meeste webontwikkelaars nooit aan denken.

Waarom je favicon niet genoeg is

Wanneer je webapp in een browser draait, verschijnt de favicon in het tabblad. Simpel. Maar wanneer je diezelfde app in Electron of Tauri verpakt, heb je plotseling iconen nodig voor:

De titelbalk van het applicatievenster
Het dock (macOS) of de taakbalk (Windows)
Het installatieprogramma en de setup-wizard
De lijst "Programma's toevoegen/verwijderen"
Bestandsassociaties
Spotlight-zoeken en Finder-voorbeelden

Elk van deze contexten verwacht andere maten en soms compleet andere formaten. Daarom ziet je desktop-app er onaf uit met slechts een faviconbestand.

De drie formaten die je echt nodig hebt

ICO voor Windows

Windows gebruikt het ICO-formaat, dat eigenlijk een container is die meerdere maten in een bestand bevat. Je ico-bestand moet lagen bevatten voor 16, 24, 32, 48, 64 en 256 pixels. De 256px-laag is bijzonder belangrijk omdat Windows deze gebruikt voor high-DPI schermen en grote icoonweergaven.

Een veelgemaakte fout is het genereren van een ico met alleen een 32px-laag. Dit werkt voor de taakbalk, maar je app ziet er wazig uit in het Startmenu en de verkenner.

ICNS voor macOS

Apple's ICNS-formaat is vergelijkbaar in concept met ICO — het bundelt meerdere maten samen. Maar de maatvereisten zijn strenger. Je hebt 16x16, 32x32, 128x128, 256x256 en 512x512 nodig in zowel 1x als 2x versies voor Retina-schermen.

Het iconutil-commando op macOS kan een speciaal gestructureerde map met PNG's omzetten naar een icns-bestand, maar eerlijk gezegd zijn geautomatiseerde tools eenvoudiger.

PNG voor Linux

Linux-desktopomgevingen zijn flexibeler. De meeste accepteren een set PNG-bestanden in standaardmaten (128, 256, 512). Sommige electron-builder- en Tauri-configuraties verwijzen gewoon naar een enkele PNG met hoge resolutie en laten het systeem de schaling afhandelen.

Electron configureren

Als je electron-builder gebruikt (wat de meeste Electron-projecten doen), gaat de icoonconfiguratie in je package.json of 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 zoekt naar icoonbestanden in de buildResources-map (standaard build). Zet je icon.icns, icon.ico en een set PNG-bestanden daar neer, en je bent klaar.

Voor Electron Forge is het proces vergelijkbaar maar met een ander configuratieformaat. Het forge.config.js-bestand handelt icoonpaden af voor elk platform.

Tauri configureren

Tauri heeft een iets andere aanpak. Het tauri icon-commando genereert alle vereiste formaten vanuit een enkele bronafbeelding:

npm run tauri icon ./app-icon.png

Dit maakt de volledige icons-map aan met correct geformatteerde bestanden voor alle platforms. De output gaat standaard naar src-tauri/icons/.

Je tauri.conf.json verwijst naar deze iconen in de bundle-sectie:

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

Tauri 2.0 heeft deze configuratie vereenvoudigd — de bundle-sleutel staat nu op het hoogste niveau in plaats van genest onder tauri.

Je web-favicon is nog steeds belangrijk

Hier struikelen mensen over: zelfs na het instellen van desktop-iconen wordt je web-favicon nog steeds gebruikt binnen de app. Wanneer je Electron- of Tauri-app je webcontent laadt, vraagt de webview nog steeds favicon.ico op net als een browser.

Dit betekent dat je beide nodig hebt:

Desktop-applicatie-iconen (icns, ico, png) voor de OS-niveau UI
Web-favicons voor de interne webview-content

Als je de web-favicon overslaat, kan sommige interne browser-chrome of devtools een kapot icoon tonen. Het is een klein probleem, maar makkelijk op te lossen.

Iconen genereren vanuit een enkele bron

Niemand wil handmatig 15+ icoonvarianten maken. Hier zijn tools die daadwerkelijk werken:

Voor Electron:

electron-icon-builder - Geef het een 1024x1024 PNG en het geeft alles wat je nodig hebt
electron-icon-maker - Vergelijkbare functionaliteit, npm-pakket

Voor Tauri:

Ingebouwd tauri icon-commando - De makkelijkste optie als je de Tauri CLI al gebruikt

Algemeen:

Real Favicon Generator - Web-gebaseerd, handelt zowel web-favicons als desktop-iconen af
IconVectors - Converteert een enkele SVG naar ICO-, ICNS- en PNG-sets

De sleutel is beginnen met een bronafbeelding van minimaal 1024x1024 pixels. SVG is nog beter aangezien het perfect schaalt.

Ontwerpoverwegingen

Desktop-iconen leven in andere contexten dan web-favicons. Een paar zaken om in gedachten te houden:

Eenvoud schaalt naar beneden. Je 512px-icoon ziet er misschien geweldig uit, maar controleer hoe het wordt weergegeven op 16px. Complexe details worden wazige vlekken.

Test op echte achtergronden. macOS dock-iconen staan op een doorschijnende achtergrond. Windows taakbalkiconen kunnen op lichte of donkere thema's staan. Zorg ervoor dat je icoon genoeg contrast heeft in beide scenario's.

Respecteer platformconventies. macOS-iconen hebben vaak subtiele schaduwen en afgeronde hoeken. Windows-iconen zijn doorgaans vlakker. Je hoeft deze niet exact te volgen, maar bewust zijn ervan helpt je app native aan te voelen.

Overweeg maskeerbare varianten. Sommige contexten (met name Android als je ook mobiel doet) zullen je icoon bijsnijden tot een cirkel of afgerond vierkant. Ontwerp met veilige zones in gedachten.

Veelvoorkomende problemen en oplossingen

Icoon wordt niet bijgewerkt na herbouw? Zowel Electron als Tauri cachen iconen agressief tijdens development. Probeer de build-outputmap volledig te wissen en opnieuw te bouwen.

Wazige iconen op Windows? Je ico-bestand mist de 256px-laag. Regenereer met een tool die alle vereiste maten bevat.

macOS toont generiek icoon? Het icns-bestand is mogelijk misvormd of op de verkeerde locatie. Voer iconutil -c icns YourIcon.iconset -o icon.icns uit om opnieuw te genereren.

Linux-icoon verschijnt niet in dock? Sommige desktopomgevingen hebben het icoon nodig dat is geregistreerd via een .desktop-bestand. Controleer je electron-builder of Tauri-configuratie voor Linux-specifieke instellingen.

Alles samenvoegen

Een correct geconfigureerde icoonsetup voor een cross-platform desktop-app ziet er zo uit:

build/
├── icon.icns          # macOS-applicatie-icoon
├── icon.ico           # Windows-applicatie-icoon
├── icon.png           # 512px voor Linux
├── 256x256.png        # Extra Linux-maten
└── 128x128.png

Plus je reguliere web-favicons in de public of static map voor de webview-content.

De extra moeite loont. Een gepolijst icoon signaleert aan gebruikers dat je app compleet en professioneel is — niet zomaar een webpagina verpakt in een schil. Het is een van de eerste dingen die mensen zien, en eerste indrukken tellen.

Referenties

Electron Forge Icon Guide - Officiële documentatie voor het maken en toevoegen van iconen aan Electron-apps
electron-builder Icons - Configuratiereferentie voor electron-builder icoonsetup
Tauri App Icons - Tauri 2.0-documentatie voor icoongeneratie en -configuratie
Apple Icon Image Format - Wikipedia-referentie voor ICNS-formaatspecificaties
Define Your App Icons - MDN - Mozilla's handleiding over app-icoonvereisten voor PWA's