Favicon ed Electron/Tauri: Il branding della vostra app desktop web

Avete costruito una web app e ora volete impacchettarla come applicazione desktop. Avviate Electron o Tauri, lanciate il comando di build, e... ecco quell'icona predefinita generica che vi fissa. Non esattamente l'aspetto professionale che cercavate.

Ecco il punto: le icone delle app desktop funzionano in modo completamente diverso dalle favicon web. Quel piccolo PNG 32x32 nella vostra cartella public? Non è sufficiente. Le app desktop richiedono formati multipli, dimensioni specifiche e file specifici per piattaforma a cui la maggior parte degli sviluppatori web non pensa mai.

Perché la vostra favicon non basta

Quando la vostra web app gira in un browser, la favicon appare nella scheda. Semplice. Ma quando racchiudete la stessa app in Electron o Tauri, improvvisamente avete bisogno di icone per:

La barra del titolo della finestra dell'applicazione
Il dock (macOS) o la barra delle applicazioni (Windows)
Il programma di installazione e la procedura guidata
L'elenco "Installazione applicazioni"
Le associazioni dei file
La ricerca Spotlight e le anteprime del Finder

Ognuno di questi contesti si aspetta dimensioni diverse e a volte formati completamente diversi. Ecco perché un singolo file favicon lascia la vostra app desktop con un aspetto incompleto.

I tre formati di cui avete effettivamente bisogno

ICO per Windows

Windows usa il formato ICO, che è in realtà un contenitore che racchiude più dimensioni in un unico file. Il vostro file ico dovrebbe includere livelli per 16, 24, 32, 48, 64 e 256 pixel. Il livello da 256px è particolarmente importante perché Windows lo usa per i display ad alta densità e le visualizzazioni a icone grandi.

Un errore comune è generare un ico con solo il livello da 32px. Funziona per la barra delle applicazioni, ma la vostra app apparirà sfocata nel menu Start e nell'esplora file.

ICNS per macOS

Il formato ICNS di Apple è simile nel concetto all'ICO — raggruppa più dimensioni insieme. Ma i requisiti dimensionali sono più rigidi. Servono 16x16, 32x32, 128x128, 256x256 e 512x512 sia in versioni 1x che 2x per i display Retina.

Il comando iconutil su macOS può convertire una cartella di PNG appositamente strutturata in un file icns, ma onestamente, gli strumenti automatizzati sono più semplici.

PNG per Linux

Gli ambienti desktop Linux sono più flessibili. La maggior parte accetterà un set di file PNG alle dimensioni standard (128, 256, 512). Alcune configurazioni di electron-builder e Tauri puntano semplicemente a un singolo PNG ad alta risoluzione e lasciano che il sistema gestisca il ridimensionamento.

Configurare Electron

Se usate electron-builder (come la maggior parte dei progetti Electron), la configurazione delle icone va nel vostro package.json o 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 cerca i file icona nella directory buildResources (il default è build). Inserite i vostri icon.icns, icon.ico e un set di file PNG lì, e siete a posto.

Per Electron Forge, il processo è simile ma usa un formato di configurazione diverso. Il file forge.config.js gestisce i percorsi delle icone per ogni piattaforma.

Configurare Tauri

Tauri adotta un approccio leggermente diverso. Il comando tauri icon genera tutti i formati richiesti da una singola immagine sorgente:

npm run tauri icon ./app-icon.png

Questo crea l'intera cartella icons con file formattati correttamente per tutte le piattaforme. L'output va in src-tauri/icons/ per impostazione predefinita.

Il vostro tauri.conf.json fa riferimento a queste icone nella sezione bundle:

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

Tauri 2.0 ha semplificato questa configurazione — la chiave bundle è ora al livello superiore piuttosto che annidata sotto tauri.

La vostra favicon web è ancora importante

Ecco qualcosa che confonde le persone: anche dopo aver configurato le icone desktop, la vostra favicon web viene ancora utilizzata all'interno dell'app. Quando la vostra app Electron o Tauri carica il contenuto web, la webview richiede comunque favicon.ico proprio come farebbe un browser.

Questo significa che avete bisogno di entrambi:

Icone dell'applicazione desktop (icns, ico, png) per l'interfaccia utente a livello di sistema operativo
Favicon web per il contenuto della webview interna

Se saltate la favicon web, alcune parti interne del browser chrome o i devtools potrebbero mostrare un'icona rotta. È un problema minore, ma facile da risolvere.

Generare icone da una singola sorgente

Nessuno vuole creare manualmente oltre 15 varianti di icone. Ecco gli strumenti che funzionano davvero:

Per Electron:

electron-icon-builder - Dategli un PNG 1024x1024 e genera tutto il necessario
electron-icon-maker - Funzionalità simile, pacchetto npm

Per Tauri:

Comando integrato tauri icon - L'opzione più semplice se usate già la CLI di Tauri

Uso generico:

Real Favicon Generator - Basato su web, gestisce sia favicon web che icone desktop
IconVectors - Converte un singolo SVG in set ICO, ICNS e PNG

La chiave è partire con un'immagine sorgente di almeno 1024x1024 pixel. SVG è ancora meglio poiché si ridimensiona perfettamente.

Considerazioni di design

Le icone desktop vivono in contesti diversi rispetto alle favicon web. Alcune cose da tenere a mente:

La semplicità si ridimensiona verso il basso. La vostra icona da 512px potrebbe sembrare fantastica, ma controllate come viene renderizzata a 16px. I dettagli complessi diventano macchie confuse.

Testate su sfondi reali. Le icone del dock macOS sono posizionate su uno sfondo traslucido. Le icone della barra delle applicazioni Windows potrebbero trovarsi su temi chiari o scuri. Assicuratevi che la vostra icona abbia contrasto sufficiente in entrambi gli scenari.

Rispettate le convenzioni della piattaforma. Le icone macOS hanno spesso ombre sottili e angoli arrotondati. Le icone Windows tendono a essere più piatte. Non dovete seguirle esattamente, ma esserne consapevoli aiuta la vostra app a sembrare nativa.

Considerate le varianti maskable. Alcuni contesti (in particolare Android se fate anche mobile) ritaglieranno la vostra icona in un cerchio o quadrato arrotondato. Progettate tenendo conto delle zone sicure.

Problemi comuni e soluzioni

L'icona non si aggiorna dopo il rebuild? Sia Electron che Tauri memorizzano nella cache le icone in modo aggressivo durante lo sviluppo. Provate a svuotare completamente la directory di output del build e ricompilare.

Icone sfocate su Windows? Al vostro file ico manca il livello da 256px. Rigenerate con uno strumento che include tutte le dimensioni richieste.

macOS mostra un'icona generica? Il file icns potrebbe essere malformato o nella posizione sbagliata. Eseguite iconutil -c icns YourIcon.iconset -o icon.icns per rigenerare da zero.

L'icona Linux non appare nel dock? Alcuni ambienti desktop richiedono che l'icona sia registrata tramite un file .desktop. Controllate la configurazione di electron-builder o Tauri per le impostazioni specifiche di Linux.

Mettere tutto insieme

Una configurazione delle icone correttamente impostata per un'app desktop cross-platform ha questo aspetto:

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

Più le vostre normali favicon web nella directory public o static per il contenuto della webview.

Lo sforzo extra ripaga. Un'icona curata segnala agli utenti che la vostra app è completa e professionale — non solo una pagina web racchiusa in un contenitore. È una delle prime cose che le persone vedono, e la prima impressione conta.

Riferimenti

Electron Forge Icon Guide - Documentazione ufficiale per la creazione e l'aggiunta di icone alle app Electron
electron-builder Icons - Riferimento di configurazione per il setup delle icone con electron-builder
Tauri App Icons - Documentazione Tauri 2.0 per la generazione e configurazione delle icone
Apple Icon Image Format - Riferimento Wikipedia per le specifiche del formato ICNS
Define Your App Icons - MDN - Guida Mozilla sui requisiti delle icone delle app per le PWA