Maskable Icon Nedir? PWA İkonlarında Neden Önemlidir?

Android'in ikon kırpma davranışı: neden aynı ikon farklı görünür

Adaptive icon sistemi öncesinde Android tüm uygulama ikonlarını aynı boyutta, dönüştürülmemiş halde gösteriyordu. Tasarımcı ne gönderdiyse o ekrana geliyordu; üreticiden üreticiye büyük farklılık yoktu. Android 8.0 Oreo bu denklemi değiştirdi; sistem artık foreground (ön plan) ve background (arka plan) katmanlarından oluşan bir ikon mimarisi beklemeye başladı. Her katman ayrı bir çizim alanına sahip, sistem bunları üst üste koyarak maske şeklinde kırpıyor.

PWA'lar bu mimarinin tam ortasına düşüyor. Web manifest'e eklenen standart bir PNG ikonu, adaptive icon sistemiyle karşılaştığında yalnızca foreground katmanı olarak değerlendiriliyor. Sistem bu görüntüyü kendi maske şekliyle kırpıyor. Hangi şeklin kullanıldığını önceden bilmek mümkün değil: Samsung'un One UI başka bir maske uygularken Pixel cihazları başka bir maske uyguluyor. Üstelik bu şekiller Android sürümüne ve launcher tercihine göre de değişiyor.

Sonuç olarak, yüzlerce farklı cihaz ve launcher kombinasyonuna karşı tek bir standart ikon yeterli olmaktan çıkıyor. Eğer logo çerçevenin köşelerine yakın bir kompozisyona sahipse — ki favicon ve uygulama ikonlarının büyük çoğunluğu bu düzene sahip — daire maskesi uygulandığında köşeler gidecek, yalnızca merkezdeki alan kalacak. Bu durumda ikon bozuk değil, eksik görünüyor; aynı logo için iki farklı cihaz, birbirinden tamamen farklı bir izlenim yaratıyor.

Maskable icon nedir ve safe zone kavramı nasıl çalışır

Maskable icon, W3C tarafından tanımlanmış bir ikon purpose değeri. Web manifest dosyasındaki bir ikonun purpose alanına "maskable" yazıldığında, tarayıcıya şunu söylüyor: bu ikon her türlü şekil maskesiyle kırpılmaya hazır, içerik güvenli alanda konumlandırılmış. Tarayıcı bu bilgiyi adaptive icon sistemine iletiyor ve sistem ikonu kırparken tasarım öğelerinin korunduğunu biliyor.

Güvenli alan (safe zone), ikon alanının merkezinde yer alan dairesel bir bölge. Standarda göre bu dairenin çapı, ikon boyutunun %80'ine karşılık geliyor. 512×512 piksellik bir ikonla çalışıldığında, safe zone yarıçapı yaklaşık 205 piksel oluyor; yani merkezi 410×410 piksellik dairenin içi. Tasarımın kritik unsurları — logo, sembol, baş harf — bu dairenin içinde kalmalı. Dışarıda kalan alan yalnızca arka plan rengi veya dekoratif dolgu olarak kullanılabiliyor.

Bu mantık, ikon tasarım yaklaşımını temelden değiştiriyor. Standart bir ikonda kenarlara kadar uzanan bir bileşim varsa, maskable versiyonda bu bileşim merkeze sıkıştırılmalı ve etrafı dolgu alanıyla sarılmalı. Görsel dosya boyutu aynı kalıyor — 512×512 piksel yine 512×512 piksel — içerik yerleşimi farklılaşıyor. Bunu logo dosyası boyut kararlarıyla birlikte ele almak, üretim sürecini planlamayı kolaylaştırıyor.

Bazı durumlarda bu dolgu alanı boşa harcanan bir yer gibi görünebilir. Oysa bu alan tam tersine bir güvence mekanizması. Cihaz kırpma yaptığında, logo veya sembol tam olarak nerede konumlandığından bağımsız biçimde görünür kalıyor. Kırpma şekli değişse bile safe zone içindeki içerik her zaman çerçeve içinde.

Normal icon ile maskable icon arasındaki pratik fark

Farkı en net gördüğünüz yer, bir PWA'nın Android'e yüklenme anı. Chrome üzerinden "Ana ekrana ekle" seçeneği kullanıldığında, tarayıcı manifest dosyasını okuyor ve ikon listesine bakıyor. Maskable ikon bulursa onu adaptive icon mekanizmasına uygun biçimde işliyor; bulamazsa standart ikonu olduğu gibi kullanıyor ve kırpma sonucu ne olursa olsun onu ekrana koyuyor.

Maskable ikon olmadığında şöyle bir senaryo açılıyor: ikon tam kare olarak gelir, sistem bunu seçtiği daire veya yumuşak köşeli kare maskesinin içine sıkıştırır. Logo kenarlara yakınsa kenar kısımlar görünmez olur ya da arka plan rengiyle çakışma yaşanır. Kullanıcı ana ekrana baktığında diğer uygulamaların temiz ikonlarının yanında kırpık ve eksik görünen bir PWA ikonu görür.

Maskable ikon olduğunda: sistem safe zone içindeki içeriği korur, dışarısını kendi maske şekliyle kırpar. Hangi cihazda bakılırsa bakılsın tasarımın özü görünür alanda kalır. Bu fark yalnızca estetik bir tercih değil; PWA'nın yüklenmeden önceki ilk izlenimini etkiliyor. Yüklü uygulamalar arasında tutarsız görünen bir ikon, kullanıcının geri dönüp bakmadığı bir simgeye dönüşüyor.

Karşılaştırma yapmak için "maskable.app" gibi araçlar mevcut ikon dosyanızı yükleyip farklı maske şekillerinde nasıl göründüğünü önizlemenize izin veriyor. Genellikle ilk deneme, tasarımın ne kadar kırpıldığını net biçimde ortaya koyuyor.

Maskable icon nasıl hazırlanır

Maskable ikon için özel bir dosya formatı gerekmiyor. PNG veya WebP kullanılıyor; boyut genellikle 512×512 piksel. SVG veya PNG kararı bu aşamada da geçerli olmakla birlikte, manifest'in maskable ikonlar için raster format beklediği unutulmamalı; dolayısıyla genellikle PNG ya da WebP çıktısı alınıyor. Asıl farklılık tasarım düzeninde.

Tasarım süreci şöyle işliyor: 512×512 piksellik bir kare alan açılıyor. Bu alanın merkezindeki %80'lik daire safe zone olarak işaretleniyor — Figma'da bir kılavuz dairesi çizmek yeterli. Logo, sembol veya işaret tümüyle bu dairenin içine sığdırılıyor. Dışarıda kalan köşe ve kenar alanlar markanın arka plan rengiyle ya da sade bir dolguyla tamamlanıyor.

Üretimde sık karşılaşılan bir hata: mevcut favicon veya standart app icon dosyasını olduğu gibi maskable olarak işaretlemek. Manifest'e "purpose": "maskable" eklemek, ikonu maskable yapmıyor; yalnızca tarayıcıya "bu maskelenebilir" diyor. Eğer orijinal ikonun içeriği kenarlara yakınsa — ki çoğu favicon tasarımında durum bu — safe zone kuralını uygulamadan yapılan bir etiket değişikliği sonucu daha da bozabilir; sistem artık maske uygulayacak ama içerik hâlâ yanlış konumda.

Export aşamasında şeffaflık meselesine dikkat etmek gerekiyor. Maskable ikonun arka planı genellikle opak tutuluyor çünkü sistem zaten kendi maskesini üstten uyguluyor. Şeffaf arka planlı bir maskable ikon, cihaza bağlı olarak beklenmedik arka plan renkleriyle görünebilir.

Web manifest'e nasıl eklenir

Web manifest dosyasında icons dizisi içinde her ikon ayrı bir nesne olarak tanımlanıyor. Maskable ikon için purpose alanına "maskable" değeri yazılıyor. Önerilen yapı, standart ikon ve maskable ikonu ayrı girdiler olarak listelemek:

{
  "icons": [
    {
      "src": "/img/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/img/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

"any" purpose değeri standart kullanım için, "maskable" ise adaptive maske uygulanabilecek senaryolar için. İkisi aynı ikon girişinde birleştirilebilir: "purpose": "any maskable" şeklinde yazıldığında tek bir dosya her iki amaca hizmet ediyor. Fakat bu yaklaşım, safe zone dışındaki alanın her iki bağlamda da sorunsuz görünmesini gerektiriyor. Eğer ikon merkeze yeterince sıkıştırılmışsa ve dolgu alanı geniş tutulmuşsa, birleştirme çalışabilir. Aksi halde, dışarıda kalan içerik standart görünümde gereksiz yere küçük durabilir.

Bu nedenle pratikte iki ayrı dosya tutmak çoğu durumda daha güvenli: biri genel amaçlı standart ikon, diğeri safe zone kuralına uygun hazırlanmış maskable versiyonu. İki dosya arasındaki boyut farkı genellikle çok küçük — her ikisi de 512×512 piksel PNG olduğunda onlarca kilobayt mertebesinde. Farklı cihaz ve maske senaryolarında tutarlı görünümün maliyeti bu kadar.

Chrome DevTools'un Application panelinde Manifest sekmesi, ikonların manifest tarafından doğru okunup okunmadığını ve purpose değerlerinin tanınıp tanınmadığını gösteriyor. Kurulum simüle edildikten sonra farklı cihazlarda veya emülatörde nasıl göründüğünü kontrol etmek, production öncesinde yapılabilecek en pratik test.

Maskable icon, PWA geliştirmenin görece küçük ama etkisi büyük ayrıntılarından biri. Standart bir ikon listeleyip manifest'e eklemek teknik olarak çalışıyor — PWA kurulumu tamamlanıyor, ikon ekranda görünüyor. Fakat adaptive icon sistemiyle karşılaşıldığında ne çıkacağı belirsiz kalıyor. Birkaç test cihazında düzgün görünen bir tasarım, üreticiye özel maske şekillerinde tamamen farklı bir hal alabilir.

Safe zone kuralı bir kez doğru uygulandığında, manifest güncellemesi dakikalar alıyor. Asıl çaba tasarım tarafında: mevcut ikonu merkeze taşımak, kenar dolgularını ayarlamak ve farklı maske şekillerinde önizleme yapmak. Bu adım erken atıldığında, PWA'nın kurulum görünümü hangi Android sürümünde veya üreticisinde açılırsa açılsın tutarlı bir ilk izlenim bırakıyor. Karanlık mod gibi bağlama özgü görünüm sorunlarında da benzer bir mantık geçerli: ikonun farklı ortamlarda nasıl davrandığını önceden düşünmek, sonradan çözülmesi güç görünüm sorunlarını baştan bertaraf ediyor.

Web manifest'in ikon alanı, çoğu PWA projesinde bir kez doldurulup unutuluyor. Oysa orada tanımladığınız purpose değeri, kullanıcının ana ekranında gördüğü ilk şeyi doğrudan şekillendiriyor. Maskable ikonu doğru oluşturup doğru şekilde eklemek, bu şekillenme üzerinde kontrol sahibi olmanın en güvenilir yolu.