Apple Touch Icon Nedir? Nasıl Hazırlanır?

iOS'ta "Ana Ekrana Ekle" ve apple-touch-icon'un rolü

iOS, bir web sayfası ana ekrana eklendiğinde kullanılacak ikonu belirlemek için belirli bir öncelik sırasına göre HTML'i tarar. Tarayıcı önce <link rel="apple-touch-icon"> etiketini arar. Bu etiket varsa belirtilen dosyayı indirir, iOS'un kendi işleme zincirinden geçirir ve ana ekranda gösterir. Etiket yoksa web manifest dosyasındaki ikonlar kontrol edilir; manifest de yoksa ya da uygun boyut bulunamazsa sayfanın ekran görüntüsü fallback olarak kullanılır.

HTML'deki bildirim şu şekildedir:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Dosya adı teknik olarak serbest seçilebilir; ama apple-touch-icon.png hem yaygın convention hem de bazı tarayıcıların dosya adı belirtilmemiş olsa bile otomatik olarak kök dizinde aradığı addır. Bu yüzden dosyayı bu adla kök dizine koymak ve HTML'de açıkça bildirmek en sağlam yaklaşımdır.

iOS bu ikona kendi görsel işlemlerini uygular: köşeleri belirli bir yarıçapla yuvarlar ve parlak ekranlarda hafif bir parlaklık efekti ekleyebilir. Yani gönderilen dosyanın kare olması gerekir — köşe yuvarlama iOS tarafından otomatik yapılır. Dosyada önceden yuvarlanmış köşe veya gölge efekti varsa iOS'un uyguladığı efektlerle çakışır ve istenmeyen görünümler ortaya çıkabilir. Temiz, tam kare bir ikon göndermek bu çakışmanın önüne geçer.

Farklı boyutlar için birden fazla etiket tanımlanabilir; iOS en uygun boyutu seçer:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png">

Pratikte çoğu proje için tek bir 180x180 piksel dosya yeterlidir. iOS bu dosyayı gerektiğinde ölçekler; ayrı boyutlar yalnızca piksel hassasiyetini en üst düzeye çıkarmak istendiğinde anlam taşır.

Boyut gereksinimleri: 180px neden standart oldu?

Apple Touch Icon için önerilen boyut 180x180 pikseldir. Bu değer iPhone'un Retina ekranlarında ana ekran ikonları için gereken fiziksel piksel sayısından gelir: görüntüleme boyutu 60x60 punto, cihaz piksel oranı 3x, çarpım 180x180 piksel. iPad'in bazı modellerinde 167x167 piksel kullanılır; eski cihazlar ise 120x120 veya daha düşük boyutlara düşer.

Bu farklılıklar karmaşık görünse de pratik sonuç basittir: 180x180 piksel tek bir dosya, tüm modern iOS cihazlarını yeterince karşılar. iOS dosyayı gerektiğinde küçültür; 180px'lik bir ikon 120px gerektiren eski bir cihazda da sorunsuz görünür. 167px için ayrı bir dosya yalnızca iPad'in en yüksek çözünürlüklü modellerinde gözle fark edilebilecek bir iyileşme sağlar ve çoğu proje için bu fark ayırt edilebilir değildir.

Format PNG'dir ve değiştirilemez. Apple Touch Icon JPEG, WebP veya SVG kabul etmez; yalnızca PNG. Bu kısıtlama iOS'un dahili işleme zincirinden kaynaklanır ve Apple'ın belgelediği bir zorunluluktur. Logo dosyaları için boyut kararları genellikle formatı da içerir; apple-touch-icon özelinde format seçeneği yoktur.

Dosya boyutu açısından 180x180 piksel bir PNG, içeriğe bağlı olarak genellikle 5-30 KB arasında kalır. Düz renk alanlarından oluşan sade bir logo ikonu 5-10 KB'da tutulabilir; gradyanlı veya çok renkli bir tasarım daha büyük olabilir. Bu dosya sayfa yüklenirken arka planda indirileceğinden boyutu kritik değildir; ama gereksiz yere şişirilmiş bir dosyanın optimize edilmesi iyi bir alışkanlıktır.

Tasarım kararları: güvenli alan ve köşe yuvarlama

iOS, apple-touch-icon'a uyguladığı köşe yuvarlama için sabit bir yarıçap kullanır; bu yarıçap cihaza ve iOS sürümüne göre hafif değişkenlik gösterir ama genel olarak ikonun genişliğinin yaklaşık yüzde 22-23'üne karşılık gelir. 180x180 piksellik bir ikonda bu değer yaklaşık 40 pikseldir. Yani dosyanın her köşesinden yaklaşık 40 piksel içeriyi barındıran bölge sistem tarafından kırpılır.

Bu kırpma, tasarımın köşe bölgelerine kritik öğe yerleştirilmemesi gerektiği anlamına gelir. Bir logonun kenar detayları, ince köşe süslemeleri veya köşeye dayalı hizalama — bunların hepsi yuvarlatmanın ardından kısmen ya da tamamen kaybolur. Tasarım merkeze odaklı ve köşelerden uzak tutulmuş olmalıdır; bu alan çoğunlukla "güvenli alan" olarak adlandırılır ve pratikte 180x180 piksel için merkezdeki yaklaşık 130x130 piksellik alanı kapsar.

Arka plan rengi de önemli bir tasarım kararıdır. Şeffaf PNG gönderildiğinde iOS şeffaf alanı siyah olarak doldurur — bu davranış, şeffaf logolar için istenmeyen sonuçlar üretir. Çözüm arka planı dosyaya dahil etmektir: ikon, solid renkli bir arka plan üzerine yerleştirilmiş şekilde export edilir. Bu yaklaşım hem şeffaflık sorununu çözer hem de karanlık mod bağlamında ikonun her temada tutarlı görünmesini sağlar — renkli arka plan, sistemin kendi temasından bağımsız olarak ikonun okunabilir kalmasını güvence altına alır.

Parlaklık efekti konusunda ise iOS sürümüne bağlı bir değişim söz konusudur. iOS 7 ve öncesinde sistem otomatik olarak parlak bir cam efekti uygulardı; bu efekt modern iOS sürümlerinde artık varsayılan olarak açık değildir. Dolayısıyla dosyaya ayrıca parlaklık simüle eden bir katman eklemek gereksizdir ve sisteminki ile çakışma riski taşır. Düz, mat görünümlü bir ikon tasarımı güncel iOS ile en tutarlı sonucu verir.

Web manifest ile ilişkisi ve favicon ekosistemindeki yeri

Web App Manifest, bir sitenin Progressive Web App olarak kurulabilmesini sağlayan JSON dosyasıdır. site.webmanifest veya manifest.json adıyla sunulan bu dosya, ikonları da tanımlar:

{
  "name": "Örnek Site",
  "icons": [
    { "src": "/img/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/img/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Android ve bazı masaüstü tarayıcıları manifest ikonlarını doğrudan kullanır. iOS ise önceliği apple-touch-icon etiketine verir — manifest'teki ikonları iOS ana ekrana ekleme için birincil kaynak olarak değerlendirmez. Bu ayrım önemlidir: yalnızca manifest dosyası tanımlanıp apple-touch-icon etiketi eklenmezse iOS fallback davranışına geçer. Her iki tanımı da eklemek, farklı platformların doğru şekilde karşılanmasını sağlar.

Favicon ekosisteminin bütününe bakıldığında bu dosyaların her birinin farklı bir bağlamı karşıladığı görülür. favicon.ico eski tarayıcılar için temel semboldür. favicon.svg modern tarayıcılarda hem skalalanabilirlik hem de tema adaptasyonu için SVG'nin prefers-color-scheme desteğini devreye sokar. Manifest ikonları Android PWA kurulumlarını ve bazı masaüstü tarayıcıları kapsar. Apple-touch-icon ise yalnızca iOS ve iPadOS bağlamına aittir.

Eksiksiz bir favicon seti şu dört unsuru içerir: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) ve manifest dosyasında 192x192 ile 512x512 ikonlar. Bu seti hazırlamak, farklı platformlarda birbirinden bağımsız olarak çalışan görsel kimlik altyapısını tamamlar. Her dosyanın kendi bağlamı olduğundan birinin varlığı diğerinin işlevini üstlenemez.

Fallback davranışı ve HTML'e nasıl eklenir?

Apple-touch-icon etiketi eksikse iOS farklı alternatiflere sırayla başvurur. Önce web manifest dosyasındaki ikonlara bakar; orada da uygun bir ikon bulamazsa sayfanın o anki görsel durumunu yakalar, küçültür ve köşelerini yuvarlar. Bu fallback davranışı çoğu zaman kabul edilemez bir sonuç üretir: sayfa içeriğine göre değişen, öngörülemeyen ve marka kimliğiyle ilişkisi olmayan bir görsel.

Bazı tarayıcılar apple-touch-icon etiketi bulunmasa bile kök dizindeki /apple-touch-icon.png dosyasını otomatik olarak arar. Bu davranış tüm tarayıcılarda garanti edilmez; dolayısıyla hem dosyayı kök dizine koymak hem de etiketi HTML'e eklemek en güvenilir yaklaşımdır. HTML <head> bölümüne eklenmesi gereken satır şudur:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

sizes niteliği tek boyut kullanıldığında zorunlu değildir; tarayıcı dosyayı indirir ve boyutunu kendisi değerlendirir. Birden fazla boyut sunulmak istenirse her biri için ayrı etiket eklenir ve sizes niteliği belirtilir. iOS en yüksek çözünürlüklü ekranına uygun olanı seçer.

Export sürecinde dikkat edilmesi gereken birkaç nokta vardır. Dosya RGB renk uzayında kaydedilmelidir; CMYK renk uzayındaki PNG dosyaları iOS'ta beklenmedik renk kaymaları yaşayabilir. Gömülü ICC profili bazen sorun çıkarabilir; bu profil kaldırılarak kaydedilen dosyalar daha öngörülebilir davranır. Dosyanın gerçekten 180x180 piksel olduğunu export sonrasında doğrulamak, tasarım aracının farklı bir boyut kullanmadığını teyit eder. Son olarak Safari'nin geliştirici araçlarında veya fiziksel bir iPhone'da sayfayı açarak ana ekrana ekleme işlemini test etmek, görünen ikonun beklentiye uyup uymadığını doğrulamanın en hızlı yoludur.

Apple Touch Icon, küçük ama göz ardı edildiğinde fark yaratan bir detaydır. Doğru hazırlandığında sitenizin iOS ana ekranındaki varlığı uygulamalar arasında tutarlı ve tanınabilir görünür; hazırlanmadığında sistem kendi inisiyatifiyle bir şeyler üretir ve bu çoğunlukla istenen sonuç değildir. 180x180 piksel kare bir PNG, solid renkli arka plan, merkeze odaklı tasarım ve tek satır HTML — bu dört bileşen eksiksiz bir apple-touch-icon için yeterlidir.

Favicon ekosisteminin bütünü düşünüldüğünde bu ikon, farklı platformları farklı dosyalarla karşılama mantığının bir parçasıdır. Her bağlamın kendi teknik gereksinimleri vardır ve birini doğru yapmak diğerinin yerini tutmaz. Apple-touch-icon iOS'a özgü bu gereksinimin karşılığıdır; favicon.ico ve favicon.svg ile birlikte oluşturulan eksiksiz bir set, sitenizin farklı platformlarda tutarlı biçimde temsil edilmesini sağlar.