Favicon sadece tarayıcı sekmesindeki küçük ikon değildir. Yer imleri, mobil ana ekran kısayolları, Google arama sonuçları — favicon düşündüğünüzden çok daha fazla yerde görünür ve markanızı temsil eder.
"Favorite icon" kelimelerinin kısaltması olan favicon, 1999'da Internet Explorer 5 ile web dünyasına girdi. O zamandan beri web standartlarının ayrılmaz bir parçası. Favicon olmayan bir site bugün tamamlanmamış görünüyor — tıpkı tabela olmayan bir dükkan gibi.
Favicon tam olarak nedir?
Favicon, web sitenizi temsil eden küçük bir grafiktir. Tarayıcı sekmesinde, bookmark listesinde, mobil cihazlarda — hatta Google arama sonuçlarında bile karşınıza çıkar. Boyutu genellikle 16x16 pikseldir ama kullanıldığı yere göre değişir.
Dosya formatı olarak ICO, PNG veya SVG kullanabilirsiniz. Modern tarayıcılar üçünü de destekler. Eski tarayıcı uyumluluğu önemliyse ICO formatını tercih edin.
Favicon nerede görünür?
Listelemek gerekirse:
- Tarayıcı sekmesi (tab)
- Bookmark/yer işaretleri listesi
- Tarayıcı geçmişi
- Masaüstü kısayolları
- Mobil ana ekran ikonları
- Google arama sonuçları (SERP)
Özellikle son madde dikkat çekici. Google, 2019'dan beri arama sonuçlarında favicon gösteriyor. Bu durum, favicon'u sadece görsel bir detay olmaktan çıkarıp SEO açısından da anlamlı bir öğeye dönüştürdü.
Neden her web sitesinin favicon'u olmalı?
Küçük bir dosya, birden fazla işlevi üstleniyor.
Marka kimliği
Kullanıcılar tarayıcıda onlarca sekme açar. Sekme başlıkları daraldığında geriye sadece favicon kalır. Markanızın renkleri ve logosu o küçük karede yaşar — sitenizi tanınır kılan şey de budur.
Favicon olmayan siteler varsayılan dünya ikonu veya boş bir kare ile görünür. Bu da ziyaretçiye "bu site yarım kalmış" mesajı verir.
Kullanıcı deneyimi
Bookmark listesinde yüzlerce kayıt arasında sitenizi bulmak, favicon varsa saniyeler alır. Yoksa? Tek tek başlıkları okumak gerekir. Aynı durum tarayıcı geçmişi için de geçerli.
Google arama sonuçlarında görünürlük
Google, arama sonuçlarında her sitenin favicon'unu gösterir. Tanıdık bir ikon, kullanıcının gözünü yakalar ve tıklama oranını artırabilir. Favicon yoksa Google varsayılan gri bir küre koyar — profesyonel bir izlenim bırakmaz.
Favicon boyutları
Favicon tek bir boyutta değil. Göründüğü yere göre farklı piksel değerleri gerekiyor.
Standart boyutlar
- 16x16px — Tarayıcı sekmesi (eski tarayıcılar)
- 32x32px — Tarayıcı sekmesi (modern tarayıcılar)
- 48x48px — Google'ın önerdiği boyut, Windows görev çubuğu
- 64x64px — Windows site kısayolları
- 180x180px — Apple Touch Icon (iOS)
- 192x192px — Android Chrome (PWA)
- 512x512px — Android Chrome splash screen
Google resmi olarak 48x48 pikseli öneriyor. Hem tarayıcıda hem arama sonuçlarında net görünen bir orta nokta.
Tüm boyutlar gerekli mi?
Zorunlu değil. Tarayıcılar eksik boyutları otomatik ölçeklendiriyor. Yine de farklı platformlarda pikselleşme yaşamamak için birkaç boyut hazırlamanızda fayda var.
Minimum set olarak şunlar yeterli:
- 48x48px ICO dosyası (favicon.ico)
- 180x180px PNG (Apple Touch Icon)
- 192x192px ve 512x512px PNG (Android PWA)
Favicon formatları
Üç ana format var: ICO, PNG ve SVG. Her birinin güçlü ve zayıf yanları farklı.
ICO formatı
Favicon'un orijinal formatı. En büyük avantajı tek dosyada birden fazla boyut barındırabilmesi — 16x16, 32x32 ve 48x48 hepsini tek bir `favicon.ico` içinde tutabilirsiniz. Internet Explorer gibi eski tarayıcılar yalnızca ICO'yu tanır, bu yüzden geriye dönük uyumluluk için hala gerekli.
PNG formatı
Modern tarayıcıların tercih ettiği format. Şeffaflık desteği var, kaliteli görüntüler üretiyor ve yüksek çözünürlüklü ekranlarda gayet iyi sonuç veriyor.
Dikkat edilmesi gereken bir nokta: Apple Touch Icon ve Android PWA ikonları mutlaka PNG olmalı. ICO bu platformlarda çalışmaz.
SVG formatı
Vektör tabanlı. Sonsuz ölçeklenebilir ve dosya boyutu çok küçük — genellikle 2KB'ın altında kalır.
Chrome, Firefox, Edge ve Safari SVG favicon destekliyor. Tüm platformlarda çalışmadığı için yedek olarak ICO veya PNG de eklemeniz gerekir. SVG'nin güzel bir özelliği daha var: CSS media query ile dark mode desteği sağlayabilirsiniz. Yani favicon rengi, kullanıcının tema tercihine göre otomatik değişir.
Favicon nasıl oluşturulur?
İki temel yol var.
Online araçlar
En pratik yöntem. 512x512 piksel boyutunda bir görsel yüklersiniz, araç gerisini halleder — tüm boyutları oluşturur, HTML kodunu hazırlar. Üstelik ücretsiz. Elinizde hazır bir logo veya ikon varsa birkaç dakikada tüm boyutları oluşturabilirsiniz.
Photoshop, Figma gibi tasarım araçları
Daha fazla kontrol istiyorsanız bu yolu tercih edebilirsiniz. Piksel piksel tasarım yapabilir, her boyutu ayrı ayrı optimize edebilirsiniz. Dezavantajı var: Bu araçlar ICO formatını doğrudan desteklemez, ayrı bir dönüştürücüye ihtiyaç duyarsınız. Zaman alıcı bir süreç.
Çoğu proje için online araçlar fazlasıyla yeterli. Tasarım yazılımları ancak animasyonlu favicon veya SVG dark mode gibi özel ihtiyaçlarda devreye girer.
Favicon HTML'e nasıl eklenir?
Favicon dosyalarını oluşturduktan sonra HTML <head> bölümüne tanımlamanız gerekiyor. Sunucu tarafında da doğru MIME type ayarlarını yapmanız iyi olur.
Basit kullanım
Tek satır yeterli:
<link rel="icon" type="image/x-icon" href="/favicon.ico">Tarayıcıların çoğu zaten kök dizindeki `favicon.ico` dosyasını otomatik arar. Ama HTML'de belirtmek daha güvenli bir yaklaşım.
Çoklu format desteği
Farklı tarayıcı ve platformları kapsamak istiyorsanız birden fazla format tanımlayın:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Tarayıcı desteklediği formatı seçer. SVG varsa onu kullanır, yoksa PNG'ye döner, o da yoksa ICO devreye girer. Bir tür fallback zinciri.
Favicon tasarım ipuçları
16x16 piksel. Detaylı bir illüstrasyon için yer yok. Tasarımın basit ve okunabilir olması şart.
Basit tutun
Logonuzun tamamını sığdırmaya çalışmayın. Baş harfi veya sembolik bir parçası çok daha iyi sonuç verir. Karmaşık tasarımlar küçük boyutta bulanıklaşır, tanınmaz hale gelir. Tasarladıktan sonra mutlaka 16x16 boyutunda önizleme yapın.
Yüksek kontrast
Favicon hem açık hem koyu arka planlarda görünecek. Açık renkli bir ikon koyu temada kaybolabilir, tam tersi de geçerli. Şeffaf arka plan kullanıyorsanız dark mode testini atlamayın. Gerekirse iki farklı versiyon hazırlayabilirsiniz — SVG formatı bunu CSS ile otomatik yapmanıza olanak tanır.
Marka renklerini kullanın
Favicon markanızın uzantısı. Kullanıcılar sitenizi renklerle tanımalı. İki, en fazla üç renk yeterli — daha fazlası küçük boyutta karmaşaya dönüşür. Marka renk kodlarınızı farklı formatlara dönüştürerek tutarlılığı sağlayabilirsiniz.
Favicon önbellek sorunu
Favicon'u değiştirdiniz ama tarayıcıda hala eski ikon görünüyor. Sıkça karşılaşılan bir durum.
Neden olur?
Tarayıcılar favicon'ları agresif şekilde önbelleğe alır. Sayfa her yüklendiğinde tekrar indirmemek için bunu yapar — performans açısından mantıklı, güncelleme yaparken sinir bozucu.
Nasıl çözülür?
- Tarayıcı önbelleğini temizleyin (Ctrl+Shift+Delete)
- Hard refresh yapın (Ctrl+F5)
- Gizli pencerede (incognito) test edin
- Dosya adına versiyon parametresi ekleyin
En kalıcı çözüm query string yöntemi:
<link rel="icon" href="/favicon.ico?v=2">Her güncellemede versiyon numarasını artırırsınız. Tarayıcı farklı bir URL gördüğü için dosyayı yeniden indirir. Basit ve etkili.
Favicon ve SEO ilişkisi
Doğrudan sıralama faktörü mü? Hayır. Google bunu açıkça söyledi. Ama dolaylı etkileri göz ardı edilemez:
- Arama sonuçlarında görsel farklılaşma
- Tıklama oranında (CTR) artış potansiyeli
- Marka tanınırlığı ve güven algısı
- Genel kullanıcı deneyimi iyileşmesi
Tanıdık bir favicon, kullanıcının gözünü arama sonuçlarında yakalar. Bu da tıklama olasılığını artırır — dolaylı yoldan SEO'ya katkı sağlar. Arama motorlarındaki sıralamanızı takip ederek bu etkiyi gözlemleyebilirsiniz.
Favicon olmayan siteler Google'da varsayılan gri küre ikonu ile görünür. Rakiplerinizin hepsinde özel favicon varken sizinki yoksa, kullanıcı gözünde bir adım geride başlarsınız.
Yaygın favicon hataları
Yanlış konum
Sıkça yapılan hatalardan biri. `favicon.ico` dosyası kök dizinde olmalı: `https://siteniz.com/favicon.ico`. Alt klasöre koyarsanız bazı tarayıcılar ve botlar dosyayı bulamaz.
Çok büyük dosya boyutu
ICO dosyası 10KB'ı, PNG 5KB'ı geçmemeli. Favicon küçük bir grafik — megabaytlarca yer kaplaması anlamsız ve sayfa yükleme hızını olumsuz etkiler. Detaylı tasarımlardan kaçının, basit ikonlar hem daha küçük hem daha net görünür. Gerekirse görsellerinizi sıkıştırarak boyutunu düşürebilirsiniz.
Tek boyut kullanmak
Sadece 16x16 oluşturup bırakmayın. Farklı platformlar farklı boyutlar bekler. En az üç boyut hazırlayın: 48x48 (ICO), 180x180 (Apple), 192x192 (Android). Bu kadarı çoğu senaryoyu kapsar.
HTML kodunu unutmak
Dosyaları sunucuya yüklemek yetmez. HTML <head> bölümüne `link` etiketlerini eklemeyi atlarsanız tarayıcı favicon'u göremez. Özellikle Apple Touch Icon ve PWA ikonları için HTML tanımı zorunlu.
Favicon oluşturmak birkaç dakikalık bir iş. Online araçlarla tüm boyutları hazırlayabilir, HTML kodunu kopyalayıp yapıştırabilirsiniz. Küçük bir dosya ama sitenizin profesyonel algısında ciddi fark yaratıyor.