Apple Touch simgesi, ziyaretçi sitenizi iPhone ana ekranına eklediğinde kullanılacak görseli açıkça belirler. Tarayıcı sekmesi favicon'undan ve web uygulaması manifestinde tanımlanan simgelerden ayrıdır.
Tek boyut: 180×180
180×180 piksel, yüksek çözünürlüklü kaynak olarak yaygın biçimde kullanılır. iOS bu görseli daha küçük alanlar için küçültebilir; böylece çoğu proje tek tanımla yetinebilir.
Eski öneriler, her biri kendi sizes özelliğine sahip, 57×57'den 152×152'ye kadar sekiz dosya sıralıyordu. Bu varyantların artık bir amacı yoktur: aynı sonuç için HTML'nizi şişirir ve ek isteklere neden olurlar.
Dosya PNG olmalıdır. iOS bu simge için SVG veya WebP okumaz; JPEG ise düz renkli çizimlerin keskin kenarlarını bozar.
Opak arka plan tercih edin
Saydam arka plan, sürüme ve görüntüleme bağlamına göre beklenmedik sonuç verebilir. Ana ekrandaki görünümü kontrol etmek için çizimi seçtiğiniz opak bir arka plan üzerinde sunun.
Çözüm, dışa aktarmadan önce simgeyi opak arka planla birleştirmektir. Bir marka rengi veya sembolünüz renkliyse düz beyaz seçin; çizimin rahat görünmesi için çevresinde yaklaşık %10 boşluk bırakın.
Ancak köşeleri kendiniz yuvarlatmayın: iOS üstüne kendi yuvarlatılmış maskesini uygular. Köşeleri zaten yuvarlatılmış dosya, kötü görünen köşelerle çift yarıçap oluşturur.
Yapıştırılacak etiket
Sayfalarınızın head bölümünde tek satır yeterlidir: link rel="apple-touch-icon" href="/apple-touch-icon.png". Tek dosya sunuyorsanız sizes özelliği isteğe bağlıdır.
Simgenin altında gösterilen etiketi kontrol etmek için isteğe bağlı olarak meta name="apple-mobile-web-app-title" content="Your brand" ekleyin. Bu etiket olmazsa iOS, genellikle çok uzun olduğu için kesilen sayfa başlığını kullanır.
Dosyanın bir kopyasını da apple-touch-icon.png adıyla köke koyun: favicon.ico gibi iOS da etiket bulamadığında onu bu adreste arar.
Simgeniz neden güncellenmiyor?
iOS simgeyi güçlü biçimde önbelleğe alır ve ana ekranda zaten bulunan bir kısayol kendiliğinden değişmez. Yeni sürümü denemek için kısayolu silin, Safari verilerini temizleyin ve siteyi yeniden ekleyin.
Simge hâlâ görünmüyorsa üç şeyi kontrol edin: dosya 404 yerine 200 yanıtı veriyor mu, image/png içerik türüyle sunuluyor mu ve robots.txt kuralı veya kimlik doğrulama ile engelleniyor mu?
LFFavicon denetleyici, herkese açık herhangi bir URL'de tam olarak bu durumları sınar ve gerçekten aldığı simgeyi gösterir.
Birincil kaynaklar
Sık sorulan sorular
Birden fazla apple-touch-icon boyutu gerekli mi?
Çoğu proje için tek yüksek çözünürlüklü 180×180 dosya, iOS'un daha küçük görüntüler üretmesini sağlar. Destek planınızdaki cihazları test edin.
Android apple-touch-icon kullanır mı?
Android'deki Chrome buna geri dönebilir, ancak önce web manifesti simgelerini okur. 192×192 ve 512×512 simgelerinizi her zaman manifestte tanımlayın; resmî yöntem budur.
Apple Touch simgesi olarak SVG kullanılabilir mi?
Hayır, iOS bu etiket için raster PNG bekler. SVG'yi netlik ve koyu mod desteği sağladığı masaüstü tarayıcı favicon'u için kullanın.