Favicon Boyutları, Biçimleri ve HTML Etiketleri
Favicon küçük bir dosyadır, ancak tarayıcılar, telefonlar ve yüklü web uygulamalarının her biri farklı boyutlar arar. Bu rehber bir web sitesinin hangi dosyalara ihtiyaç duyduğunu, bunların HTML'de nasıl tanımlanacağını ve 16 pikselde okunabilir kalan bir simgenin nasıl tasarlanacağını açıklar.
Favicon Nedir?
Favicon ("favourites icon", yani "sık kullanılanlar simgesi" ifadesinin kısaltması), sekmelerde, yer imlerinde ve geçmiş listesinde bir web sitesini tanıtan küçük görseldir. Site ana ekrana eklendiğinde telefonlar daha büyük bir sürümünü kullanır, yüklü web uygulamaları manifest dosyalarındaki simgeleri kullanır ve bazı arama motorları sonuçların yanında favicon'u gösterir. Bu yerler farklı boyutlar kullandığından bir web sitesi genellikle küçük bir dosya seti sunar.
ICO, PNG ve SVG Favicon'lar
| Biçim | İçeriği | Bilinmesi gerekenler |
|---|---|---|
ICO (favicon.ico) |
Tek dosyada birkaç boyut, çoğu zaman 16, 32 ve 48 piksel | En eski biçim. Birçok tarayıcı, sayfa bu dosyaya bağlantı vermese bile site kökünden /favicon.ico dosyasını ister; bu yüzden kullanışlı bir yedektir. |
| PNG | Dosya başına tek boyut, saydamlık desteğiyle | Tarayıcının uygun dosyayı seçebilmesi için sizes özniteliğiyle tanımlanır. Apple touch icon ve manifest simgeleri için de kullanılır. |
| SVG | Her boyuta ölçeklenebilen vektörel bir çizim | Güncel masaüstü tarayıcıların çoğu destekler, ancak her tarayıcı desteklemez; bu yüzden ICO veya PNG dosyalarını da bulundurun. Bir SVG favicon, CSS ile koyu temaya uyum sağlayabilir. |
ICO dosyası küçük bir kapsayıcıdır: bir başlık her görseli boyutu ve konumuyla listeler ve görseller PNG verisi olarak saklanabilir. LeedyBox Favicon Oluşturucu, 16, 32 ve 48 piksellik PNG görseller içeren bir favicon.ico dosyasının yanı sıra diğer boyutlar için PNG dosyaları oluşturur.
Yaygın Boyutlar ve Kullanıldıkları Yerler
| Boyut (piksel) | Tipik dosya | Tipik kullanım |
|---|---|---|
| 16 × 16 | favicon-16x16.png, favicon.ico içinde | Standart ekranlarda sekmeler ve yer imleri |
| 32 × 32 | favicon-32x32.png, favicon.ico içinde | Yüksek yoğunluklu ekranlarda sekmeler, bazı kısayollar |
| 48 × 48 | favicon.ico içinde | Bazı sistemlerde daha büyük kısayol ve masaüstü simgeleri |
| 180 × 180 | apple-touch-icon.png | iPhone ve iPad'de ana ekran simgesi |
| 192 × 192 | android-chrome-192x192.png | Android'de ana ekran simgesi, manifest dosyasında listelenir |
| 512 × 512 | android-chrome-512x512.png | Web uygulamalarının yükleme pencereleri ve açılış ekranları |
En az 512 × 512 piksellik kare bir kaynakla ya da bir SVG dosyasıyla başlayın. Küçük bir kaynağın büyük simgeler için büyütülmesi gerekir ve sonuç bulanık görünür. Kare olmayan bir logonun çevresine boşluk eklenmesi ya da logonun kırpılması gerekir.
Apple touch icon saydam olmamalıdır: bazı Apple cihazları saydam alanları siyah gösterir. Bunun yerine arka planı bir renkle doldurun. iPhone ve iPad köşeleri kendileri yuvarlar; bu nedenle dosya düz bir kare olabilir. Alfa kanalları hakkında arka plan bilgisi için PNG ve JPG'de saydamlığın nasıl çalıştığına bakın.
HTML Etiketleri ve Web Uygulaması Manifesti
Dosyaları web sitesinin kök klasörüne koyun ve her sayfanın <head> bölümüne şu etiketleri ekleyin:
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 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">
<meta name="theme-color" content="#ffffff">Bir SVG favicon'unuz da varsa <link rel="icon" href="/favicon.svg" type="image/svg+xml"> etiketini ekleyin. Manifest (site.webmanifest); sitenin adını, kısa adını, 192 ve 512 piksellik simgeleri, bir tema rengini, bir arka plan rengini ve standalone gibi bir görüntüleme modunu içeren küçük bir JSON dosyasıdır. Dosyalar başka bir klasördeyse etiketlerdeki ve manifest dosyasındaki tüm yolları değiştirin.
Çok Küçük Boyutlar İçin Tasarım
- Basit tutun. 16 pikselde ince çizgiler, küçük metinler ve ince ayrıntılar bulanıklaşır. Sadeleştirilmiş bir işaret, tek bir şekil veya bir iki harf, sloganıyla birlikte tam bir logodan daha iyi sonuç verir.
- Güçlü kontrast kullanın. Simge ile arka planı arasında belirgin bir parlaklık farkı olması, marka renklerinin birebir tutmasından daha önemlidir.
- Az iç boşluk bırakın. Boş alan görünen simgeyi küçültür. Küçük bir kenar boşluğu büyük simgelere yardımcı olabilir, ancak küçük favicon'lar karenin büyük kısmını doldurduğunda daha kolay tanınır.
- Gerçek boyutta kontrol edin. Simgeye yalnızca büyütülmüş bir önizlemede değil, bir sekmede %100 yakınlaştırmada da bakın.
Koyu Tarayıcı Temaları
Birçok kişi koyu bir sekme çubuğu kullanır. Saydam arka plan üzerindeki koyu bir logo orada neredeyse kaybolabilir; beyaz bir logo ise açık temada görünmez olabilir. Yaygın çözümler; logonun arkasına düz veya köşeleri yuvarlatılmış bir arka plan şekli, açık renkli bir dış çizgi ya da renklerini prefers-color-scheme medya sorgusuyla değiştiren bir SVG favicon'dur (SVG favicon'ların desteklendiği yerlerde). LeedyBox oluşturucu, ikisini karşılaştırabilmeniz için açık ve koyu bir sekme çubuğu gösterir.
Favicon'u Güncelleme ve Tarayıcı Önbelleği
Tarayıcılar favicon'ları önbellekte, bazen uzun süre tutar; bu yüzden yeni bir simge, yükledikten hemen sonra görünmeyebilir. Zorunlu yenileme (hard refresh) veya gizli pencere yeni sürümü gösterebilir. Geri dönen ziyaretçilerin yeni sürümü daha erken almasını sağlamak için dosya adını değiştirin ya da etiketlerinizdeki URL'ye bir sürüm ekleyin; örneğin /favicon-32x32.png?v=2. Yer imlerindeki ve arama sonuçlarındaki simgelerin güncellenmesi daha uzun sürebilir. Her değişiklikten sonra sonucu sizin için önemli olan tarayıcılarda ve cihazlarda test edin.
Sık Sorulan Sorular
favicon.ico hâlâ gerekli mi?
Zorunlu değildir, ancak basit bir yedektir: birçok tarayıcı ve başka araç, bir sitenin kök klasöründe /favicon.ico dosyasını arar. Yalnızca birkaç kilobayt yer kaplar.
Favicon olarak JPG kullanabilir miyim?
Tarayıcılar genellikle gösterebilir, ancak JPG'de saydamlık yoktur ve sıkıştırması küçük ayrıntıları bulanıklaştırabilir. Simgeler için PNG, ICO veya SVG dosyaları daha iyi seçeneklerdir.
Yeni favicon'um neden görünmüyor?
Çoğu zaman eski simge hâlâ önbellektedir ya da HTML etiketlerindeki yollar dosyaların yüklendiği yerle eşleşmez. Açılıp açılmadığını görmek için her dosyanın URL'sini doğrudan tarayıcıda açın.