Favicon nedir ve logonuzdan nasıl oluşturulur (2026)

Favicon, sitenizi bir tarayıcı sekmesinde, yer iminde veya telefon ana ekranında temsil eden küçük simgedir. Logonuzun sembolünden oluşturun, 16-32 piksel boyutunda okunacak şekilde sadeleştirin ve minimal 2026 dosya setini yayımlayın: bir SVG, bir ICO yedeği ve 180×180 boyutunda bir apple-touch-icon.

Yazan LogoSagaYayımlandı
Bu sayfada
  1. Favicon nedir?
  2. Favicon neden önemlidir?
  3. İhtiyacınız olan favicon boyutları ve formatları
  4. Logonuzdan favicon nasıl oluşturulur
  5. HTML'inizde favicon bağlama
  6. Bonus: koyu moda uyum sağlayan bir favicon
  7. Faviconunuzu test etme
Tarayıcı sekmesi boyutundaki bir sürüm dahil olmak üzere favicon boyutlarında gösterilen aynı sembol.
Favicon, çok küçük boyutlarda net kalması için sadeleştirilmiş logonuzun sembolüdür.

Favicon nedir?

Favicon ("favori simge"nin kısaltması), bir web sitesini bir tarayıcı sekmesinde, yer iminde, geçmiş kaydında ve telefon ana ekranında temsil eden küçük kare görseldir. Neredeyse her zaman bir markanın logosunun sadeleştirilmiş bir sürümüdür — özellikle sembolü, çünkü bu boyutta tam isim için yer yoktur.

Favicon neden önemlidir?

Favicon, küçük ama sürekli bir marka öğesidir. Bir düzine sekme açıkken, birinin sitenizi bir bakışta fark etmesinin genellikle tek yolu odur ve ana ekrana kaydedilmiş bir simge, gösterişli uygulama simgelerinin yanında yer alır. Net, markaya uygun bir favicon özenli görünür; eksik veya bulanık bir tanesi ise bitmemiş görünür.

İhtiyacınız olan favicon boyutları ve formatları

Eski öğreticilerin listelediği düzine simgeye ihtiyacınız yok. 2026'da minimal, güvenilir set küçüktür:

DosyaBoyutAmaç
favicon.svgherhangimodern tarayıcılar; koyu moda uyum sağlayabilir
favicon.ico16 + 32eski tip yedek (eski tarayıcılar)
apple-touch-icon.png180×180iOS ana ekranı
PWA simgeleri (opsiyonel)192, 512yüklenebilir web uygulamaları

Eski rehberlerin önerdiği 64×64, 96×96 ve 128×128 gibi boyutlar artık kullanılmıyor — bunları atlayın. .ico bir yedektir, ana dosya değil: SVG'yi destekleyen tarayıcılar onu tercih edecektir.

Logonuzdan favicon nasıl oluşturulur

  1. Semboldan başlayın, tam logodan değil — isim sekme boyutunda okunmaz.
  2. Küçük boyutlar için sadeleştirin. 16-32 pikselde kaybolan ince ayrıntıları, ince çizgileri ve hafif geçişleri kaldırın. Kalın şekilleri ve yüksek kontrastı tercih edin.
  3. Sekme kenarlarına sıkışmaması için biraz boşluk bırakıp kare tutun.
  4. Seti dışa aktarın — SVG, ICO ve 180×180 PNG'yi — logonuzun vektör ana dosyasından.
LogoSaga editörünün, favicon.svg'nin logo dosyalarıyla birlikte dahil edildiğini gösteren dışa aktarma adımı.
Vektör ana dosyadan dışa aktarmak, logoyla tam olarak eşleşen bir favicon verir.

SVG ideal ana dosya formatı olduğundan, dışa aktarmadan önce logolar için SVG mi PNG mi konusunu anlamakta fayda var.

HTML'inizde favicon bağlama

Sayfalarınızın <head> bölümünden dosyalara işaret edin. Modern, minimal bir set şöyle görünür:

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

SVG'yi destekleyen tarayıcılar onu kullanır; geri kalanı ICO'ya döner.

Bonus: koyu moda uyum sağlayan bir favicon

Bir SVG favicon kendi koyu mod stilini taşıyabilir. Sembolün tarayıcı temasıyla renk değiştirmesi için SVG'nin içine bir medya sorgusu gömün:

<style>
  path {
    fill: #18231d;
  }
  @media (prefers-color-scheme: dark) {
    path {
      fill: #eef1ea;
    }
  }
</style>

Chrome, Firefox ve Edge bunu destekler; Safari henüz desteklemiyor, o yüzden yedek olarak her iki temada da okunaklı kalan renkler seçin.

Faviconunuzu test etme

Gerçek bir tarayıcı sekmesinde, açık ve koyu, ve bir telefon ana ekranında kontrol edin. Tarayıcılar faviconları sıkı biçimde önbelleğe aldığından, her değişiklikten sonra tam yenileme yapın — ya da dosyayı yeniden adlandırarak veya ?v=2 ekleyerek önbelleği aşın. Sekme boyutunda bulanık görünüyorsa, sembolü daha da sadeleştirin: favicon, bir logonun ne kadar iyi küçüldüğünün dürüst testidir.

Logonuzu LogoSaga ile oluşturursanız, dışa aktarma zaten logo SVG'si ve PNG'siyle birlikte bir favicon.svg içerir, böylece favicon her zaman sembolle tam olarak eşleşir.

Eşleşen bir faviconla logo oluşturun

Sık sorulan sorular

Favicon hangi boyutta olmalı?

Ölçeklenebilir bir SVG artı PNG raster boyutları sağlayın: 32×32 modern sekme standardı, 16×16 klasik küçük boyut ve 180×180 Apple touch icon'dur. PWA'lar için ayrıca 192×192 ve 512×512 gerekir.

Favicon hangi formatta olmalı — SVG, PNG mi ICO mu?

Modern tarayıcılar için bir SVG, eski tip yedek olarak bir ICO ve apple-touch-icon ile PWA boyutları için PNG'ler kullanın. SVG ölçeklenebilir ve hatta koyu moda uyum sağlayabilir; ICO eski tarayıcıları kapsar.

Favicon koyu modda değişebilir mi?

Evet, bir SVG favicon ile. Açık ve koyu renkleri tanımlamak için SVG'nin içine bir prefers-color-scheme medya sorgusu gömün. Safari bunu henüz desteklemiyor, o yüzden her ikisinde de okunaklı kalan nötr bir renk seçin.

Favicon'um neden görünmüyor veya güncellenmiyor?

Tarayıcılar faviconları agresif biçimde önbelleğe alır. Bir değişiklikten sonra tam yenileme yapın veya dosyayı yeniden adlandırarak ya da favicon.svg?v=2 gibi bir sorgu dizesi ekleyerek önbelleği aşın ve sayfa head bölümündeki link etiketlerinin doğru olduğunu onaylayın.

Kaynaklar