Favicon Nedir? Boyutları ve Nasıl Eklenir?

Favicon, bir web sitesini tarayıcı sekmesinde, yer imlerinde ve arama sonuçlarında temsil eden küçük simgedir. Adı “favorite icon” ifadesinden gelir; kullanıcının onlarca açık sekme arasında sitenizi bir bakışta bulmasını sağlayan görsel kimliktir.

Küçük bir ayrıntı gibi görünür ama üç yerde birden çalışır: sekme çubuğu, mobil ana ekran kısayolu ve Google’ın mobil arama sonuçları. Faviconu olmayan site bu yüzeylerde boş bir varsayılan simgeyle temsil edilir.

Favicon neden önemli?

Birincisi tanınırlıktır: kullanıcı sekmeler arasında dolaşırken siteyi logoyla değil faviconla bulur. İkincisi güven algısıdır: eksik favicon, tamamlanmamış site izlenimi verir. Üçüncüsü arama görünürlüğüdür: Google mobil sonuçlarda her sonucun yanında site faviconunu gösterir; bozuk ya da eksik simge, tıklama kararının verildiği o küçük anda markayı silikleştirir.

Favicon boyutları ve formatları nelerdir?

Pratik kural: tek bir SVG + 48 katı bir PNG + apple-touch-icon üçlüsü, güncel cihazların tamamını kapsar. ICO formatı yalnızca çok eski tarayıcı desteği gerekiyorsa eklenir.

Favicon nasıl eklenir?

1. Kaynak görseli hazırlayın. Logonun tamamı değil, küçükte okunabilen tek bir öğesi (harf, sembol) kullanılır.
2. Boyut setini üretin. Tek kaynaktan SVG, PNG ve apple-touch sürümleri çıkarılır.
3. HTML’e tanımlayın. <link rel="icon"> ve <link rel="apple-touch-icon"> etiketleri sayfa başlığına eklenir; PWA kullanılıyorsa manifest dosyasındaki icons alanı doldurulur.
4. Kök dizine de koyun. Bazı araçlar etiketlere bakmadan doğrudan /favicon.ico adresini ister; orada da bir kopya bulunmalıdır.
5. Doğrulayın. Sekme, mobil kısayol ve arama sonucu ayrı ayrı kontrol edilir; tarayıcı faviconu agresif önbelleklediği için değişiklik hemen görünmeyebilir.

Google favicon kuralları

Google’ın simgeyi göstermesi için üç koşul aranır: favicon 48 pikselin katı olmalı, hem favicon dosyası hem ana sayfa taranabilir olmalı ve simge müstehcen ya da yanıltıcı içerik taşımamalıdır. Kurala uymayan simgeler yerine varsayılan küre simgesi gösterilir.

Sık yapılan hatalar

En yaygın hata, detaylı logoyu olduğu gibi küçültmektir; 16 piksele inen çok renkli logo tanınmaz bir lekeye döner. İkincisi koyu ve açık temayı test etmemektir: koyu sekme çubuğunda siyah simge kaybolur. Üçüncüsü güncelleme sonrası eski simgenin önbellekte kalması; dosya adını sürümlemek (favicon-v2.svg) bu sorunu kökten çözer.

Favicon, sitenin makine tarafından okunduğu küçük yüzeylerden yalnızca biridir; aynı ailenin bütünü kullanıcı deneyimi ve marka tutarlılığı başlığında birleşir.