PWA İçin İkon Boyutları Nasıl Hazırlanır?
Web manifest dosyasına tek bir ikon girişi eklenip geçildiğinde çoğunlukla her şey çalışıyor gibi görünür. PWA kurulumu tamamlanıyor, ikon ana ekranda beliriyor. Fakat bazı cihazlarda ikon bulanık çıkıyor, bazılarında splash screen boş geliyor, bazılarında ise Chrome kurulum uyarısı veriyor. Bu tutarsızlıkların büyük kısmı aynı kaynaktan geliyor: manifest'te tanımlanan ikon boyutları yetersiz veya yanlış seçilmiş.
Android ve Chrome'un PWA ikonlarını nasıl kullandığı, bir boyut listesinin neden gerekli olduğunu anlamamızı sağlıyor. Sistem, farklı bağlamlar için farklı boyutlar arıyor. Ana ekranda görünen ikon ile splash screen'de kullanılan ikon, genel olarak farklı boyutlarda talep ediliyor. Manifest'te bu boyutlar tanımlı değilse sistem elindekini ölçeklendiriyor — ve bu ölçeklendirme her zaman temiz sonuç vermiyor.
İkon boyutu meselesini favicon ekosistemiyle karşılaştırmak konuyu netleştiriyor: favicon birden fazla boyutta tanımlanıyor çünkü farklı bağlamlarda farklı boyutlar kullanılıyor. PWA ikonları için mantık aynı, yalnızca bağlamlar farklı. Tarayıcı sekmesi değil, ana ekran, uygulama listesi ve splash screen söz konusu oluyor.
Hangi boyutların neden gerektiğini ve üretim sürecini nasıl planlamak gerektiğini sırasıyla ele almak, manifest'e eklenecek ikon setini doğru kurmayı kolaylaştırıyor.
Manifest'te boyut tanımlamanın anlamı ve sistem nasıl seçim yapıyor
Web manifest'indeki icons dizisinde her ikon girişi bir sizes alanı taşıyor. Bu alan, dosyanın hangi boyutlarda kullanılabileceğini sisteme bildiriyor. Tarayıcı veya işletim sistemi belirli bir boyuta ihtiyaç duyduğunda manifest listesine bakıyor ve en uygun boyutu seçiyor. Eğer tam eşleşme yoksa, listedeki en yakın büyük boyutu alıp küçültüyor.
Küçültme her zaman sorunsuz değil. Özellikle çok büyük bir ikonun küçük bir görüntüleme boyutuna indirilmesi gerektiğinde — örneğin 512px'lik bir dosyanın 48px'e ölçeklenmesi — sistem bir miktar bulanıklık üretebilir. Tam tersi durum daha sorunlu: listede yalnızca küçük boyutlar varken büyük bir görüntüleme alanı doldurmak gerektiğinde ikon pikselleşiyor.
Bu nedenle manifest'te geniş bir boyut aralığı tanımlamak standart pratik haline gelmiş. Çok sayıda boyut dosyası üretmek ve listelemek yerine, birkaç stratejik boyut belirleyip aralarındaki boşluğu sisteme bırakmak çoğu proje için yeterli. Hangi boyutların bu stratejik konumlara oturduğunu anlamak için Chrome ve Android'in farklı bağlamlarda neye ihtiyaç duyduğuna bakmak gerekiyor.
192px ve 512px: neden bu iki boyut temel kabul ediliyor
Chrome'un PWA kurulumu için önerdiği minimum boyut seti 192px ve 512px. Bu iki boyut farklı bağlamlara hizmet ediyor. 192px, ana ekran ikonu ve uygulama listesi gibi orta boyutlu görüntüleme alanları için kullanılıyor. 512px ise ağırlıklı olarak splash screen için — uygulama açılırken gösterilen yükleme ekranındaki büyük ikon bu boyutu kullanıyor.
Chrome DevTools'da Lighthouse çalıştırıldığında "Installable" kontrolü bu iki boyutu zorunlu olarak arıyor. Manifest'te 192px tanımlı değilse PWA kurulabilir olarak işaretlenmiyor. 512px yoksa splash screen boş geliyor veya sistem ikonu olmadan yükleme ekranı oluşturuyor. Her iki boyut birlikte tanımlandığında kurulum akışı ve splash screen davranışı temel düzeyde çalışıyor.
Retina ve yüksek yoğunluklu ekranlar göz önüne alındığında bu iki boyut tek başına her zaman yeterli olmayabiliyor. Retina ekranlar için standart 192px, 2x ekranda 96px'e eşdeğer görüntüleme kalitesi sağlıyor. Bu durum çoğu kullanıcı için kabul edilebilir olmakla birlikte, yüksek kalite hedefleniyorsa daha büyük boyutların eklenmesi değerlendirilebilir.
Genişletilmiş boyut seti: ne zaman daha fazlasına ihtiyaç var
192px ve 512px temel boyutların ötesinde, proje gereksinimlerine göre ek boyutlar listeye eklenebilir. Yaygın olarak kullanılan genişletilmiş set şöyle görünüyor: 48px, 72px, 96px, 128px, 144px, 152px, 192px, 384px, 512px. Bu liste özellikle hibrit uygulama çerçeveleriyle çalışıldığında ya da farklı Android sürümleri ve launcher'lara tam uyum hedeflendiğinde tercih ediliyor.
Fakat uzun bir liste her zaman daha iyi sonuç üretmiyor. Her boyut için ayrı bir dosya oluşturmak, üretim sürecini karmaşıklaştırıyor ve manifest'i şişiriyor. Pratikte 192px ve 512px çifti artı maskable ikon için aynı boyutlar, büyük çoğunluğun ihtiyacını karşılıyor. Belirli bir boyuttaki sorun gözlemlenmeden kapsamlı bir liste oluşturmak erken optimizasyon sayılabilir.
iOS için durum farklı işliyor. Safari ve iOS, web manifest'teki icons dizinine değil, HTML head'indeki apple-touch-icon etiketine bakıyor. Bu nedenle Apple Touch Icon ayrı olarak tanımlanıyor; manifest'teki ikon seti iOS ana ekran ikonunu etkilemiyor. İki platform için birbirinden bağımsız ikon zinciri kurulduğu göz önünde bulundurularak hem manifest hem de HTML head'i doğru şekilde hazırlamak gerekiyor.
Maskable ikon için boyut stratejisi
Maskable ikon, manifest'teki standart ikon listesine ek olarak tanımlanıyor. Boyut gereksinimleri standart ikonlarla aynı: 192px ve 512px çifti burada da yeterli. Fakat içerik yerleşimi farklı olduğu için ayrı dosyalar gerekiyor. Standart ikon için kullanılan PNG dosyası, maskable olarak da işaretlenemez — tasarımın safe zone kuralına uygun yeniden düzenlenmesi şart.
Pratik manifest yapısı genellikle şöyle görünüyor: standart kullanım için 192px ve 512px, maskable kullanım için yine 192px ve 512px, toplamda dört ikon girişi. Bazı projeler "purpose": "any maskable" yazarak her iki amacı tek dosyada birleştiriyor. Bu yaklaşım dosya sayısını düşürüyor ama safe zone dışındaki alanın her iki bağlamda da kabul edilebilir görünmesini gerektiriyor. İkon tasarımı buna uygunsa birleştirme çalışıyor; değilse ayrı dosyalar daha güvenli.
192px'lik maskable ikon, hem ana ekran görüntülemesi hem de çoğu uygulama listesi bağlamı için yeterli. 512px'lik maskable ikon ise splash screen'de adaptive icon sistemiyle kullanılmak üzere gerekiyor. Bu iki boyut maskable taraf için de minimum seti oluşturuyor; genişletmeye nadiren ihtiyaç duyuluyor.
Üretim ve doğrulama: dosyadan manifeste
Üretim süreci tasarım dosyasından başlıyor. En pratik yaklaşım, en büyük boyutu — genellikle 512px — ana kaynak olarak üretip daha küçük boyutları buradan türetmek. Boyut küçültme bu aşamada araç bağımsız yapılabiliyor: Figma, Sketch, Inkscape veya komut satırı araçları. Önemli olan, her boyutun ayrı bir dosya olarak kaydedilmesi ve dosya adlarında boyutun açıkça belirtilmesi — örneğin icon-192.png, icon-512.png, icon-maskable-192.png, icon-maskable-512.png.
Manifest'e yazılırken her girişin doğru sizes ve type değerleri taşıması gerekiyor. PNG için "type": "image/png", WebP kullananlar için "type": "image/webp". Boyut değeri dosyanın gerçek piksel boyutuyla eşleşmeli — yanlış boyut belirtmek sistemin farklı bir dosya aramasına neden olabiliyor.
Doğrulama için Chrome DevTools'un Application sekmesi kullanılıyor. Manifest bölümünde ikon listesi görünüyor; her girişin okunup okunmadığı ve boyutların tanınıp tanınmadığı burada kontrol edilebiliyor. Lighthouse'un PWA kategorisi ise kurulabilirlik koşullarını çalıştırıp 192px ve 512px gereksinimlerinin karşılanıp karşılanmadığını raporluyor. Bu iki araç birlikte kullanıldığında eksik veya yanlış yapılandırılmış boyutlar manifest'e yüklenmeden önce yakalanabiliyor.
Splash screen davranışını test etmek için Chrome'da "Add to Home Screen" seçeneğiyle PWA kurulumunu tamamlayıp uygulamayı kapatıp tekrar açmak gerekiyor. Splash screen yalnızca baştan açılışta gösteriliyor; geliştirici araçlarından simüle edilemiyor. Bu nedenle gerçek cihaz testi, splash screen'in doğru ikon boyutunu kullanıp kullanmadığını görmek için kaçınılmaz.
PWA ikon boyutları görece küçük bir teknik ayrıntı gibi dursa da sonuçları doğrudan kullanıcıya görünüyor. Bulanık ya da eksik ikon, uygulamanın kalitesiz hissettirmesine yol açıyor — bu izlenim uygulamanın gerçek işlevselliğinden bağımsız olarak oluşuyor. 192px ve 512px çiftini doğru dosyalarla manifest'e eklemek, çoğu senaryo için bu riski ortadan kaldırıyor.
Maskable ikon boyutlarını da aynı sete dahil etmek, Android adaptive icon sistemiyle uyumu tamamlıyor. Bu iki adım birlikte — standart boyutlar ve maskable versiyonları — PWA'nın ikon tarafını sağlam bir temele oturtuyor. Ekstra boyutlar, belirli bir cihazda veya bağlamda sorun gözlemlendiğinde listeye eklenebilir; önden tüm boyutları hazırlamak çoğu proje için gerekli değil.