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. Hangisini seçeceğiniz projenizin ihtiyaçlarına bağlı.
ICO formatı
Favicon'un orijinal formatı. Tek dosyada birden fazla boyut barındırır — 16x16, 32x32 ve 48x48 hepsini tek bir `favicon.ico` içine paketlersiniz. Internet Explorer gibi eski tarayıcılar yalnızca ICO'yu tanıdığı için geriye dönük uyumluluk açısından hala vazgeçilmez. Kısacası: eski tarayıcı desteği lazımsa ICO şart.
PNG formatı
Modern tarayıcılar PNG'yi seviyor. Şeffaflık desteği var, Retina ekranlarda keskin görüntü veriyor, dosya boyutu makul kalıyor. Apple Touch Icon ve Android PWA ikonları için zaten tek seçenek PNG — ICO bu platformlarda işe yaramaz.
SVG formatı
Vektör tabanlı olduğu için sonsuz ölçeklenebilir. Dosya boyutu genellikle 2KB'ın altında kalır — bir PNG favicon'un onda biri kadar.
Chrome, Firefox, Edge ve Safari SVG favicon destekliyor ama tüm platformlarda çalışmadığından yedek olarak ICO veya PNG de eklemeniz gerekir. SVG'nin asıl ilginç tarafı şu: CSS media query ile dark mode desteği sağlayabilirsiniz. Kullanıcı koyu temaya geçtiğinde favicon rengi otomatik değişir. Bu özelliği sunan tek format SVG.
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 kök dizindeki `favicon.ico` dosyasını otomatik arar. Yine de HTML'de açıkça belirtmek daha sağlam bir yol.
Ç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. Her sayfa yüklemesinde tekrar indirmemek için bunu yapar — performans açısından mantıklı, güncelleme yaparken sinir bozucu.
Çözüm yolları
- 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. Dolaylı etkileri ise göz ardı edemezsiniz:
- 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. Tıklama olasılığı artar, 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
Klasik hata. `favicon.ico` dosyası kök dizinde durmalı: `https://siteniz.com/favicon.ico`. Alt klasöre atarsanız bazı tarayıcılar ve arama motoru botları dosyayı bulamaz. Özellikle Googlebot bu konuda oldukça katı davranıyor.
Çok büyük dosya boyutu
ICO dosyası 10KB'ı, PNG 5KB'ı geçmemeli. Favicon zaten küçücük bir grafik — megabaytlarca yer kaplaması saçma ve sayfa yükleme hızını doğrudan etkiler. Basit ikonlar hem daha hafif 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ırakmak yaygın bir hata. Farklı platformlar farklı boyutlar bekler ve eksik boyutlarda pikselleşme kaçınılmaz. Minimum üç boyut hazırlayın: 48x48 (ICO), 180x180 (Apple), 192x192 (Android). Çoğu senaryo için bu yeterli.
HTML kodunu unutmak
Dosyaları sunucuya yüklediniz, güzel. Ama HTML <head> bölümüne `link` etiketlerini eklemeyi atladıysanız tarayıcı favicon'u göremez. Apple Touch Icon ve PWA ikonları için HTML tanımı zorunlu — bu ikisinde otomatik algılama çalışmaz.
Sonuçta favicon oluşturmak birkaç dakikalık bir iş. Küçük bir dosya, ama sitenizin profesyonel algısında ciddi fark yaratıyor.