PWA ve mobil uygulama: splash ekranı ve ikon setlerinde görsel ölçekleme
Web uygulaması ve PWA için splash ve maskable ikon boyutları, manifest ve güvenli alan planlaması.
Giriş
Progressive Web App (PWA) ve mobil uygulamalarda splash ekranı ile uygulama ikonları, ilk izlenimi belirler. Yanlış ölçeklenmiş PNG’ler bulanık görünür veya güvenli alan dışına taşar.
Bu serinin önceki yazıları: Open Graph önizleme hata ayıklama · E-posta hero görseli · WebP/AVIF.
Manifest ve ikon boyutları
manifest.json içinde icons dizisi birden çok boyut ister (ör. 192×192, 512×512). Maskable ikonlar için web.dev: maskable icons rehberi güvenli padding önerir. Google’ın PWA kontrol listesi üretim öncesi kontrol için kullanılır.
Splash ekranı
Splash genelde arka plan rengi + merkez logo ile oluşturulur; platforma göre otomatik veya özel görsel kullanılır. Logo çok ince detay içeriyorsa küçük boyutlarda sadeleştirin; bu seride ilerleyen günlerde favicon ve dokunma ikonlarına özel bir yazıda küçük ölçek okunurluğunu derinleştireceğiz.
Önbellek ve güncelleme
İkon güncellediğinizde kullanıcılar eski önbelleği görebilir; dosya adına sürüm soneki (icon-v2.png) veya CDN cache busting parametresi eklemek yaygın bir çözümdür. Aynı konuyu bu seride CDN ve önbellek yazısında genişletiyoruz.
Sonuç
Kaynak logonuzu vektör veya yüksek çözünürlükte tutun; yeniden boyutlandırma ile her boyutu üretin, kırpma ile maskable güvenli alanı koruyun.