Favicon Kontrolü

Özet (TL;DR)

Doğrulama Önemlidir: Bozuk bir favicon sadece eksik bir simge değildir; sunucu günlüklerinde 404 hatalarına neden olur ve marka imajını zedeler.
Kapsamlı Analiz: Bu araç, favicon.ico, PNG simgeleri, Apple Touch Icons ve Web Manifests’i doğrulamak için sitenizi bir tarayıcı gibi tarar.
Eyleme Geçirilebilir Geri Bildirim: Dosya erişilebilirliği, boyut uyuşmazlığı ve format geçerliliği hakkında özel raporlar alın.

Favicon’ları neden doğrulamalıyız?

Bir favicon dağıtmak basit görünür, ancak pratikte sessiz hatalara açıktır. Modern tarayıcı ekosistemlerinin (Masaüstü, Android, iOS) farklı gereksinimleri vardır.

Tarayıcı Önbelleği: Yerel tarayıcılar favicon’ları agresif bir şekilde önbelleğe alır ve genellikle sorunları gizler.
Parçalanmış Standartlar: Sadece favicon.ico‘dan fazlasına ihtiyacınız var. Apple cihazları apple-touch-icon arar. Android ve PWA’lar site.webmanifest arar.
Sunucu Yapılandırması: Sunucunuz 403 veya yanlış MIME türü döndürüyorsa, HTML’deki doğru yollar anlamsızdır.

Yapılan Kontroller

Analizörümüz çok adımlı bir denetim gerçekleştirir:

HTML Ayrıştırma: Tüm beyan edilen simge bağlantılarını bulmak için <head> taranır.
Manifest Doğrulama: Web Manifest’teki beyan edilen boyutların gerçek dosyalarla eşleşip eşleşmediğini doğrularız.
Erişilebilirlik: Her simgenin 200 OK döndürdüğünü doğrulamak için indirmeye çalışırız.
Format ve Boyutlar: Dosyanın geçerli bir görüntü olduğundan ve boyutların eşleştiğinden emin olmak için ikili verileri inceleriz.
Örtük Keşif: /favicon.ico gibi standart yolları kontrol ederiz.

Yaygın Dağıtım Hataları

1. “Hayalet” Simge

Bir <link> etiketiniz var, ancak dosya 404 döndürüyor. Çözüm: Dosya yolunu kontrol edin.

2. Format Uyuşmazlığı

type="image/png" beyan ediyorsunuz ama JPEG sunuyorsunuz. Çözüm: Sunucu Content-Type başlığının gerçek formatla eşleştiğinden emin olun.

3. Boyut Yalanı

HTML sizes="32x32" diyor ama gerçek resim 16x16. Çözüm: Kesin boyutlar üretmek için Favicon Oluşturucu kullanın.

4. Apple Touch Icon Eksik

apple-touch-icon olmadan, iOS kullanıcıları genel bir sayfa ekran görüntüsü görür. Çözüm: Apple için her zaman 180x180 PNG ekleyin.

En İyi Uygulamalar

Kök Yedeği: Kökte (/favicon.ico) her zaman bir favicon.ico bulundurun.
Modern için SVG: Çözünürlük bağımsızlığı için SVG favicon kullanın.
Manifest: manifest.json içinde ayrı simgeler tanımlayın.
Önbellek Temizleme: Güncelleme yaparken sorgu dizeleri (örn. ?v=2) kullanın.

Favicon Araçları