Bir favicon dosyası oluşturmak işin ilk yarısıdır. Tarayıcı bu dosyayı bulup doğru bağlamda kullanabilmek için <head> içindeki etiketlere bakıyor; yanlış veya eksik bir etiket doğrudan görünürlük sorununa dönüşüyor — favicon gösterilmez, yanlış boyut yüklenir ya da mobil cihazlarda hiç çalışmaz.
Sorunun kökünde şu var: favicon artık tek bir bağlam için değil, birbirinden farklı beklentilere sahip beş platform için aynı anda çalışmak zorunda. Chrome'un sekme ikonu, iOS ana ekranı, Android PWA kurulumu, Windows başlat menüsü, yüksek çözünürlüklü Retina ekran — her biri farklı format veya boyut bekliyor. Tek satırla bu tabloyu karşılamak mümkün değil.
Temel yapı: bir satırla başlayan, yetmeyen kurulum
Yıllarca standart olan kullanım buydu:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">Bu satır eski Internet Explorer ve 2000'lerin başından kalan tarayıcılar için hâlâ çalışıyor. Chrome, Firefox, Safari ve Edge bu satırı okuyor; ama iOS ana ekranı 180×180 piksel bekliyor, bu etiket onu karşılamıyor. Koymazsanız iOS sayfanın tam görüntüsünü küçültüp kırpıyor — sonuç, üzerinde metin olan küçük ve okunaksız bir kare oluyor. Android ve Chrome'un "Ana ekrana ekle" akışı ise tamamen farklı bir kanal üzerinden çalışıyor: manifest dosyası.
Modern kurulum için en az altı ayrı satır gerekiyor.
Tam favicon head bloğu ve gerekli dosyalar
Aşağıdaki yapı, Chrome, Firefox, Safari ve Edge'in sekme ikonundan iOS ana ekranına, Android PWA kurulumundan Windows görev çubuğuna kadar tüm güncel platformları kapsayan eksiksiz bir kurulumu gösteriyor:
<!-- Klasik ICO — eski tarayıcılar için -->
<link rel="shortcut icon" href="/favicon.ico">
<!-- Standart PNG faviconlar — Chrome, Firefox, Edge -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<!-- Apple Touch Icon — iOS ana ekranı -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- SVG favicon — dark mode ve yüksek DPI -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PWA manifest -->
<link rel="manifest" href="/manifest.json">Bu head bloğunun çalışması için sunucuda bulunması gereken dosyalar:
favicon.ico— çok boyutlu ICO (16×16 + 32×32 içerir)favicon-16x16.pngfavicon-32x32.pngfavicon-96x96.pngapple-touch-icon.png— 180×180favicon.svg— isteğe bağlı ama önerilenmanifest.json— PWA kurulumu için zorunlu
Bu dosya kümesini tek kaynak bir görselden otomatik üretmek hem boyut tutarlılığını garanti eder hem de manuel yeniden boyutlandırmanın getirdiği gözden kaçma riskini ortadan kaldırır.
Her etiket ne işe yarar?
shortcut icon
Eski Internet Explorer kalıntısı. Günümüzde çoğu tarayıcı kök dizindeki favicon.ico dosyasını bu etiket olmadan da otomatik buluyor; bırakmak zararsız, kaldırmak da pratik bir fark yaratmıyor.
icon (PNG, boyutlu)
Chrome, Firefox ve Edge bu satırlara bakarak en uygun boyutu seçiyor. sizes değeri sadece tarayıcıya bir ipucu — dosyanın gerçek boyutunu değiştirmiyor, tarayıcı seçim yaparken referans alıyor. 16×16 sekme ikonunda, 32×32 yer imleri listesinde ve Windows görev çubuğu önizlemesinde devreye giriyor. Her iki boyutu sağlamak bu bağlamları ayrı ayrı hedeflemenizi sağlıyor; sadece 32×32 koyup 16×16'yı atlarsanız tarayıcı mevcut olanla idare ediyor ama sekme ikonunda ölçekleme kalitesi düşüyor.
apple-touch-icon
iOS'ta kullanıcı sayfayı ana ekrana eklediğinde gösterilecek ikonu belirliyor. sizes="180x180" güncel iPhone ve iPad modellerinin tamamını karşılıyor; Retina ekranlarda 60 nokta 180 piksel karşılık geliyor. Bu etiket yoksa iOS bir fallback uyguluyor: sayfanın tam görüntüsünü küçültüp kırpıyor. Marka ikonu görünmüyor, metin okunaksız kalıyor — ziyaretçi ana ekranında ne gördüğünü fark ettiğinde geri adım atmak için makul bir neden bulmuş oluyor.
Safari, apple-touch-icon etiketini bulamazsa kök dizindeki apple-touch-icon.png dosyasını otomatik arıyor (bu ayrımı çoğu kaynak atlıyor). Yani etiket olmadan da ikonun görünmesi teorik olarak mümkün — ama dosya yolu kontrolü dışında kalıyor ve hangi boyutun kullanılacağı belirsizleşiyor.
icon (SVG)
Chrome 80, Firefox 66 ve Safari 13.1 itibarıyla destekleniyor. İki avantajı var: sonsuz ölçeklenebilirlik ve dark mode desteği. SVG içine @media (prefers-color-scheme: dark) ekleyerek favicon rengi sistem temasına göre otomatik değiştirilebilir — PNG ile bu mümkün değil.
Ama SVG faviconu olmadan da kurulum eksiksiz çalışıyor; PNG fallback'leri tüm pratik senaryoları kapsıyor. SVG'yi eklemek dark mode uyumluluğu isteyen ve hedef kitlesi Chrome 80+ kullanan siteler için anlamlı; eski tarayıcılar hâlâ öncelikse PNG'lerle kalmak doğru karar.
manifest.json
Android ve Chrome'un "Ana ekrana ekle" özelliğini — PWA kurulumunu — devreye sokan bağlantı bu satır. Manifest dosyasının içinde 192×192 ve 512×512 boyutlarındaki PNG'ler tanımlanıyor; bu ikonlar Android başlatma ekranında ve uygulama çekmecesinde görünüyor. Temel yapı:
{
"name": "Site Adı",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}PWA olarak davranmayı planlamayan bir site için manifest satırı zorunlu değil — koymamanın aktif bir zararı yok. Ama bir ziyaretçi sayfayı Android'de ana ekrana eklemeye çalışırsa Chrome kurulumu ikonsuz başlatıyor ya da hiç teklif etmiyor. theme_color değeri Android Chrome'da adres çubuğunun rengini belirliyor; marka rengiyle eşleştirmek küçük ama fark yaratan bir detay.
Etiket sırası ve yol kontrolü
Tarayıcı tüm <link> etiketlerini değerlendirip en uygun olanı seçiyor; sıra bu seçim kararını etkilemiyor. Yine de ICO'yu üste, SVG'yi en alta koymak okuma sırası açısından mantıklı — gözden geçiren biri eski uyumluluğun üstte, yeni formatın altta olduğunu sezgisel anlıyor.
Sıra önemli değil. Ama yollar kritik.
Tüm href değerleri gerçekten var olan dosyalara işaret etmeli; var olmayan bir favicon URL'si sessiz hata üretiyor — favicon görünmez, DevTools console'unda 404 olarak kayıt düşüyor ama genellikle başka uyarıların arasında fark edilmiyor. href="/images/favicon.ico" yazıp dosyayı kök dizine koymak bu türden bir hata; tarayıcı dosyayı bulamaz, hata mesajı vermez, favicon sadece boş kalır.
Favicon güncellemesi ve cache sorunu
Etiketleri doğru yazdınız, dosyaları sunucuya attınız — ama tarayıcı hâlâ eski ikonu gösteriyor. Bu favicon'a özgü bir cache davranışı: tarayıcılar favicon'u uzun süre önbelleğe alıyor ve normal sayfa yenilemesiyle temizlenmiyor.
Güncellemeyi zorlamak için en temiz yöntem href'e versiyon parametresi eklemek:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">Tarayıcı bu URL'yi farklı bir dosya olarak algılıyor ve cache'i atlıyor. Dosya adını değiştirmek de işe yarıyor — favicon-32x32-v2.png gibi — ama hem dosyayı hem HTML'i güncellemek gerekiyor; her değişiklikte iki noktaya dokunmak bakım sürtünmesini artırıyor. Versiyon parametresi daha düşük maliyetli: dosya adı sabit kalıyor, href'teki rakamı değiştiriyorsunuz.
Kendi tarayıcınızda test için Chrome DevTools açıkken sayfaya sağ tıklayıp "Boşalt ve Sert Yenile" (Empty Cache and Hard Reload) seçeneği hızlı sonuç veriyor; ama bu sadece yerel cache'i temizliyor — ziyaretçilerin önbelleğini etkilemiyor. Versiyon parametresi değişikliği herkese ulaşmanın tek garantili yolu.
Yaygın hatalar
apple-touch-icon eksikliği en sık karşılaşılan sorundur. Masaüstü tarayıcılarda hiçbir şey fark edilmiyor; iOS'ta ana ekrana ekleme denendiğinde bozuk bir önizleme çıkıyor — bu genellikle canlıya çıktıktan sonra ortaya çıkıyor.
Boyut etiketiyle dosya uyumsuzluğu gözden kaçan bir hata: sizes="32x32" yazılmış ama sunucudaki dosya 16×16 piksel. Tarayıcı aldatılmaz; küçük dosyayı 32×32 alanında gösteriyor, sonuç bulanık çıkıyor. Yol hatası da aynı kategoride; href="/assets/favicon-32x32.png" yazılmış ama dosya kök dizinde — tarayıcı 404 alıyor, favicon boş kalıyor. Son olarak manifest.json bağlantısı unutulursa Chrome Android'de "Ana ekrana ekle" akışını hiç başlatmıyor ya da ikonsuz bir kurulum ekranı açıyor.
Kurulumun çalışıp çalışmadığını doğrulamak için Chrome DevTools'da Network sekmesini açın, filtre alanına "favicon" yazın ve sayfayı yenileyin. Tarayıcının hangi dosyaları istediği, her isteğin URL'i ve yanıt kodu bu görünümde sıralanıyor — 404 döndüren satır varsa o dosya sunucuda eksik ya da yanlış yolda. Apple Touch Icon ve manifest dosyaları bu filtreye düşmeyebilir; "Img" veya "Other" filtreleriyle genişletilmiş tarama yapın. manifest.json isteği Application sekmesindeki Manifest bölümünden ayrıca doğrulanabilir: Chrome bu ekranda bulduğu ikonları önizleme olarak gösteriyor, eksik veya hatalı boyut varsa hata satırı düşüyor.
Favicon kurulumu çoğunlukla bir kere yapılıp unutuluyor. Hangi boyutların neden gerekli olduğunu bir kez kavradıktan sonra head bloğunu doğru kurmak bu senaryoların tamamını baştan kapatıyor; sonradan eksik boyut ya da cache problemi için geri dönmek gerekmiyor. Kaynak görsellerinizi uygun formatlara dönüştürmek için format dönüştürme aracından önceden geçirmek kurulum sürecini de kısaltıyor.