Bir favicon artık tek bir görsel değil. Tarayıcılar, telefonlar ve işletim sistemleri her biri farklı bir slot için farklı bir boyut alır — tarayıcı sekmesi, bir yer imi, bir iOS ana ekranı, bir Android uygulama değiştiricisi. Tek bir 32×32 PNG gönderin, sekmede çalışır ama biri sitenizi telefonuna kaydettiğinde bulanık görünür. Tam seti gönderin, her yüzey net bir simge alır.
İşte tam olarak hangi boyutlara ihtiyacınız olduğu, her birinin ne yaptığı ve listenin neden bu şekilde göründüğü.
Önemli olan boyutlar
Çoğu site altı PNG boyutu artı eski bir .ico ile kapsanır. İşte başvuru:
| Boyut | Format | Nerede kullanılır |
|---|---|---|
| 16×16 | PNG (.ico içinde) | Tarayıcı sekmesi, adres çubuğu, yer imleri |
| 32×32 | PNG (.ico içinde) | Retina sekmeler, Windows görev çubuğu kısayolları |
| 48×48 | PNG | Windows site simgeleri, bazı Android yüzeyleri |
| 180×180 | PNG | iOS ana ekranı (apple-touch-icon) |
| 192×192 | PNG | Android ana ekranı, PWA kurulumu |
| 512×512 | PNG | PWA açılış ekranı, uygulama mağazaları, yüksek DPI |
favicon.ico dosyası, küçük boyutları (genellikle 16 ve 32, bazen 48) paketleyen bir kapsayıcıdır. Eski tarayıcılar ve Windows onu site kökünüzde ada göre arar, dolayısıyla modern tarayıcılar PNG'leri seve seve kullansa da göndermeye hâlâ değer.
Neden bu kadar çok? Hızlı bir tur
Listenin uzun olmasının nedeni, simgenin çok farklı fiziksel boyutlarda görünmesidir.
16 ve 32 günlük sekme simgeleridir. 16 klasik boyuttur; 32, 16'nın yumuşak görüneceği yüksek DPI ("Retina") ekranları kapsar. Tarayıcılar piksel yoğunluğuna uyanı seçer.
48 bir Windows işidir — site kısayolları için kullanılır ve 32'nin iyi kapsamadığı birkaç yerde daha keskin görünür.
180 Apple'ın apple-touch-icon'udur. Biri bir iPhone ya da iPad'de "Ana Ekrana Ekle"ye dokunduğunda, iOS bunu kullanır. Yanlış yapın, iOS ya küçültülmüş bir ekran görüntüsü alır ya da düz bir harf karosu gösterir — hiçbiri markanız gibi görünmez.
192 ve 512 Progressive Web App boyutlarıdır, bir manifest.webmanifest dosyasında bildirilir. 192 Android ana ekran simgesidir; 512 açılış ekranını besler ve işletim sisteminin ihtiyaç duyduğu başka her şey için küçültülür. Siteniz kurulabilirse, bu ikisi pazarlık konusu değildir.
512'den büyüğüne ihtiyacınız var mı?
Hayır. 512×512, web faviconları için pratik tavandır — webmanifest özelliği ve her büyük platform orada tepe yapar. Kaynak sanatınız 1024 ya da daha büyükse, bir başlangıç görseli olarak bu iyidir (küçültülecek daha çok ayrıntı), ama 1024'lük bir favicon göndermezsiniz. 512'nin üstündeki her şey yalnızca kimsenin kullanmadığı baytlar ekler.
Yukarı çıkarken önemli olan tek kural: büyük, kare bir kaynaktan başlayın. Bir 512×512 ya da 1024×1024 orijinal, altındaki her boyuta temizce küçülür. Minik bir görselden başlayın ve küçük boyutlar çamurlu görünür çünkü korunacak yeterince ayrıntı hiç olmadı.
16×16'yı atlatacak şekilde tasarlayın
En zor boyut en küçük olandır. 16×16'da ayrıntılı bir logo okunamaz bir leke olur. Siteler boyunca geçerli birkaç ipucu:
- Basitleştirin. Tam bir kelime işareti 16px'te okunmaz. Tek bir harf, bir monogram ya da işaretinizin en tanınabilir kısmını kullanın.
- Kontrastı yüksek tutun, böylece şekil hem açık hem koyu sekme arka planlarında okunabilir kalır.
- Biraz dolgu bırakın — dört kenara da değen bir simge sekmede sıkışık hisseder.
- Küçük test edin. Tarayıcınızı uzaklaştırın ya da yalnızca gerçek sekmeye bakın. Bir bakışta ne olduğunu anlayamıyorsanız, daha da basitleştirin.
Tüm seti üretme
Bunları elle oluşturmazsınız. Tek bir kare görseli Favicon Oluşturucuya bırakın ve tam seti bir kerede üretir — favicon.ico, 16/32/48/180/192/512 PNG'leri, kullanıma hazır bir webmanifest ve yapıştırılacak tam HTML <head> parçacığı. Her şey tarayıcınızda çalışır: görsel asla yüklenmez ve ilk ziyaretinizden sonra araç çevrimdışı çalışır.
Elde edeceğiniz HTML
Başvuru için, eksiksiz bir favicon kurulumu <head>'inizde kabaca şöyle görünür:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Oluşturucu bunu sizin için yazar, böylece doğrudan yapıştırabilirsiniz. Altı boyutu artı .ico'yu ve manifest'i kapsayın ve her tarayıcı, telefon ve işletim sistemi istediği net simgeyi alsın.