Favicon Nedir?
Kısa tanım
Favicon, bir web sitesini temsil eden ve tarayıcı sekmesinde, yer imlerinde, geçmişte ve Google arama sonuçlarında site adının yanında gösterilen küçük ikondur. Genellikle sayfanın head bölümüne eklenen bir link rel="icon" etiketiyle tanımlanır. Google'da görünmesi için kare olması, en az 8×8 piksel olması ve hem favicon dosyasının hem de ana sayfanın taranabilir olması gerekir.
Diğer adları: site ikonu, sekme ikonu, favicon.ico, apple-touch-icon
Küçük ama çok yerde görünen bir öğe
Favicon ilk olarak tarayıcı sekmesi ve yer imleri için kullanıldı. Bugün çok daha fazla yerde karşımıza çıkar: mobil ana ekran kısayolları, uygulama değiştirici, paylaşılan bağlantıların önizlemeleri ve Google'ın arama sonuçlarında site adının yanındaki ikon. Kullanıcı on sonuç arasından tanıdığı bir markayı çoğu zaman önce ikonundan fark eder; bu yüzden favicon küçük olsa da SERP üzerindeki görünürlüğün bir parçasıdır.
Google'ın favicon kuralları
Google Search Central belgesine göre favicon'un arama sonuçlarında gösterilebilmesi için:
- Ana sayfanın
<head>bölümündeicon,shortcut icon,apple-touch-iconveyaapple-touch-icon-precomposeddeğerlerinden biriyle bir<link>etiketi bulunmalıdır. - İkon kare (1:1) ve en az 8×8 piksel olmalıdır; Google farklı yüzeylerde iyi görünmesi için 48×48 pikselden büyük bir dosya önerir.
- Desteklenen biçimler BMP, GIF, ICO, PNG, JPEG, PPM ve TIFF'tir.
- Favicon dosyasını Googlebot-Image'ın, ana sayfayı da Googlebot'un tarayabilmesi gerekir; ikisi de robots.txt ile engellenmemelidir.
- Favicon URL'si sabit kalmalı, sık sık değiştirilmemelidir; dosya bir CDN'de de barındırılabilir.
- İkon markayı görsel olarak temsil etmelidir. Google uygunsuz bulduğu ikonları göstermez.
Google host adı başına tek favicon destekler. Bu, alt alan adlarının (ör. destek.ornek.com) kendi favicon'unu kullanabileceği, ama alt klasörlerin (ör. ornek.com/destek/) ayrı bir ikon gösteremeyeceği anlamına gelir.
Önerilen kurulum
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon-96.png" type="image/png" sizes="96x96">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Bu yapıda her sistem kendine uygun dosyayı seçer. Vektörel SVG ikon, tarayıcı desteklediğinde her boyutta keskin görünür; ancak SVG, Google'ın favicon için listelediği biçimler arasında yer almaz. Bu yüzden arama sonuçları için 48 pikselden büyük, kare bir PNG veya ICO dosyası mutlaka bulunmalıdır. Manifest dosyası ise siteyi ana ekrana eklenebilir bir PWA olarak tanımlıyorsa, uygulama ikonlarını ayrıca listeler.
Favicon neden görünmüyor?
- Etiket yalnızca iç sayfalarda: Google favicon bilgisini ana sayfadan okur.
- Tarama engeli: Görsellerin bulunduğu klasörü robots.txt ile kapatmak, favicon'u da engelleyebilir.
- Kare olmayan dosya: Yatay logo doğrudan favicon olarak kullanıldığında kural ihlal edilir.
- Zaman: Değişikliğin fark edilmesi için ana sayfanın yeniden taranması gerekir; Google bunun birkaç günden birkaç haftaya kadar sürebileceğini belirtir. Search Console'daki URL Denetleme aracıyla ana sayfa için dizine ekleme isteği gönderilebilir.
16 pikselde okunabilir tasarım
Ayrıntılı bir logo, sekme boyutunda anlaşılmaz bir lekeye dönüşür. İyi favicon'lar logonun en ayırt edici parçasını (bir harf, bir sembol) kullanır, ince çizgilerden kaçınır ve hem açık hem koyu tarayıcı temalarında yeterli kontrast sağlar. Şeffaf arka planlı bir ikonun koyu temada kaybolup kaybolmadığını yayından önce iki temada da kontrol etmek, sonradan sık değişiklik yapmaktan daha iyidir; çünkü Google ikon URL'sinin sabit kalmasını ister.