Çoğu geliştirici bir favicon eklerken favicon.ico dosyasını kök dizine bırakıp işi kapatır. Bu yaklaşım yıllarca yeterliydi. Ama tarayıcılar değişti, mobil ekranlar yoğunlaştı ve PWA standartları masaya oturdu. Artık tek format bütün platformları karşılamıyor.
Favicon format seçimi üç değişkeni aynı anda taşıyor: tarayıcı uyumluluğu, ekran yoğunluğu ve tema desteği. Bu üçünün yanıtı her formatı farklı yere oturtuyor. Birini seçip diğerlerinden vazgeçmek değil, hangisinin ne işe yaradığını anlamak gerekiyor.
ICO formatı neden hâlâ geçerli?
ICO bir görsel dosyası değil, içinde birden fazla boyut barındıran bir konteynerdir. Tek bir .ico dosyasına 16×16, 32×32 ve 48×48'i birlikte paketleyebilirsiniz. Tarayıcı veya işletim sistemi hangi boyutu istiyorsa onu çıkarır, gerisini yok sayar.
Internet Explorer 10 ve altı yalnızca ICO formatını tanır. Bu kitleyle artık neredeyse kimsenin muhatabı olmadığı doğru. Ama ICO'nun asıl değeri burada değil: birçok tarayıcı ve araç, <link> etiketi olmaksızın doğrudan https://siteniz.com/favicon.ico adresini dener. Bu adres erişilebilir olduğu sürece açıklama gerektirmeyen bir uyumluluk sağlanmış olur. Pek çok RSS okuyucu, yer imi yöneticisi ve üçüncü taraf araç favicon'ı bu yoldan çeker.
Dezavantajı belirgindir: ICO bir bitmap formatıdır. 32×32 çözünürlük, yüksek yoğunluklu Retina ekranlarda (2× ölçek) 16×16 gibi bulanık görünür. Renk alanı desteği kısıtlıdır ve şeffaflık PNG kadar temiz çalışmaz — özellikle yarı saydam gölge veya köşe yumuşatma gerektiren tasarımlarda.
PNG'nin favicon bağlamındaki kesin rolü
PNG sheffaflığı kusursuz destekler, bit derinliği yüksektir ve araç zinciri kolaydır. Favicon bağlamındaki asıl kullanım alanı iki yerde yoğunlaşır: Apple Touch Icon ve PWA manifest ikonları.
iOS, bir web sitesi ana ekrana eklendiğinde kullanılacak görseli apple-touch-icon etiketinden alır. 180×180 boyutunda PNG beklenir:
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/apple-touch-icon.png">Bu noktada ne .ico ne SVG çalışır. iOS, Apple Touch Icon için yalnızca PNG'yi tanır. PWA manifest dosyasında da durum benzerdir — 192×192 ve 512×512 ikonlar PNG olmalıdır; SVG desteği henüz tüm kurulum akışlarında güvenilir değildir.
PNG'nin sınırı statik olmasıdır. Sistem dark mode'a geçtiğinde PNG favicon değişmez; aynı görsel hem açık hem koyu temada görünür. Logo rengi temaya göre farklılık gösteriyorsa bu bir sorun haline gelir. Bir de boyut meselesi var: 512×512 PNG dosyası ciddi bir yer kaplar. Lossless sıkıştırma ile PNG boyutunu küçültmek mümkündür ve şeffaflık katmanı korunur, ama SVG'nin bant genişliği avantajının yanında bu hâlâ geri planda kalır.
SVG favicon ve dark mode uyumu
SVG favicon desteği tarayıcılara görece geç eklendi. Chrome 80+, Firefox 41+, Edge 80+ ve Safari 2022 itibarıyla SVG faviconu destekler. IE ve eski Edge desteklemez.
SVG'nin öne çıkan özelliği medya sorgusu içerebilmesidir:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
path { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) {
path { fill: #ffffff; }
}
</style>
<path d="..."/>
</svg>Sisteme göre renk değiştiren bir favicon. Koyu temada beyaz, açık temada siyah. Bu davranışı bir .ico veya .png ile elde etmek mümkün değildir — iki ayrı dosya ve JavaScript ile tema geçişini takip eden bir mantık kurmak gerekir, bu da gereksiz bir karmaşıklık yaratır.
Ek avantaj: SVG vektöreldir. Retina ekranlar dahil herhangi bir boyuta ölçeklenir, piksel bulanıklığı yoktur. Dosya boyutu çoğu logoda 1-2 KB'ın altında kalır. HTML'e şu şekilde eklenir:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">Tarayıcı SVG'yi desteklemiyorsa bu satırı yok sayar. Birden fazla <link> tanımı yapıldığında tarayıcı desteklediği en üst formatı seçer; geri kalanları geri dönüş olarak bekler.
Üçünü birden kullanmak: çelişki değil katmanlı strateji
Tek format seçmek zorunda değilsiniz. Standart yaklaşım katmanlıdır:
<!-- Klasik tarayıcı uyumluluğu -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Modern tarayıcılar ve dark mode -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- iOS ana ekran ikonu -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Tarayıcı SVG'yi destekliyorsa onu kullanır. Desteklemiyorsa .ico'ya döner. iOS hiçbir zaman Apple Touch Icon dışına bakmaz. PWA manifest'i 192×192 ve 512×512 PNG ikonlarını ayrı tanımlar. Her platform kendi ihtiyacını kendi satırından karşılar.
Bu yapıyı elle kurmak zaman alıcı olabilir. Favicon Generator aracına kaynak görselinizi yüklediğinizde ICO, birden fazla boyutta PNG ve SVG çıktıları tek seferde üretilir. Etiket kodunu da aynı arayüzden kopyalayabilirsiniz.
Bir ayrıntı: favicon.ico mutlaka kök dizinde olmalı. Bazı tarayıcılar ve araçlar, <link> etiketi olmaksızın bu yolu doğrudan dener. PNG ve SVG için böyle bir zorunluluk yok; bir alt klasörde durmaları sorun yaratmaz, yeter ki <link> etiketi doğru yolu göstersin. Favicon boyutları ve platform gereksinimleri hakkında daha ayrıntılı bir kılavuza favicon boyutları yazısından ulaşabilirsiniz.
Format seçimini belirleyen üç parametre
Hangi formatı ne zaman önceliklendireceğinizi belirleyen değişkenler somuttur:
Tarayıcı hedefi: Yalnızca modern tarayıcıları hedefliyorsanız SVG + PNG yeterlidir. IE veya eski Edge desteği gerekiyorsa ICO zorunludur.
Tema uyumu: Logo açık ve koyu temada farklı renk kullanıyorsa SVG tek pratik çözümdür. PNG veya ICO ile iki ayrı dosya ve JavaScript ile geçiş mantığı kurmak gerekir; bu hem bakım yükü hem de ekstra istek anlamına gelir.
PWA ve mobil: Manifest dosyasındaki ikonlar PNG olmalıdır. 192×192 ve 512×512 boyutlarını resim dönüştürme aracıyla hazırlayabilirsiniz. SVG henüz tüm PWA kurulum akışlarında güvenilir biçimde çalışmıyor.
Bir de kaynak dosya meselesi var. Site logonuz vektör tabanlıysa SVG favicon'a geçmek için bir engel yoktur. Ama bitmap bir kaynaktan SVG üretmek anlamsızdır — piksel verisi vektörel forma dönüşmez, dosya boyutu büyür, tarayıcı kaliteli render edemez.
| Format | Tarayıcı uyumu | Dark mode | iOS / PWA | Boyut |
|---|---|---|---|---|
| ICO | Evrensel (IE dahil) | Hayır | Hayır | Orta |
| PNG | Tüm modern tarayıcılar | Hayır | Evet (zorunlu) | Yüksek (büyük boyutlarda) |
| SVG | Chrome 80+, FF 41+, Safari 2022+ | Evet | Hayır | Düşük |
Üç formatın farklı boşlukları doldurduğunu görmek, "hangisi en iyisi" sorusunun yanlış kurulduğunu ortaya koyar. ICO geriye dönük uyumluluğu sağlar, PNG mobil ve PWA gereksinimlerini karşılar, SVG modern tarayıcılara ve tema geçişlerine yanıt verir. Bunlar birbirinin rakibi değil, farklı katmanlarda çalışan bileşenler. Soru hangi formatın doğru olduğu değil, hangi platformların desteklenmesi gerektiğidir — ve çoğu durumda cevap ikiden fazla formata işaret eder.