Faviconlar ve Electron/Tauri: Masaüstü Web Uygulamanıza Marka Kimliği Kazandırma

Bir web uygulaması oluşturdunuz ve şimdi masaüstü uygulaması olarak paketlemek istiyorsunuz. Electron veya Tauri'yi başlatıp derleme komutunu çalıştırıyorsunuz ve... size varsayılan genel simge bakıyor. Tam da hedeflediğiniz profesyonel görünüm değil.

Mesele şu: masaüstü uygulama simgeleri web faviconlarından tamamen farklı çalışır. Public klasörünüzdeki o küçük 32x32 PNG yeterli olmayacak. Masaüstü uygulamaları birden fazla format, belirli boyutlar ve çoğu web geliştiricisinin hiç düşünmediği platforma özel dosyalar gerektirir.

Neden Faviconunuz Yeterli Değil

Web uygulamanız bir tarayıcıda çalıştığında, favicon sekmede görünür. Basit. Ama aynı uygulamayı Electron veya Tauri ile sarmaladığınızda, aniden şunlar için simgelere ihtiyacınız olur:

Uygulama penceresi başlık çubuğu
Dock (macOS) veya görev çubuğu (Windows)
Yükleyici ve kurulum sihirbazı
"Program Ekle/Kaldır" listesi
Dosya ilişkilendirmeleri
Spotlight araması ve Finder önizlemeleri

Bu bağlamların her biri farklı boyutlar ve bazen tamamen farklı formatlar bekler. İşte bu nedenle tek bir favicon dosyası masaüstü uygulamanızı tamamlanmamış gösterir.

Gerçekten İhtiyacınız Olan Üç Format

Windows İçin ICO

Windows, aslında tek bir dosyada birden fazla boyut barındıran bir kap olan ICO formatını kullanır. ICO dosyanız 16, 24, 32, 48, 64 ve 256 piksel katmanlarını içermelidir. 256 piksel katmanı özellikle önemlidir çünkü Windows bunu yüksek DPI ekranlar ve büyük simge görünümleri için kullanır.

Yaygın bir hata, yalnızca 32 piksel katmanlı bir ICO oluşturmaktır. Bu görev çubuğu için işe yarar, ama uygulamanız Başlat menüsünde ve dosya gezgininde bulanık görünecektir.

macOS İçin ICNS

Apple'ın ICNS formatı konsept olarak ICO'ya benzer — birden fazla boyutu birlikte paketler. Ancak boyut gereksinimleri daha katıdır. Retina ekranlar için hem 1x hem 2x sürümlerinde 16x16, 32x32, 128x128, 256x256 ve 512x512'ye ihtiyacınız var.

macOS'taki iconutil komutu özel yapılandırılmış bir PNG klasörünü ICNS dosyasına dönüştürebilir, ama dürüst olmak gerekirse otomatik araçlar daha kolaydır.

Linux İçin PNG

Linux masaüstü ortamları daha esnektir. Çoğu standart boyutlarda (128, 256, 512) bir dizi PNG dosyasını kabul eder. Bazı electron-builder ve Tauri yapılandırmaları sadece tek bir yüksek çözünürlüklü PNG'ye işaret eder ve sistemin ölçeklemeyi yapmasına izin verir.

Electron'u Yapılandırma

Electron-builder kullanıyorsanız (çoğu Electron projesi kullanır), simge yapılandırması package.json veya electron-builder.yml dosyanıza gider:

{
  "build": {
    "appId": "com.yourapp.id",
    "icon": "build/icon",
    "mac": {
      "icon": "build/icon.icns"
    },
    "win": {
      "icon": "build/icon.ico"
    },
    "linux": {
      "icon": "build"
    }
  }
}

electron-builder simge dosyalarını buildResources dizininde arar (varsayılan olarak build). icon.icns, icon.ico ve bir dizi PNG dosyanızı oraya bırakın, hazırsınız.

Electron Forge için süreç benzerdir ancak farklı bir yapılandırma formatı kullanır. forge.config.js dosyası her platform için simge yollarını yönetir.

Tauri'yi Yapılandırma

Tauri biraz farklı bir yaklaşım benimser. tauri icon komutu tek bir kaynak görselinden gerekli tüm formatları oluşturur:

npm run tauri icon ./app-icon.png

Bu, tüm platformlar için düzgün biçimlendirilmiş dosyalarla tam simge klasörünü oluşturur. Çıktı varsayılan olarak src-tauri/icons/ dizinine gider.

tauri.conf.json dosyanız bundle bölümünde bu simgelere referans verir:

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

Tauri 2.0 bu yapılandırmayı basitleştirdi — bundle anahtarı artık tauri altında iç içe olmak yerine en üst düzeydedir.

Web Faviconunuz Hâlâ Önemli

İnsanları şaşırtan bir şey var: masaüstü simgelerini kurduktan sonra bile web faviconunuz uygulamanın içinde hâlâ kullanılır. Electron veya Tauri uygulamanız web içeriğinizi yüklediğinde, webview tıpkı bir tarayıcı gibi favicon.ico'yu talep eder.

Bu, her ikisine de ihtiyacınız olduğu anlamına gelir:

İşletim sistemi düzeyindeki kullanıcı arayüzü için masaüstü uygulama simgeleri (icns, ico, png)
Dahili webview içeriği için web faviconları

Web faviconunu atlarsanız, bazı dahili tarayıcı öğeleri veya geliştirici araçları bozuk bir simge gösterebilir. Küçük bir sorun ama düzeltmesi kolay.

Tek Kaynaktan Simge Oluşturma

Kimse 15'ten fazla simge varyantını manuel olarak oluşturmak istemez. İşte gerçekten işe yarayan araçlar:

Electron İçin:

electron-icon-builder - 1024x1024 PNG verin, ihtiyacınız olan her şeyi çıktı olarak verir
electron-icon-maker - Benzer işlevsellik, npm paketi

Tauri İçin:

Yerleşik tauri icon komutu - Zaten Tauri CLI kullanıyorsanız en kolay seçenek

Genel amaçlı:

Real Favicon Generator - Web tabanlı, hem web faviconlarını hem masaüstü simgelerini yönetir
IconVectors - Tek bir SVG'yi ICO, ICNS ve PNG setlerine dönüştürür

Anahtar, en az 1024x1024 piksel boyutunda bir kaynak görselile başlamaktır. SVG mükemmel ölçeklendiği için daha da iyidir.

Tasarım Değerlendirmeleri

Masaüstü simgeleri web faviconlarından farklı bağlamlarda yaşar. Akılda tutulması gereken birkaç şey:

Sadelik küçülür. 512 piksel simgeniz harika görünebilir, ama 16 pikselde nasıl render edildiğini kontrol edin. Karmaşık detaylar bulanık lekelere dönüşür.

Gerçek arka planlarda test edin. macOS dock simgeleri yarı saydam bir arka plan üzerinde durur. Windows görev çubuğu simgeleri açık veya koyu temalarda olabilir. Simgenizin her iki senaryoda da yeterli kontrasta sahip olduğundan emin olun.

Platform kurallarına saygı gösterin. macOS simgelerinde genellikle hafif gölgeler ve yuvarlatılmış köşeler bulunur. Windows simgeleri daha düz olma eğilimindedir. Bunları birebir takip etmeniz gerekmez, ancak farkında olmak uygulamanızın yerel hissetmesine yardımcı olur.

Kırpılabilir varyantları düşünün. Bazı bağlamlar (özellikle mobil de yapıyorsanız Android) simgenizi daire veya yuvarlatılmış kare şeklinde kırpar. Güvenli bölgeleri göz önünde bulundurarak tasarlayın.

Yaygın Sorunlar ve Çözümler

Yeniden derlemeden sonra simge güncellenmiyor mu? Hem Electron hem Tauri geliştirme sırasında simgeleri agresif şekilde önbelleğe alır. Derleme çıktı dizinini tamamen temizleyip yeniden derlemeyi deneyin.

Windows'ta bulanık simgeler mi? ICO dosyanızda 256 piksel katmanı eksik. Gerekli tüm boyutları içeren bir araçla yeniden oluşturun.

macOS genel simge mi gösteriyor? ICNS dosyası hatalı biçimlendirilmiş veya yanlış konumda olabilir. Sıfırdan yeniden oluşturmak için iconutil -c icns YourIcon.iconset -o icon.icns komutunu çalıştırın.

Linux dock'ta simge görünmüyor mu? Bazı masaüstü ortamları simgenin bir .desktop dosyası aracılığıyla kaydedilmesini gerektirir. Linux'a özel ayarlar için electron-builder veya Tauri yapılandırmanızı kontrol edin.

Her Şeyi Bir Araya Getirme

Platformlar arası bir masaüstü uygulaması için düzgün yapılandırılmış simge kurulumu şöyle görünür:

build/
├── icon.icns          # macOS uygulama simgesi
├── icon.ico           # Windows uygulama simgesi
├── icon.png           # Linux için 512px
├── 256x256.png        # Ek Linux boyutları
└── 128x128.png

Artı, webview içeriği için public veya static dizininizdeki normal web faviconlarınız.

Bu ekstra çaba karşılığını verir. Profesyonel bir simge, kullanıcılara uygulamanızın tamamlanmış ve profesyonel olduğunu — sadece bir kabuğa sarılmış bir web sayfası olmadığını — gösterir. İnsanların ilk gördüğü şeylerden biridir ve ilk izlenimler önemlidir.

Kaynaklar

Electron Forge Icon Guide - Electron uygulamalarına simge oluşturma ve ekleme için resmi belgeler
electron-builder Icons - electron-builder simge kurulumu yapılandırma referansı
Tauri App Icons - Simge oluşturma ve yapılandırma için Tauri 2.0 belgeleri
Apple Icon Image Format - ICNS format özellikleri için Wikipedia referansı
Define Your App Icons - MDN - PWA'lar için uygulama simge gereksinimleri hakkında Mozilla rehberi