Favicon Nedir?
Favicon (favorite icon), bir web sitesini tarayıcı sekmesinde, yer imlerinde, geçmiş listesinde ve mobil ana ekranda temsil eden küçük kare simgedir. Sitenin marka kimliğinin en küçük ama en sık görülen parçasıdır; onlarca sekme arasında gezinen bir kullanıcı doğru favicon'u başlık metninden çok daha hızlı fark eder.
Tek bir favicon dosyası artık yeterli değildir. Farklı platformlar ve ekran yoğunlukları farklı boyutlar bekler; eksik bırakılan bir boyut, o platformda bulanık bir simge ya da tarayıcının kendi ürettiği jenerik bir harf ikonu olarak karşınıza çıkar.
Favicon Neden Önemlidir?
Bir kullanıcı aynı anda onlarca sekme açık tutabilir; bu durumda sekme başlıkları çoğu zaman kısalıp görünmez hale gelir, geriye kalan tek ayırt edici işaret favicon'dur. Yer imleri listesinde de aynı şey geçerlidir: uzun bir favoriler listesinde site adını okumak yerine tanıdık simgeyi aramak çok daha hızlıdır. Arama motorları da favicon'u önemser; Google mobil arama sonuçlarında site adının yanında favicon gösterir, bu yüzden eksik veya bozuk bir favicon, arama sonucunda da dikkat çekmeyen bir görünüme yol açar.
Favicon Boyutları ve Kullanım Alanları
| Boyut | Dosya adı | Kullanım alanı |
|---|---|---|
| 16×16 | favicon-16x16.png | Tarayıcı sekmesi ve yer imleri — klasik favicon.ico'nun yerini alan modern PNG boyutu. |
| 32×32 | favicon-32x32.png | Yüksek çözünürlüklü ekranlarda tarayıcı sekmesi ve yer imleri. |
| 48×48 | favicon-48x48.png | Windows kısayolları ve bazı masaüstü tarayıcı bileşenleri. |
| 180×180 | apple-touch-icon.png | Apple'ın apple-touch-icon standardı — iOS'ta "Ana Ekrana Ekle" simgesi. |
| 192×192 | android-chrome-192x192.png | PWA manifest.json — Android ana ekran simgesi. |
| 512×512 | android-chrome-512x512.png | PWA manifest.json — Android splash screen ve büyük simge gösterimleri. |
Tek bir yüksek çözünürlüklü kare görselden bu altı boyutu birden üretmek, sitenin her platformda net görünmesini garantiler. Kaynak görsel için en az 512×512 çözünürlük önerilir; küçük bir görseli büyütmek kalite kaybına yol açar. PNG formatının şeffaflık (transparency) desteği de burada işe yarar: kaynak görselin arka planını şeffaf tutmak, favicon'un tarayıcının açık veya koyu temasıyla daha uyumlu görünmesini sağlar; özellikle beyaz zemin üzerine tasarlanmış logolarda bu, koyu temalı tarayıcılarda beyaz bir kare yerine temiz bir simge elde etmenizi sağlar.
HTML head Etiketleri Nasıl Eklenir?
Favicon dosyalarını sunucuya yükledikten sonra, sayfanın <head> bölümüne aşağıdaki gibi <link> satırları eklenir:
<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="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">Bu dört satır, sitenin köküne yerleştirdiğiniz favicon dosyalarına işaret eder. Dosyaları farklı bir klasöre koyduysanız href yollarını buna göre güncellemeniz gerekir.
PWA ve manifest.json Bağlantısı
192×192 ve 512×512 boyutları yalnızca tarayıcı sekmesi için değil, Progressive Web App (PWA) manifest.json dosyasında da kullanılır. Bir kullanıcı siteyi Android'de ana ekrana eklediğinde 192×192 simge kullanılır; uygulama açılırken gösterilen splash screen için ise 512×512 boyutu devreye girer. Bu iki boyut eksikse PWA olarak eklenen site, bulanık veya varsayılan bir simgeyle görünür.
Bu iki boyut, manifest.json dosyasının icons dizisinde şu şekilde tanımlanır:
{
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}Manifest dosyasının kendisi de sayfanın <head> bölümünden <link rel="manifest" href="/manifest.json"> satırıyla bağlanır; bu satır olmadan tarayıcı manifest dosyasının varlığından haberdar olmaz.
Kare Olmayan Görseller ve Sık Yapılan Hatalar
Kaynak görseliniz kare değilse, dönüştürme sırasında gerilerek (stretch) kareye sığdırılır; bu da logonun oranının bozulmasına yol açar. En iyi sonuç için orijinal görseli önceden kare orana kırpmanız önerilir. Ayrıca tarayıcılar, sayfada hiçbir <link rel="icon"> tanımlı değilse sitenin kök dizininde otomatik olarak /favicon.ico dosyasını arar; bu eski davranış hâlâ bir yedek (fallback) olarak çalışır ama modern PNG boyutlarının yerini tutmaz.
- Sadece 16×16 boyutunda tek bir
favicon.icoyüklemek — yüksek çözünürlüklü ekranlarda ve iOS/Android ana ekranında eksik veya bulanık görünüme yol açar. apple-touch-iconeklemeyi unutmak — iOS'ta ana ekrana eklenen sayfa, favicon yerine sayfanın ekran görüntüsünden otomatik oluşturulan bir simge kullanır.- Dikdörtgen veya kenarlarında boşluk bırakmayan bir görseli doğrudan kaynak olarak kullanmak — küçük boyutlarda kırpılma ve gerilme daha belirgin hale gelir.
manifest.jsoniçinde 192×192 ve 512×512 simgeleri tanımlamamak — PWA olarak yüklendiğinde ana ekran simgesi bozuk görünür.
PNG mi, ICO mu?
Klasik favicon.ico formatı, birden fazla boyutu tek dosyada barındırabilen eski bir Windows simge formatıdır ve hâlâ tarayıcılar tarafından bir yedek (fallback) olarak taranır. Ancak modern tarayıcıların tamamı ayrı boyutlarda tanımlanmış PNG dosyalarını doğrudan destekler; bu da hem dosya boyutunu küçültür hem de her platform için en uygun boyutun net şekilde seçilmesini sağlar. Bu yüzden günümüzde sitelerin .ico yerine, boyuta göre adlandırılmış ayrı PNG dosyaları ve bunlara işaret eden <link> etiketleri kullanması önerilir.
Favicon'unuzu Nasıl Test Edersiniz?
Favicon dosyalarını yükledikten sonra tarayıcının önbelleğe aldığı eski simgeyi hemen göremeyebilirsiniz; sekmeyi kapatıp yeniden açmak çoğu zaman yeterli olsa da bazı tarayıcılar favicon'u günlerce önbellekte tutabilir. En güvenilir kontrol yöntemi, siteyi gizli/InPrivate bir pencerede yeniden açmak ya da tarayıcı önbelleğini tamamen temizlemektir. Dosyanın gerçekten doğru konuma yüklendiğini doğrulamak için /favicon-32x32.png gibi bir yolu doğrudan tarayıcıda açabilirsiniz; 404 hatası alıyorsanız dosya beklenen konumda değildir ve <head> etiketindeki href yolu güncellenmelidir.
Favicon Setini Oluşturun
Her boyutu tek tek elle kırpıp dışa aktarmak yerine, aşağıdaki araca tek bir kare görsel yükleyip altı boyutu ve gerekli <head> etiketlerini birkaç saniyede hazır alabilirsiniz. Görseliniz tamamen tarayıcınızda işlenir, hiçbir yere yüklenmez.
Tek bir görsel yükleyin, 16×16'dan 512×512'ye kadar tüm favicon boyutlarını ve gerekli head etiketlerini anında indirin.