Apple Dokunmatik Simge Kılavuzu

apple-touch-icon, favicon.ico'inizden tamamen ayrı bir varlıktır. Tarayıcı sekmeleri favicon.ico'i (veya bağlantılı PNG/SVG'inizi) kullanır. iOS ana ekran yüklemelerinde apple-touch-icon kullanılır. apple-touch-icon olmadan, Safari sayfanızın görünüm alanının düşük çözünürlüklü bir ekran görüntüsünü alır ve bunu ana ekran simgesi olarak kullanır; bu, yerel uygulamaların yanında profesyonellikten uzak görünen, bulanık, markasız bir sonuçtur.

Apple, iOS 1.1.3'te apple-touch-icon'i 2007 yılında tanıttı ve o zamandan beri iPhone ve iPad ekran yoğunlukları arttıkça desteklenen boyutları da geliştirdi. Tüm cihazları kapsayan tek bir dosya için mevcut öneri 180×180 pikseldir. Bu boyut iPhone 6 Plus, iPhone X ve sonraki tüm iPhone modellerinde 60pt @3x yoğunlukta görüntülenir. Daha eski modeller (iPhone SE 1. nesil, Plus öncesi iPhone'lar) 2x'te 120×120 kullanır — iOS, 180×180 dosyasını sığacak şekilde otomatik olarak küçültür.

iPad kapsamı açısından Apple, iPad Pro (3x) için 167×167 ve standart iPad'ler için 152×152 çözünürlüğünü önerir. Uygulamada, apple-touch-icon olarak görev yapan tek bir 180x180 dosya, tüm bu durumları kabul edilebilir bir şekilde kapsar çünkü iOS, yüksek kaliteli çift doğrusal filtrelemeyle ölçeği küçültür. iPad Pro'da piksel mükemmelliğinde keskinlik bir öncelikse ek bir "<link rel='apple-touch-icon'size='167x167' href='/apple-touch-icon-167x167.png'>" etiketi ekleyin.

apple-touch-icon için PNG biçimi zorunludur. iOS, ana ekran simgeleri için .ico, JPEG, SVG ve GIF'i yok sayar. Her zaman PNG-32'yi (alfa kanallı) veya PNG-24'ü (simgenizin düz bir arka planı varsa şeffaflık olmadan) dışa aktarın. Şeffaflık desteklenir ve önerilir; şeffaf arka plan simgesi, iOS'in standart yuvarlak köşe ve parlaklık efektlerini eski iOS sürümlerine uygulamasına olanak tanır.

apple-touch-icon için güvenli marjlar önemlidir. Her ne kadar iOS artık eski parlak kaplamayı (iOS 7'de kaldırılmıştır) uygulamasa da, simgeyi yuvarlatılmış dikdörtgen şeklinde kırpıyor. Önemli hiçbir şeyin yuvarlatılmış köşelerden kesilmemesini sağlamak için çekirdek logonuzu her taraftan yaklaşık %10 oranında içeride tutun. Güvenli alan, 180×180 tuval içinde kabaca 162×162 pikseldir.

apple-touch-icon dosyasını alan adınızın köküne yerleştirmek önemlidir. Bağlantı etiketi href aracılığıyla herhangi bir URL'yi kullanabilseniz de, iOS Safari'in bazı sürümleri ve bazı Apple tarayıcıları (Spotlight arama motoru entegrasyonu için), HTML bağlantı etiketini okumadan doğrudan kökten /apple-touch-icon.png veya /apple-touch-icon-precomposed.png'yi almaya çalışacaktır. Dosyayı kök dizine yerleştirmek en iyi uyumluluğu sağlar.

Etiketin `precomposed` çeşidi — `<link rel='apple-touch-icon-precomposed'>` — eski iOS sürümlerine simgenize herhangi bir ek görsel efekt (parlaklık, yuvarlak köşeler, gölge) uygulamamasını söyler. Apple, iOS 7'de bu efektleri kaldırdı; dolayısıyla 2026'da "apple-touch-icon" ve "apple-touch-icon-önceden oluşturulmuş" arasındaki ayrım modern iOS için önemsizdir. Düz 'apple-touch-icon' rel değerini kullanın.

Birden çok bağlantı etiketi kullanılarak birden çok boyut bildirimi desteklenir. Tüm Apple cihazlarda maksimum hassasiyet için şunu beyan edebilirsiniz: iPhone 6 Plus ve sonraki sürümleri için `<link rel='apple-touch-icon'size='180x180' href='/apple-touch-icon-180x180.png'>`, `<link rel='apple-touch-icon'size='167x167' href='/apple-touch-icon-167x167.png'>` iPad Pro için ve daha eski iPad'ler için "<link rel='apple-touch-icon'size='152x152' href='/apple-touch-icon-152x152.png'>`. iOS en yakın eşleşmeyi seçer.

Apple Watch, saat uygulaması simgeleri için apple-touch-icon'i kullanmaz; bunlar yerel uygulama paketinden gelir. Ancak bir kullanıcı web sitenize Apple Watch tarayıcısından giderse, Safari Watch, yer imleri listesinde apple-touch-icon'i görüntüler. Aynı 180×180 PNG burada hiçbir değişiklik yapılmadan çalışıyor.

Mac'teki macOS Safari, Dock'a bir web uygulaması olarak bir web sitesi eklerken de apple-touch-icon'i kullanır (macOS Sonoma ve sonraki sürümleri, web sitelerinin Safari'ten web uygulamaları olarak sabitlenmesine izin verir). apple-touch-icon Dock simgesi olarak kullanılır. Bu, apple-touch-icon'i yalnızca mobil cihazlar için değil aynı zamanda modern macOS'taki Mac kullanıcıları için de önemli kılmaktadır.

apple-touch-icon'i güncellerken iOS, kullanıcının cihazındaki eski simgeyi önbelleğe alır ve kullanıcı ana ekran simgesini kaldırıp yeniden eklemediği veya Safari'in önbelleğini temizlemediği sürece güncellemeleri kontrol etmez. Bu önbellek üzerinde sunucu tarafı kontrolü yoktur; bu, istemci tarafı iOS davranışıdır. Bunu paydaşlara iletmek, yeniden markalamanın mevcut ana ekran kayıtlarına ne kadar hızlı yayılacağına ilişkin beklentilerin belirlenmesine yardımcı olur.

apple-touch-icon'inizi doğru bir şekilde test etmek için fiziksel bir iOS cihazı veya Xcode iOS Simülatörü gerekir. Cihazda Safari'i açın, sitenize gidin, Paylaş düğmesine dokunun ve 'Ana Ekrana Ekle'yi seçin. İletişim kutusundaki önizleme apple-touch-icon'inizi göstermelidir. Bunun yerine bir ekran görüntüsü gösteriyorsa, ya dosyaya bildirilen URL'den erişilemiyordur ya da HTML cihazınızda bağlantı etiketi eksiktir.

favicon generator, standart favicon paketinin bir parçası olarak 180×180 apple-touch-icon.png dosyasının çıktısını verir. Oluşturduktan sonra dosyayı sitenizin kök dizinine yerleştirin ve bağlantı etiketini HTML `<head>` dosyanıza ekleyin. apple-touch-icon ile birlikte gelen tüm simge boyutlarına ilişkin eksiksiz bir kılavuz için favicon sizes explained referansına bakın.