Favicony a Electron/Tauri: Branding Twojej desktopowej aplikacji webowej

Zbudowałeś aplikację webową i teraz chcesz ją spakować jako aplikację desktopową. Uruchamiasz Electron lub Tauri, odpalasz polecenie budowania i... ta generyczna domyślna ikona wpatruje się w Ciebie. Niespecjalnie profesjonalny wygląd.

Sprawa wygląda tak: ikony aplikacji desktopowych działają zupełnie inaczej niż favicony webowe. Ten mały plik PNG 32x32 w Twoim katalogu public? Nie wystarczy. Aplikacje desktopowe potrzebują wielu formatów, konkretnych rozmiarów i plików specyficznych dla platform, o których większość deweloperów webowych nigdy nie myśli.

Dlaczego Twoja favicona nie wystarczy

Gdy Twoja aplikacja webowa działa w przeglądarce, favicona wyświetla się w karcie. Proste. Ale gdy zawijasz tę samą aplikację w Electron lub Tauri, nagle potrzebujesz ikon dla:

Paska tytułowego okna aplikacji
Docka (macOS) lub paska zadań (Windows)
Instalatora i kreatora konfiguracji
Listy "Dodaj/Usuń programy"
Skojarzeń plików
Wyszukiwania Spotlight i podglądów Findera

Każdy z tych kontekstów oczekuje innych rozmiarów, a czasem zupełnie innych formatów. Dlatego pojedynczy plik favicony sprawia, że Twoja aplikacja desktopowa wygląda na niedokończoną.

Trzy formaty, których naprawdę potrzebujesz

ICO dla Windows

Windows używa formatu ICO, który jest właściwie kontenerem przechowującym wiele rozmiarów w jednym pliku. Twój plik ico powinien zawierać warstwy dla 16, 24, 32, 48, 64 i 256 pikseli. Warstwa 256 px jest szczególnie ważna, ponieważ Windows używa jej na wyświetlaczach o wysokim DPI i w widoku dużych ikon.

Częstym błędem jest generowanie ico z tylko jedną warstwą 32 px. Działa to na pasku zadań, ale Twoja aplikacja będzie wyglądać rozmyto w menu Start i eksploratorze plików.

ICNS dla macOS

Format ICNS od Apple jest koncepcyjnie podobny do ICO — łączy wiele rozmiarów w jedną całość. Ale wymagania dotyczące rozmiarów są bardziej rygorystyczne. Potrzebujesz 16x16, 32x32, 128x128, 256x256 i 512x512 zarówno w wersjach 1x, jak i 2x dla wyświetlaczy Retina.

Polecenie iconutil na macOS może przekonwertować specjalnie strukturowany folder PNG na plik icns, ale szczerze mówiąc, automatyczne narzędzia są łatwiejsze.

PNG dla Linuxa

Środowiska graficzne Linux są bardziej elastyczne. Większość zaakceptuje zestaw plików PNG w standardowych rozmiarach (128, 256, 512). Niektóre konfiguracje electron-builder i Tauri po prostu wskazują na pojedynczy plik PNG w wysokiej rozdzielczości i pozwalają systemowi obsłużyć skalowanie.

Konfiguracja Electron

Jeśli używasz electron-builder (co większość projektów Electron robi), konfiguracja ikon trafia do package.json lub 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 szuka plików ikon w katalogu buildResources (domyślnie build). Umieść tam icon.icns, icon.ico i zestaw plików PNG, i gotowe.

Dla Electron Forge proces jest podobny, ale używa innego formatu konfiguracji. Plik forge.config.js obsługuje ścieżki ikon dla każdej platformy.

Konfiguracja Tauri

Tauri przyjmuje nieco inne podejście. Polecenie tauri icon generuje wszystkie wymagane formaty z jednego obrazu źródłowego:

npm run tauri icon ./app-icon.png

To tworzy cały folder ikon z prawidłowo sformatowanymi plikami dla wszystkich platform. Wynik trafia domyślnie do src-tauri/icons/.

Twój tauri.conf.json odwołuje się do tych ikon w sekcji bundle:

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

Tauri 2.0 uprościło tę konfigurację — klucz bundle jest teraz na najwyższym poziomie, a nie zagnieżdżony pod tauri.

Twoja favicona webowa nadal ma znaczenie

Oto coś, co zaskakuje ludzi: nawet po skonfigurowaniu ikon desktopowych, Twoja favicona webowa jest nadal używana wewnątrz aplikacji. Gdy aplikacja Electron lub Tauri ładuje Twoją treść webową, webview nadal żąda favicon.ico tak jak przeglądarka.

Oznacza to, że potrzebujesz obu:

Ikony aplikacji desktopowej (icns, ico, png) dla interfejsu na poziomie systemu operacyjnego
Favicony webowe dla wewnętrznej treści webview

Jeśli pominiesz faviconę webową, niektóre wewnętrzne elementy przeglądarki lub narzędzia deweloperskie mogą pokazać uszkodzoną ikonę. To drobny problem, ale łatwy do naprawienia.

Generowanie ikon z jednego źródła

Nikt nie chce ręcznie tworzyć ponad 15 wariantów ikon. Oto narzędzia, które naprawdę działają:

Dla Electron:

electron-icon-builder - Podaj PNG 1024x1024, a narzędzie wygeneruje wszystko, czego potrzebujesz
electron-icon-maker - Podobna funkcjonalność, pakiet npm

Dla Tauri:

Wbudowane polecenie tauri icon - Najłatwiejsza opcja, jeśli już używasz Tauri CLI

Ogólnego zastosowania:

Real Favicon Generator - Narzędzie webowe, obsługuje zarówno favicony webowe, jak i ikony desktopowe
IconVectors - Konwertuje pojedynczy SVG na zestawy ICO, ICNS i PNG

Kluczem jest rozpoczęcie od obrazu źródłowego co najmniej 1024x1024 pikseli. SVG jest jeszcze lepszy, ponieważ skaluje się idealnie.

Kwestie projektowe

Ikony desktopowe żyją w innych kontekstach niż favicony webowe. Kilka rzeczy do zapamiętania:

Prostota skaluje się w dół. Twoja ikona 512 px może wyglądać świetnie, ale sprawdź, jak renderuje się w 16 px. Złożone detale stają się rozmytymi plamami.

Testuj na rzeczywistych tłach. Ikony docka macOS siedzą na półprzezroczystym tle. Ikony paska zadań Windows mogą być na jasnym lub ciemnym motywie. Upewnij się, że Twoja ikona ma wystarczający kontrast w obu scenariuszach.

Szanuj konwencje platform. Ikony macOS często mają subtelne cienie i zaokrąglone rogi. Ikony Windows bywają bardziej płaskie. Nie musisz ich ściśle przestrzegać, ale świadomość ich istnienia pomaga Twojej aplikacji wyglądać natywnie.

Rozważ warianty maskable. Niektóre konteksty (szczególnie Android, jeśli robisz też wersję mobilną) przycinają ikonę do koła lub zaokrąglonego kwadratu. Projektuj z myślą o bezpiecznych strefach.

Typowe problemy i rozwiązania

Ikona nie aktualizuje się po przebudowaniu? Zarówno Electron, jak i Tauri agresywnie buforują ikony podczas dewelopmentu. Spróbuj całkowicie wyczyścić katalog wyjściowy budowania i przebudować.

Rozmyte ikony na Windows? Twój plik ico nie ma warstwy 256 px. Wygeneruj ponownie za pomocą narzędzia, które zawiera wszystkie wymagane rozmiary.

macOS pokazuje generyczną ikonę? Plik icns może być zniekształcony lub w złej lokalizacji. Uruchom iconutil -c icns YourIcon.iconset -o icon.icns, aby wygenerować od nowa.

Ikona Linuxa nie wyświetla się w docku? Niektóre środowiska graficzne potrzebują ikony zarejestrowanej przez plik .desktop. Sprawdź konfigurację electron-builder lub Tauri pod kątem ustawień specyficznych dla Linuxa.

Wszystko razem

Prawidłowo skonfigurowany zestaw ikon dla wieloplatformowej aplikacji desktopowej wygląda tak:

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

Plus Twoje zwykłe favicony webowe w katalogu public lub static dla treści webview.

Dodatkowy wysiłek się opłaca. Dopracowana ikona sygnalizuje użytkownikom, że Twoja aplikacja jest kompletna i profesjonalna — nie tylko strona internetowa owinięta w powłokę. To jedna z pierwszych rzeczy, które ludzie widzą, a pierwsze wrażenie ma znaczenie.

Źródła

Electron Forge Icon Guide - Oficjalna dokumentacja tworzenia i dodawania ikon do aplikacji Electron
electron-builder Icons - Referencja konfiguracji ikon w electron-builder
Tauri App Icons - Dokumentacja Tauri 2.0 dotycząca generowania i konfiguracji ikon
Apple Icon Image Format - Referencja Wikipedii dotycząca specyfikacji formatu ICNS
Define Your App Icons - MDN - Przewodnik Mozilli po wymaganiach ikon aplikacji dla PWA