Kısa cevap
Artık onlarca simge dosyasına gerek yok. Eski rehberler Windows kutucukları, her iPad modeli ve çoktan unutulmuş tarayıcılar için boyutlar sayar; bugün neredeyse her şey birkaç dosyadan birini okur. Bunları sitenin kök klasörüne, ana sayfanın yanına koy ve her sayfanın head bölümüne ilgili satırları ekle.
Tarayıcı, sayfada hiç HTML olmasa bile /favicon.ico dosyasını kendiliğinden ister; bu yüzden o dosya her zaman bulunmalı. Geri kalan her şey link etiketleri ve manifest üzerinden bulunur.
| Dosya | Piksel boyutu | Kim kullanır |
|---|---|---|
| favicon.ico | 16, 32 ve 48 tek dosyada | Bütün tarayıcılar, Windows kısayolları, sadece köke bakan araçlar |
| favicon-32x32.png ve favicon-16x16.png | 32 ve 16 | Normal ve yüksek yoğunluklu ekranlarda sekme ve yer imleri |
| apple-touch-icon.png | 180 | iPhone ve iPad ana ekranı, Safari yer imleri |
| android-chrome-192x192.png | 192 | Android ana ekranı, yüklü web uygulaması |
| android-chrome-512x512.png | 512 | Yüklü web uygulamalarının açılış ekranı |
| icon.svg (isteğe bağlı) | Vektör, her boyut | SVG favicon destekleyen güncel masaüstü tarayıcılar |
Burada dene: Favicon oluşturucu
Aracın tam sayfasını açNeden bu kadar çok boyut var?
Favicon çok farklı yerlerde görünür. Tarayıcı sekmesi onu 16x16 CSS pikselinde gösterir; bu, yüksek yoğunluklu bir dizüstü ekranında 32 gerçek piksel, bazen daha fazlası demektir. Windows masaüstü kısayollarında 48 piksel kullanır. Google arama sonuçlarında sitenin simgesini gösterir ve kare bir görsel ister; 48 pikselden büyük olmasını önerir. favicon.ico içindeki 48 piksellik görsel ve büyük PNG'ler bunu karşılar.
Telefonlar farklı çalışır. Biri siteni ana ekrana eklediğinde iOS apple-touch-icon dosyasını arar, Android ise web manifestindeki simgeleri okur. Bu simgeler gerçek uygulamaların yanında durduğu için büyük ve net olmalı. Yoksa telefon sayfanın küçük bir görüntüsünü ya da bir harfi gösterir.
Tek bir büyük görseli küçültmek en küçük boyutlar için iyi sonuç vermez: 512 piksellik bir logo 16 piksele inince ince çizgiler gri bir lekeye döner. Bu yüzden oluşturucu küçük PNG boyutlarını kaynaktan ayrı ayrı çizer ve indirmeden önce sonucu 16, 32, 48 ve 180 pikselde görmeni sağlar.
Eklenecek HTML etiketleri
Paketi indirdikten sonra şu satırları sayfalarının head bölümüne yapıştır (araç bunları HTML kodu altında, Kodu kopyala düğmesiyle gösterir; ZIP içinde favicon-html.txt dosyasında da var):
- <link rel="icon" href="/favicon.ico" sizes="48x48">
- <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">
- zemin renginle <meta name="theme-color" content="#ffffff">; bazı telefonlarda tarayıcı çubuğunu bu renge boyar
Apple, Android ve SVG ayrıntıları
Apple simgesi saydamlığı olmayan bir kare olmalı. iOS köşeleri kendisi yuvarlar ve saydam alanları siyahla doldurur; saydam bir logo siyah bir kutucuğun üstünde kalabilir. Oluşturucu bu dosyaya her zaman düz bir zemin verir (zemin rengin, kapattıysan beyaz) ve kare bırakır.
site.webmanifest dosyası 192 ve 512 piksellik simgeleri site adı ve renklerle birlikte listeler. Android bunu ana ekran simgesi ve yüklü web uygulamaları için kullanır. Android simgeleri daireye ya da başka bir şekle de kırpabilir; logon kenarlara değiyorsa önemli bir şey kesilmesin diye kenar boşluğu ekle. Bazı siteler bunun için logonun etrafında ek boşluk olan ayrı bir maskable simge de ekler.
SVG favicon her boyutta net kalır, hatta dosyanın içindeki bir CSS sorgusuyla koyu temada renk değiştirebilir. Güncel masaüstü tarayıcılarda desteği iyi ama her yerde değil; bunu ek olarak düşün: favicon.ico ve PNG'leri koru, temiz bir SVG logon varsa <link rel="icon" type="image/svg+xml" href="/icon.svg"> gibi bir satırı kendin ekle. Oluşturucu SVG'yi kaynak olarak da kabul eder ve her boyutta net çizer.
16 pikselde iyi görünen simge tasarımı
16x16 boyutta toplam 256 piksel vardır; firma adı yazan tam bir logo okunmaz hale gelir. Başarılı favicon'lar tek bir güçlü şekil ya da bir iki harf kullanır.
- Logonun firma adı olmadan sadece sembolünü ya da baş harflerini kullan. Oluşturucunun Yazı seçeneği bir ile üç harften temiz bir simge yapar.
- Çizgileri kalın tut. Simgenin yaklaşık on ikide birinden ince olan her şey 16 pikselde kaybolur.
- Sembolle zemin arasında güçlü kontrast kullan. Sekme önizlemesine hem açık hem koyu sürümde bak; birçok kişi koyu tarayıcı teması kullanıyor.
- Alanı doldur. Fazla kenar boşluğu simgeyi diğer sekmelerin yanında minicik gösterir; genelde yüzde 0 ile 10 arası iyi durur, daire şekilde biraz daha fazlası.
- Renkli zemin ile Yuvarlak köşe ya da Daire şekli tanınır bir kutucuk verir; saydam zemin de sembol hem açık hem koyu sekmede yeterince belirginse işe yarar.
Sık karşılaşılan sorunlar ve çözümleri
- Eski simge görünmeye devam ediyor: tarayıcılar favicon'u uzun süre önbellekte tutar. Dosyayı doğrudan aç, Ctrl+F5 ile yenile ya da adrese sürüm ekle, örneğin favicon.ico?v=2.
- Google'da gri bir dünya simgesi çıkıyor: favicon'un girişsiz erişilebilir olduğundan, robots.txt'de engellenmediğinden ve kare olduğundan emin ol. Arama sonuçlarının güncellenmesi günler, hatta haftalar sürebilir.
- iPhone ana ekranındaki simgenin kenarları siyah: Apple simgesinde saydamlık vardı. Oluşturucudan gelen, düz zeminli dosyayı kullan.
- Simge bulanık: kaynak görsel küçüktü. En az 512 piksellik bir görsel ya da SVG kullan.
- Simge bazı sayfalarda yok: etiketler sadece bazı sayfaların şablonunda ya da yollar göreli. Üretilen koddaki gibi eğik çizgiyle başlayan yollar kullan.