Favicon Gösterilmiyor — Sorun Giderme Kılavuzu
Bir sık kullanılan simgesi yüklediniz ancak sekmede hâlâ genel bir yerküre veya eski bir logo gösteriliyor. Bu kılavuz, en yaygın nedenleri (önbellekleme, yanlış yollar, eksik dosyalar ve çakışan <link> etiketleri) kontrol etmeniz gereken sırayla ele almaktadır.
Tarayıcılar favorileri neredeyse diğer tüm varlıklardan daha agresif bir şekilde önbelleğe alır. Donanım yenilemesi (Ctrl+Shift+R veya Cmd+Shift+R) birçok yanlış alarmı düzeltir. Bu başarısız olursa, sürüm sorgu dizesini bir kez ekleyin: /favicon.ico?v=2.
Dosyanın, tarayıcının istediği URL'de bulunduğunu doğrulayın. /favicon.ico dosyasını doğrudan yeni bir sekmede açın. 404, dosyanın olduğunu düşündüğünüz yere dağıtılmadığı anlamına gelir; bu, yalnızca index.html'e hizmet veren SPA yapılarında yaygındır.
<link rel="icon"> href yollarınızı kontrol edin. Mutlak yollar (/favicon.ico) her sayfada çalışır; /blog/post gibi iç içe geçmiş rotalarda göreceli yollar (favicon.ico) kesilir.
CDN kullanıyorsanız dağıtımdan sonra favicon yollarını temizleyin. Bazı CDN'ler, ilk istek sırasında dosya eksik olduğunda /favicon.ico için 404 yanıtı önbelleğe alır.
Birden fazla <link rel="icon"> etiketi eski tarayıcıların kafasını karıştırabilir. Önce favicon.ico'i, ardından açık tür ve boyut özelliklerine sahip PNG/SVG çeşitlerini ekleyin.
WordPress, Shopify ve statik ana bilgisayarların her biri kendi etiketlerini enjekte eder. Sayfa kaynağını görüntüleyin ve rel = "icon" ifadesini arayın; yinelenen veya geçersiz kılınan etiketler bunun sık görülen bir nedenidir.
HTTPS karma içerik uyarıları, güvenli sayfalardaki HTTP favicon URL'lerini engeller. Her simgeyi HTTPS üzerinden yayınlayın.
Yerel geliştirme için, bazı tarayıcılar siz localhost için site verilerini temizleyene kadar favicon'ları güncellemeyi reddeder.
Nasıl çalışır
- 1
Dosya URL'sini doğrulayın
/favicon.ico'i yeni bir sekmede açın; 404 değil, 200'ü bekleyin.
- 2
<head> etiketlerini inceleyin
Kaynağı görüntüle; bir standart favicon.ico bağlantısını onaylayın ve yazım hatası yok.
- 3
Önbelleği bir kez patlat
Href'e ?v=2 ekleyin, dağıtın, kalıcı olarak yenileyin ve ardından istenirse sorguyu kaldırın.
Hemen deneyin
Canlı favicon'unuzu test edin
Canlı favicon test aracıSSS
Favicon'um neden yerel olarak çalışıyor ancak üretimde çalışmıyor?+
Üretim, genellikle bir alt dizine veya CDN önekine çıktı oluşturur. Dağıtılan yolun <link> href'inizle eşleştiğini ve dosyanın derleme çıktısına dahil edildiğini doğrulayın.
Google'ın arama sonuçlarındaki site simgemi güncellemesi ne kadar sürer?+
Google'ın yeniden taramasının ardından günler veya haftalar sürebilir. Simgenin en az 48×48 boyutunda, kare olduğundan ve sabit bir URL'den herkesin erişebildiğinden emin olun.
Reklam engelleme veya gizlilik modu favicon'ları gizler mi?+
Nadiren birinci taraf simgeler için. Üçüncü taraf favicon proxy'leri engellenebilir; Alanınızdaki kendi kendine barındırılan simgeler etkilenmez.
Tarayıcı favicon önbelleğini silmeli miyim?+
Tarayıcı ayarlarında alan adınız için site verilerini temizleyin veya önbellek devre dışıyken özel bir pencerede test edin.