Favicon dosyasını güncellediniz, sunucuya attınız, sayfayı yenilediniz. Eski ikon hâlâ orada. Ctrl+Shift+R denediniz, aynı sonuç. Önbelleği tamamen temizlediniz, tarayıcıyı kapattınız, yeniden açtınız. Yine eski favicon. Sorun sunucuda değildir; sorun tarayıcının favicon isteklerine nasıl davrandığındadır ve bu davranış, normal sayfa kaynaklarından oldukça farklı işler.
Tarayıcı favicon'u neden ayrı önbelleğe alır
Tarayıcılar favicon'u standart bir HTTP kaynağı olarak değil, özel bir kullanıcı arayüzü unsuru olarak ele alır. Sekme çubuğu, yer imleri ve pencere listesi gibi tarayıcı bileşenleri favicon'a sürekli erişir. Bu nedenle favicon isteği, sayfanın HTML veya CSS dosyalarından bağımsız bir yaşam döngüsüne sahiptir: sayfa kapanırken de önbellekte kalır, farklı sekmelerden paylaşılır ve tarayıcının disk cache katmanında saklanır.
Disk cache farklı çalışır.
Bir sayfayı Ctrl+F5 ile yenilediğinizde tarayıcı o sayfanın HTML, JS ve CSS dosyalarını memory cache'i atlayarak sunucudan yeniden ister; ancak disk cache'de bekleyen favicon için bu istek yönlendirmesi gerçekleşmez, çünkü favicon isteği sayfanın yenileme döngüsüne bağlı değildir ve tarayıcı bunu aktif sekmeyle ilgili bir kaynak olarak değil, kullanıcı arayüzünün parçası olarak sınıflandırır.
ICO formatındaki favicon.ico için bu durum daha belirgindir. Tarayıcı favicon.ico için yaptığı ilk başarılı isteği disk cache'e yazar ve sonraki ziyaretlerde sunucuya sormadan bu kopyayı kullanır. Cache-Control başlığı yoksa tarayıcı kendi heuristik TTL değerini uygular; bu değer Chrome'da birkaç günden birkaç haftaya kadar uzayabilir.
Eski favicon nerede takılı kalır
Sorunu tetikleyen üç koşulun bir arada bulunması gerekir: sabit URL (/favicon.ico olarak kalmış), aynı MIME türü ve sunucunun eksik veya uzun süreli Cache-Control başlığı. Bu üçü bir arada olduğunda tarayıcı disk cache'indeki kaydı geçerli kabul eder ve sunucuya koşullu istek bile yapmaz.
Ctrl+Shift+Del ile önbelleği temizlemek çoğu zaman çözüm gibi görünür ama tarayıcıya göre önemli farklılıklar vardır. Chrome "Önbelleğe alınmış resimler ve dosyalar" kutusunu işaretlemeniz gerekir ve bu işlem bile favicon'un farklı depolama konumunda tutulması nedeniyle bazen yetersiz kalır. Favicon'u gerçekten temizlemenin güvenilir yolu, adres çubuğuna about:blank yazıp oradan önbelleği temizlemek, ardından favicon URL'ini doğrudan sekmeye açmaktır.
Bir de sık karıştırılan durum var: Bazı geliştiriciler sorunu sunucu tarafındaki gzip veya sıkıştırma yapılandırmasında arar. ICO dosyaları ikili formattır ve gzip ile sıkıştırılmaları önbellek davranışını etkilemez. Favicon cache sorunu her zaman HTTP başlık değerlerinden veya URL'in değişmemesinden kaynaklanır.
Sunucunun gerçekten doğru başlıkları gönderip göndermediğini doğrulamak için en hızlı yol terminalden curl -I https://siteniz.com/favicon.ico komutunu çalıştırmaktır. Yanıtta Cache-Control, Expires ve ETag satırlarını arayın. Eğer bu başlıklar yoksa veya beklenenden farklı değerler görüyorsanız, sorun .htaccess yapılandırmasındadır. Sayfanın genel HTTP yanıt durumunu ve başlık bilgilerini sunucu yanıtlarını analiz eden bir araçla incelemek, favicon dışındaki kaynakların önbellek davranışını da aynı anda görmenizi sağlar.
HTTP başlıklarıyla önbellek süresi belirleme
Favicon için açıkça Cache-Control başlığı belirlemek, tarayıcının heuristik TTL hesaplamasının önüne geçer. .htaccess üzerinden Apache sunucusunda şu yapılandırma uygulanabilir:
<Files "favicon.ico">
Header set Cache-Control "max-age=604800, public"
Header set Vary "Accept-Encoding"
</Files>604800 saniye bir haftalık TTL'e karşılık gelir. Favicon sık değişmeyen bir dosyaysa bu değer makul; sık değişiyorsa sorgu parametresi yaklaşımıyla birlikte kullanmak daha güvenlidir. Nginx için eşdeğer yapılandırma:
location = /favicon.ico {
expires 7d;
add_header Cache-Control "public, max-age=604800";
log_not_found off;
access_log off;
}ETag yeterli değil.
ETag başlığı sunucunun dosyanın değişip değişmediğini bildirmesini sağlar; ancak ETag'in işe yaraması için tarayıcının önce koşullu bir istek yapması, yani If-None-Match başlığıyla sunucuya sorması gerekir. Tarayıcı bu soruyu ancak mevcut önbellek kaydının süresi dolduğunda sorar; süre dolmadığı sürece ETag'e bakmaz bile. Yani Cache-Control max-age değeri çok uzun tutulmuşsa ETag hiçbir fark yaratmaz.
Bakım maliyeti açısından: favicon'u yılda bir kez değiştiren bir site için uzun TTL sorunsuz çalışır. Tasarım revizyonları sık yaşanıyorsa, her değişiklikte cache temizleme gerektiren uzun TTL ciddi bir operasyonel yük oluşturur. Bu senaryoda sorgu parametreli URL tercih edilmelidir.
Apache yapılandırmasında <Files> bloğunun çalışabilmesi için AllowOverride, FileInfo veya All olarak ayarlanmış olmalıdır. Sunucunuzda bu izin yoksa .htaccess içindeki Header set satırları sessizce görmezden gelinir; başlıklar curl çıktısında görünmez ama hata da vermez. Bir yapılandırma hatası mı var yoksa sunucu düzeyinde bir kısıtlama mı, bunu ayırt etmenin en temiz yolu sunucu error log'unu kontrol etmektir. Sıfırdan doğru bir .htaccess dosyası oluşturmak ya da mevcut kuralların çakışıp çakışmadığını görmek için htaccess kurallarını hazırlamaya yardımcı olan bir araçtan yararlanabilirsiniz.
mod_headers modülünün Apache kurulumunda etkin olup olmadığını da doğrulayın. Paylaşımlı hosting ortamlarında bu modül devre dışı bırakılmış olabilir. Kontrol için sunucuya SSH erişiminiz varsa apache2ctl -M | grep headers komutu yeterlidir; çıktıda headers_module satırını görüyorsanız modül aktiftir. Modül yoksa Header set yönergesi yerine ExpiresByType direktifi kullanılabilir; bu direktif mod_expires modülüne bağlıdır ve çoğu hosting ortamında etkindir.
Sorgu parametresiyle cache busting
Favicon URL'ine bir sorgu parametresi eklemek, tarayıcıya yeni bir kaynak gibi gösterir ve disk cache'deki eski kaydın devre dışı kalmasını sağlar. HTML head bölümünde şu şekilde uygulanır:
<link rel="icon" type="image/x-icon" href="/favicon.ico?v=2">Her favicon değişikliğinde v parametresi artırılır. Tarayıcı /favicon.ico?v=2'yi daha önce görmediği için sunucuya yeni istek yapar. Eski favicon sorunu anında çözülür.
Ancak bu yöntemin çalışmadığı durumlar da vardır. Bazı CDN yapılandırmaları sorgu parametrelerini cache anahtarının dışında bırakır; yani CDN ?v=1 ile ?v=2'yi aynı kaynak olarak ele alır ve eski içeriği döndürmeye devam eder. Bu durumda URL yolunu değiştirmek gerekir: /favicon-v2.ico gibi dosya adına versiyon dahil edilmeli ve .htaccess üzerinden /favicon.ico isteği bu yeni dosyaya yönlendirilmelidir.
Karar noktası şudur: CDN kullanmıyorsanız ve önbellek ayarları sunucudaysa sorgu parametresi yeterlidir. CDN katmanı varsa, CDN'in query string'i nasıl işlediğini önce doğrulayın, gerekirse dosya yolu değişikliğine geçin. Seçimi CDN davranışı belirler, başka bir değişken değil.
Tarayıcıya göre farklılaşan davranışlar
Chrome, favicon'u sekme başına değil profil başına önbelleğe alır. Bir profilde önbelleği temizlediğinizde diğer profiller etkilenmez. Chrome DevTools Network sekmesinde favicon isteklerini görmek için "Tüm" veya "Resimler" filtresini seçmek ve sayfayı yüklerken DevTools açık tutmak gerekir; aksi hâlde favicon isteği kayıt dışında kalır.
Firefox, favicon önbelleğini ayrı bir SQLite veritabanında (favicons.sqlite) saklar. Bu veritabanı standart önbellek temizleme işleminden etkilenmez. Firefox profil klasöründe bu dosyayı doğrudan silmek, tüm favicon önbelleğini sıfırlar; bu yol, tarayıcı önbelleği arayüzünden çok daha güvenilirdir.
Safari, favicon'u yalnızca HTTPS üzerinden sunulan siteler için düzenli olarak günceller. HTTP üzerinde çalışan yerel geliştirme ortamlarında favicon değişikliği saatlerce görünmeyebilir. iOS Safari'de favicon önbelleği ana ekranda yer işareti oluşturulduktan sonra tamamen cihaza taşınır ve URL değişikliği bile etkisiz kalabilir.
Mobil Chrome, favicon isteklerini düşük bant genişliği modunda tamamen atlar. Bu durum, favicon'u başarıyla güncelleyip masaüstünde doğruladıktan sonra mobil cihazda eski ikonun görünmesinin her zaman bir cache sorunu olmadığına işaret eder; kimi zaman istek hiç yapılmamıştır. Yeni bir favicon oluşturmak için ihtiyaç duyduğunuz format ve boyutları üretmek amacıyla çok boyutlu favicon oluşturmayı kolaylaştıran bir araçtan yararlanabilirsiniz; böylece her tarayıcı ve cihaz için doğru dosyaları hazır edebilirsiniz.
Favicon önbelleği, HTTP önbellek mekanizmalarının en az denetlenen köşesidir. Sorun sunucuda değil, tarayıcının favicon isteğini sayfa kaynaklarından ayrı tutmasında yatar. Cache-Control başlığını açıkça belirlemek, sorgu parametresiyle versiyonlamak ve tarayıcıya özgü temizleme yöntemlerini bilmek, bu üç adım birlikte uygulandığında favicon güncellemesi öngörülebilir ve tekrarlanabilir bir işlem hâline gelir.