Favicons et Electron/Tauri : personnaliser la marque de votre application de bureau

Donc vous avez construit une application web et maintenant vous voulez la packager en application de bureau. Vous lancez Electron ou Tauri, executez la commande de build, et... cette icone generique par defaut vous regarde fixement. Pas vraiment le look professionnel que vous visiez.

Voici le probleme : les icones d'applications de bureau fonctionnent completement differemment des favicons web. Ce petit PNG 32x32 assis dans votre dossier public ? Ca ne suffira pas. Les applications de bureau necessitent plusieurs formats, des tailles specifiques et des fichiers specifiques aux plateformes auxquels la plupart des developpeurs web ne pensent jamais.

Pourquoi votre favicon ne suffit pas

Quand votre application web fonctionne dans un navigateur, le favicon apparait dans l'onglet. Simple. Mais quand vous enveloppez cette meme application dans Electron ou Tauri, soudainement vous avez besoin d'icones pour :

La barre de titre de la fenetre d'application
Le dock (macOS) ou la barre des taches (Windows)
L'installateur et l'assistant de configuration
La liste "Ajout/Suppression de programmes"
Les associations de fichiers
La recherche Spotlight et les aperçus Finder

Chacun de ces contextes attend des tailles differentes et parfois des formats entierement differents. C'est pourquoi un seul fichier favicon laisse votre application de bureau avec un aspect inacheve.

Les trois formats dont vous avez vraiment besoin

ICO pour Windows

Windows utilise le format ICO, qui est en fait un conteneur qui contient plusieurs tailles dans un seul fichier. Votre fichier ico devrait inclure des couches pour 16, 24, 32, 48, 64 et 256 pixels. La couche 256px est particulierement importante car Windows l'utilise pour les ecrans haute resolution et les vues de grandes icones.

Une erreur courante est de generer un ico avec seulement une couche 32px. Cela fonctionne pour la barre des taches, mais votre application aura l'air floue dans le menu Demarrer et l'explorateur de fichiers.

ICNS pour macOS

Le format ICNS d'Apple est similaire en concept a ICO - il regroupe plusieurs tailles ensemble. Mais les exigences de taille sont plus strictes. Vous avez besoin de 16x16, 32x32, 128x128, 256x256 et 512x512 en versions 1x et 2x pour les ecrans Retina.

La commande iconutil sur macOS peut convertir un dossier specialement structure de PNG en fichier icns, mais honnetement, les outils automatises sont plus faciles.

PNG pour Linux

Les environnements de bureau Linux sont plus flexibles. La plupart accepteront un ensemble de fichiers PNG aux tailles standard (128, 256, 512). Certaines configurations electron-builder et Tauri pointent simplement vers un seul PNG haute resolution et laissent le systeme gerer la mise a l'echelle.

Configurer Electron

Si vous utilisez electron-builder (ce que font la plupart des projets Electron), la configuration des icones va dans votre package.json ou 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 cherche les fichiers d'icones dans le repertoire buildResources (par defaut build). Deposez vos fichiers icon.icns, icon.ico et un ensemble de fichiers PNG la-dedans, et vous etes pret.

Pour Electron Forge, le processus est similaire mais utilise un format de configuration different. Le fichier forge.config.js gere les chemins d'icones pour chaque plateforme.

Configurer Tauri

Tauri adopte une approche legerement differente. La commande tauri icon genere tous les formats requis a partir d'une seule image source :

npm run tauri icon ./app-icon.png

Cela cree le dossier icons complet avec des fichiers correctement formates pour toutes les plateformes. La sortie va dans src-tauri/icons/ par defaut.

Votre tauri.conf.json reference ces icones dans la section bundle :

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

Tauri 2.0 a simplifie cette configuration - la cle bundle est maintenant au niveau superieur plutot que nichee sous tauri.

Votre favicon web compte toujours

Voici quelque chose qui perturbe les gens : meme apres avoir configure les icones de bureau, votre favicon web est toujours utilise a l'interieur de l'application. Quand votre application Electron ou Tauri charge votre contenu web, la webview demande toujours favicon.ico comme le ferait un navigateur.

Cela signifie que vous avez besoin des deux :

Icones d'application de bureau (icns, ico, png) pour l'interface utilisateur au niveau du systeme d'exploitation
Favicons web pour le contenu interne de la webview

Si vous sautez le favicon web, certains elements internes du navigateur ou les devtools pourraient afficher une icone cassee. C'est un probleme mineur, mais facile a corriger.

Generer des icones a partir d'une source unique

Personne ne veut creer manuellement plus de 15 variantes d'icones. Voici des outils qui fonctionnent vraiment :

Pour Electron :

electron-icon-builder - Donnez-lui un PNG 1024x1024 et il produit tout ce dont vous avez besoin
electron-icon-maker - Fonctionnalite similaire, package npm

Pour Tauri :

Commande integree tauri icon - L'option la plus facile si vous utilisez deja Tauri CLI

Usage general :

Real Favicon Generator - Base web, gere a la fois les favicons web et les icones de bureau
IconVectors - Convertit un seul SVG en ensembles ICO, ICNS et PNG

La cle est de commencer avec une image source d'au moins 1024x1024 pixels. SVG est encore mieux car il s'adapte parfaitement.

Considerations de design

Les icones de bureau vivent dans des contextes differents des favicons web. Quelques points a garder a l'esprit :

La simplicite se reduit bien. Votre icone 512px peut etre superbe, mais verifiez comment elle s'affiche a 16px. Les details complexes deviennent des taches boueuses.

Testez sur de vrais fonds. Les icones du dock macOS reposent sur un fond translucide. Les icones de la barre des taches Windows peuvent etre sur des themes clairs ou sombres. Assurez-vous que votre icone a suffisamment de contraste dans les deux scenarios.

Respectez les conventions de plateforme. Les icones macOS ont souvent des ombres subtiles et des coins arrondis. Les icones Windows tendent a etre plus plates. Vous n'avez pas a suivre cela exactement, mais en etre conscient aide votre application a paraitre native.

Considerez les variantes masquables. Certains contextes (particulierement Android si vous faites aussi du mobile) recadreront votre icone en cercle ou carre arrondi. Concevez avec des zones de securite a l'esprit.

Problemes courants et solutions

L'icone ne se met pas a jour apres la reconstruction ? Electron et Tauri mettent en cache les icones de maniere agressive pendant le developpement. Essayez de vider completement le repertoire de sortie de build et reconstruisez.

Icones floues sur Windows ? Votre fichier ico manque la couche 256px. Regenerez avec un outil qui inclut toutes les tailles requises.

macOS affiche une icone generique ? Le fichier icns pourrait etre malformed ou au mauvais endroit. Executez iconutil -c icns YourIcon.iconset -o icon.icns pour regenerer de zero.

L'icone Linux ne s'affiche pas dans le dock ? Certains environnements de bureau ont besoin que l'icone soit enregistree via un fichier .desktop. Verifiez votre configuration electron-builder ou Tauri pour les parametres specifiques a Linux.

Mettre le tout ensemble

Une configuration d'icones correctement configuree pour une application de bureau multiplateforme ressemble a ceci :

build/
├── icon.icns          # icone d'application macOS
├── icon.ico           # icone d'application Windows
├── icon.png           # 512px pour Linux
├── 256x256.png        # Tailles Linux supplementaires
└── 128x128.png

Plus vos favicons web reguliers dans le repertoire public ou static pour le contenu de la webview.

L'effort supplementaire paie. Une icone soignee signale aux utilisateurs que votre application est complete et professionnelle - pas juste une page web enveloppee dans un shell. C'est l'une des premieres choses que les gens voient, et les premieres impressions comptent.

References

Electron Forge Icon Guide - Documentation officielle pour creer et ajouter des icones aux applications Electron
electron-builder Icons - Reference de configuration pour la configuration des icones electron-builder
Tauri App Icons - Documentation Tauri 2.0 pour la generation et la configuration d'icones
Apple Icon Image Format - Reference Wikipedia pour les specifications du format ICNS
Define Your App Icons - MDN - Guide de Mozilla sur les exigences d'icones d'application pour les PWA