Favicon, tarayıcı sekmelerinde, yer imlerinde ve ana ekran kısayollarında görünen küçük simgedir. Doğru yapmak, birden fazla boyut üretmeyi ve bunları HTML'de doğru bağlamayı gerektirir; ama gereksinimleri bildiğinizde süreç basittir.

Favicon Nedir?

"Favicon", "favorites icon" yani "sık kullanılanlar simgesi" demektir. Başlangıçta Internet Explorer yer imleri için 16×16 piksellik bir simgeydi. Modern tarayıcılar ve cihazlar ise birçok boyut ister:

| Dosya | Boyut | Kullanım |
|------|------|----------|
| favicon.ico | 16×16, 32×32 | Tarayıcı sekmeleri, Windows görev çubuğu |
| favicon-16x16.png | 16×16 | Küçük sekme simgeleri |
| favicon-32x32.png | 32×32 | Standart tarayıcı sekmeleri |
| apple-touch-icon.png | 180×180 | iOS ana ekran kısayolu |
| android-chrome-192x192.png | 192×192 | Android ana ekranı |
| android-chrome-512x512.png | 512×512 | Android açılış ekranı, PWA |

ZapFile ile Tüm Favicon Boyutlarını Oluşturma

ZapFile'ın Favicon Oluşturucusunu açın
Kare bir resim yükleyin (PNG önerilir, en az 512×512 piksel)
Boyutları oluşturun
Tüm boyutları ve .ico dosyasını içeren ZIP'i indirin

Favicon'ları Web Sitenize Ekleme

HTML'inizin bölümüne şu etiketleri ekleyin:

<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">

Progresif Web Uygulamaları (PWA) için bir site.webmanifest dosyası da ekleyin:

{
  "name": "Your App",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

İyi Bir Favicon Tasarlamak

Basit Tutun

16×16 pikselde karmaşık logolar tanınmaz hale gelir. Marka adınızın ilk harfini, sadeleştirilmiş bir simgeyi ya da düz bir renk bloğunu kullanın.

Yüksek Kontrast Kullanın

Favicon hem açık hem koyu tarayıcı arayüzlerinde görünür. İkisini de test edin. Marka renginizde düz bir arka plan üzerinde beyaz bir sembol her iki modda da iyi okunur.

512×512'den Başlayın

En yüksek çözünürlüklü kaynaktan üretin. ZapFile 512 pikselden temiz şekilde küçültür, ama 16 pikselden büyütmek bulanık sonuç verir.

SVG Favicon'lar (Modern Tarayıcılar)

Chromium tabanlı tarayıcılar, her boyuta kusursuz ölçeklenen SVG favicon'ları destekler. PNG/ICO yedeklerinizin yanına ekleyin:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Sık Yapılan Favicon Hataları

Düşük çözünürlüklü kaynak resim kullanmak: Her zaman 512 piksel veya daha büyükten başlayın
Yalnızca .ico vermek: Modern cihazlar PNG boyutlarına ihtiyaç duyar; tek başına ICO, iOS ve Android'i düzgün bir simgeden yoksun bırakır
Önbelleği unutmak: Favicon'u güncelledikten sonra tarayıcılar eskisini ısrarla önbellekte tutar. Geliştirme sırasında yenilemeyi zorlamak için bir sürüm parametresi ekleyin (favicon.ico?v=2)

Özet

Favicon'lar tarayıcılar, iOS, Android ve PWA için birden fazla boyut gerektirir
512×512 kare bir PNG ile başlayın ve tüm boyutları tek seferde üretin
ZapFile'ın Favicon Oluşturucusu gereken her boyutu ve ICO dosyasını saniyeler içinde üretir

Web Siteniz İçin Favicon Nasıl Oluşturulur (Tüm Boyutlar)