Bugün favicon boyutları beş dosyaya iner: 32×32 bir favicon.ico, bir SVG simgesi, 180×180 bir Apple touch icon ve web uygulaması manifest dosyasında 192×192 ile 512×512 olan, biri maskable iki PNG. 57×57 Apple simgeleri, Windows döşemeleri veya ek PNG boyutları gibi geri kalan her şey eskidir ve çıkarılabilir.
Boyut tablosu
| Dosya | Boyut | Kullanan | Notlar |
|---|---|---|---|
favicon.ico | 32×32 (16 ve 48 de olabilir) | Tüm tarayıcılar, RSS okuyucular, /favicon.ico adresini isteyen her şey | HTML başka simgeler bildirse bile site kökünde bulundurun. |
favicon.svg | Herhangi, kare viewBox | Chrome, Edge ve Firefox sekmeleri | Her boyutta net olur ve koyu modda renk değiştirebilir. |
favicon-96x96.png | 96×96 | Google Arama | Apple touch icon bildirilmişse isteğe bağlı; Google ikisini de okur. |
apple-touch-icon.png | 180×180 | iPhone ve iPad ana ekranları, Google Arama | Opak arka plan. Köşeleri iOS kendisi yuvarlar. |
| Manifest simgesi | 192×192 | Android ana ekranı | Web uygulaması manifest dosyasında icons içinde listelenir. |
| Manifest simgesi | 512×512 | Yükleme istemi, açılış ekranı | Chrome'un yükleme ölçütleri bir 192 ve bir 512 simge ister. |
| Maskable simge | 512×512 | Android uyarlanabilir simgeleri | "purpose": "maskable", logo ortadaki %80'lik dairenin içinde. |
Tarayıcı sekmeleri: favicon.ico ve SVG
Sekme simgeyi 16 CSS pikseli olarak gösterir; yüksek yoğunluklu ekranda bu 32 cihaz pikselidir. Bu yüzden favicon.ico içindeki 32×32 görüntü en önemlisidir. İsterseniz aynı dosyaya 16 ve 48 de ekleyin; tarayıcılar en yakın olanı seçer.
Bir SVG simgesi tüm boyutları tek seferde karşılar. İçine bir prefers-color-scheme medya sorgusu da koyabilirsiniz; böylece koyu renkli logo koyu sekmelerde açık renge döner. Önce ICO'yu sizes="32x32" ile, ardından SVG'yi bildirin: SVG destekleyen tarayıcılar onu alır, diğerleri ICO'ya döner.
Google Arama
Google'ın favicon yönergeleri en az 8×8 piksellik kare bir simge ister ve 48×48'den büyük olanı önerir. Desteklenen biçimler BMP, GIF, ICO, PNG, JPEG, PPM ve TIFF'tir. SVG bu listede yoktur, bu yüzden yalnızca SVG kullanan bir site Google'a kullanılabilir bir şey vermez. Google hem rel="icon" hem de rel="apple-touch-icon" okur; bildirilmiş 180×180 bir Apple touch icon boyut önerisini zaten karşılar. Ayrı bir dosya isterseniz 96×96 bir PNG işe yarar.
iPhone ve iPad
Biri siteyi ana ekrana eklediğinde iOS Apple touch icon'u kullanır. 180×180, güncel iPhone'lar için doğru boyuttur (3x ölçekte 60 punto); iPad'ler onu sorunsuz küçültür, bu yüzden tek dosya yeter. Saydam alanlar ana ekranda siyaha döner, bu yüzden simgeye düz bir arka plan verin. Simge yoksa iOS sayfa ekran görüntüsüne veya düz bir karedeki bir harfe döner.
Android ve yüklenebilir web uygulamaları
Android ve Chrome simgeleri web uygulaması manifest dosyasından okur. 192×192 simge ana ekrana gider; 512×512 olan yükleme penceresinde ve açılış ekranında görünür.
Maskable simge, görseli karenin tamamını dolduran ayrı bir 512×512 görüntüdür. Android onu telefonun kullandığı şekle keser: daire, squircle veya yuvarlatılmış kare. Logoyu, çapı görüntünün %80'i olan ortadaki bir dairenin içinde tutarsanız her maskede korunur. Maskable simge yoksa Android normal simgenizi küçültür ve beyaz bir daireye yerleştirir.
HTML
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Ve site.webmanifest içindeki simgeler bölümü:
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]Manifest dosyasını application/manifest+json olarak, her simgeyi de gerçek görsel türüyle sunun. /favicon.ico isteğine 200 durumuyla bir HTML sayfası döndüren sunucu, ağ sekmesi sorunsuz görünse bile simgeyi bozar. Tek sayfalık uygulamalar bunu sık yapar.
Çıkarabileceğiniz boyutlar
- 57, 60, 72, 76, 114, 120, 144 ve 152 px Apple touch icon'lar. iOS 180 px olanı ölçekler.
mstile-*.png,browserconfig.xmlvemsapplication-*etiketleri. Windows 8 ve 10 Başlangıç döşemeleri içindi.- Safari'nin
mask-iconetiketi. Safari 12 ve sonrası sabitlenmiş sekmeler için normal faviconu kullanır. favicon.icozaten ikisini de içeriyorsa ayrı 16×16 ve 32×32 PNG bağlantıları.
Setinizi kontrol edin
Favicon Checker yukarıdaki her dosyayı sitenizden alır, gerçek boyutu ve biçimi ölçer, simgelerin sekmelerde, Google'da, iOS'ta ve Android'de nasıl göründüğünü gösterir.