“Favicon boyutu” araması hâlâ 2014'ten kalma on beş dosyalık kontrol listeleri getiriyor. Oysa bugün altı boyut tarayıcı sekmelerini, arama sonuçlarını, iOS, Android ve PWA'ları kapsıyor. İşte bu boyutlar ve neden gerekli oldukları.
Gerçekten ihtiyacınız olan boyutlar
Her satır, önerilen paketteki belgelenmiş bir kullanım alanına karşılık gelir. Tablo, eski varyantlardan oluşan bir koleksiyon yerine birlikte çalışabilen küçük bir paketi tercih eder.
| Dosya | Boyutlar | Kullanım amacı |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Sekmeler, yer imleri, eski tarayıcılar, tarama botları |
| favicon.svg | vektörel, kare | Modern tarayıcılar, her boyutta netlik, koyu mod desteği |
| favicon-96x96.png | 96×96 | Mobil Google arama sonuçları |
| apple-touch-icon.png | 180×180 | iOS ve iPadOS ana ekranı, saydamlık olmadan |
| web-app-manifest-192x192.png | 192×192 | Web manifestinde tanımlanan Android ana ekran simgesi |
| web-app-manifest-512x512.png | 512×512 | PWA açılış ekranı, “maskable” sürüm |
16, 32 ve 48 neden aynı .ico dosyasında bulunur?
ICO bir kapsayıcı biçimidir: tek dosyada birden fazla görsel saklayabilir ve tarayıcı, görüntüleme alanına uyanı seçer. İstenen boyut bağlama göre değiştiği için tam da buna ihtiyaç vardır.
16×16, standart ekrandaki sekme içindir. 32×32, yüksek piksel yoğunluklu ekranlar ve diğer tarayıcı arayüzleri için bir sürüm sağlar. 48×48 kapsayıcıyı tamamlar ve Google'ın arama sonucu favicon'ları için belgelediği 48'in katı kuralına da uyar.
Yalnızca 16×16 içeren bir .ico sunmak en yaygın hatadır: Retina ekranda simgeniz büyütülür ve sürekli bulanık görünür.
iOS için 180×180, Android için 192 ve 512
iOS, ana ekran simgesi için web manifestini okumaz; apple-touch-icon etiketini arar. Tek bir boyut yeterlidir: güncel tüm iPhone ve iPad'leri kapsayan 180×180. Sistem, eski cihazlar için görseli kendisi küçültür.
Android ise web manifestini kullanır. İki kayıt yeterlidir: ana ekran simgesi için 192×192 ve site uygulama olarak kurulduğunda açılış ekranı için 512×512. 512 sürümü purpose “maskable” ile tanımlanmalıdır; yani daire veya yuvarlatılmış kare biçiminde kırpıldığında bozulmayacak şekilde çizilmelidir.
Maskelenebilir simgede önemli öğeleri ortadaki %80'lik alan içinde tutun. Bunun dışında kalan her şey telefon üreticisine göre kırpılabilir.
Hangi kaynak görselle başlamalı?
En iyi başlangıç noktası SVG'dir: yukarıdaki her boyuta kayıpsız ölçeklenir. Bu yoksa en az 512×512 piksellik kare PNG kullanın; böylece Android açılış simgesi bile büyütülerek değil, küçültülerek üretilir.
Metin içeren yatay bir logo 16×16 boyutunda işe yaramaz: bu ölçekte bir sözcük, birkaç piksellik bir lekeye dönüşür. Sembolü ayırın veya kontrastlı bir arka plan üzerinde bir ya da iki harfle başlayın.
Son olarak hem açık hem koyu arka planlardaki kontrastı kontrol edin: siyah logo, koyu temalı sekmede kaybolur. SVG favicon'un koyu sürümü tam olarak bunun içindir.
Artık ihtiyaç duymadığınız boyutlar
Eski oluşturucular, mstile-150x150.png ve browserconfig.xml kullanan Windows kutucukları gibi geçmiş entegrasyonlar için hâlâ dosya üretir. Bunları yalnızca destek planınız açıkça bu arayüzleri hedefliyorsa ekleyin.
Uzun apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 ve 152x152 dizisi, iOS'un boyutlandıramadığı dönemden kalmadır. Tek bir 180×180 görsel hepsinin yerini alır.
Kullanılmayan tanımları kaldırmak, deponuzu ve HTML kodunuzu sadeleştirir. Mevcut bir entegrasyonu kaldırmadan önce kendi hedef tarayıcı ve platformlarınızı kontrol edin.
Birincil kaynaklar
Sık sorulan sorular
Hâlâ favicon.ico gerekli mi?
Evet, ancak yalnızca site kökünde. Modern tarayıcılar SVG'yi tercih eder; yine de birçok tarama botu, içerik toplayıcı ve e-posta istemcisi HTML'nizi okumadan /favicon.ico ister. Dosya birkaç kilobayttır: saklayın.
Google arama sonuçlarında hangi favicon boyutunu kullanır?
Google, kenar uzunluğu 48 pikselin katı olan bir simge ister ve genellikle 48×48 olarak gösterir. 96×96 PNG veya SVG bunu rahatlıkla karşılar. Simge taranabilir olmalı ve robots.txt ile engellenmemelidir.
Favicon'um dikdörtgen olabilir mi?
Teknik olarak evet, görsel açıdan hayır. Her gösterim alanı kare yer ayırır: dikdörtgen görsel ya bozulur ya da boş şeritlerle ortalanır. Her zaman kareyle başlayın; gerekirse sembolün çevresine boşluk ekleyin.