Favicon (Favorites Icon), tarayıcı sekmesinde, yer imleri listesinde ve arama sonuçlarında web sitenizin yanında görünen küçük simgedir. 16×16 piksellik bu minik görsel, markanızın dijital kimliğinin önemli bir parçasıdır. Profesyonel bir favicon, güven oluşturur, marka tanınırlığını artırır ve kullanıcıların birden çok sekme arasında sitenizi kolayca bulmasını sağlar.
1. Favicon Nerede Görünür?
| Konum | Açıklama | Boyut |
|---|
| Tarayıcı sekmesi | Sekme başlığının solundaki ikon | 16×16 / 32×32 px |
| Yer imleri | Favorilere eklendiğinde görünen ikon | 16×16 px |
| Adres çubuğu | URL'nin solunda (bazı tarayıcılar) | 16×16 px |
| Google arama sonuçları | Site adının solundaki ikon | 48×48 px (min) |
| Mobil ana ekran | Web uygulaması ana ekrana eklendiğinde | 180×180 / 192×192 px |
| Windows başlat menüsü | Sabitlenmiş site kutucuğu | 150×150 / 310×310 px |
| PWA (Progressive Web App) | Uygulama ikonu olarak | 192×192 / 512×512 px |
| Sosyal medya paylaşım | Bazı platformlarda URL önizlemeleri | Değişken |
2. Neden Önemli?
- Marka tanınırlığı: Kullanıcılar 10+ sekme arasında sitenizi renkten/şekilden tanır
- Profesyonellik: Favicon olmayan siteler "yarım kalmış" görünür — güvensizlik
- Google arama: 2026 itibarıyla arama sonuçlarında favicon gösteriliyor — tıklama oranı etkisi
- Yer imleri: Favori listenizde favicon olmayan siteler kaybolur — tekrar ziyaret azalır
- Mobil: Ana ekrana ekleme — fazcon uygulamayla aynı deneyim
- PWA: Progressive Web App olarak kurulum — favicon zorunlu
| Boyut | Format | Kullanım | Zorunluluk |
|---|
| 16×16 px | .ico / .png | Tarayıcı sekme, yer imi | Zorunlu |
| 32×32 px | .ico / .png | Retina tarayıcı sekme | Zorunlu |
| 48×48 px | .png | Google arama sonuçları | Önerilen |
| 180×180 px | .png | Apple Touch Icon (iOS) | Önerilen |
| 192×192 px | .png | Android Chrome, PWA | Önerilen |
| 512×512 px | .png | PWA splash screen | Önerilen |
| 150×150 px | .png | Windows tile (msapplication) | Opsiyonel |
| SVG | .svg | Modern tarayıcılar (ölçeklenebilir) | Opsiyonel (ideal) |
| Format | Avantaj | Dezavantaj |
|---|
| .ico | Eski tarayıcı uyumu, çoklu boyut tek dosya | Büyük dosya, modern değil |
| .png | Şeffaf arka plan, yaygın destek | Her boyut ayrı dosya |
| .svg | Sonsuz ölçekleme, küçük dosya, dark mode desteği | IE/eski tarayıcıda yok |
4. Favicon Tasarım İlkeleri
- Basitlik: 16×16 pikselde detay kaybolur — logo yerine sembol veya harf kullanın
- Kontrast: Açık/koyu arka planlarda görünür olsun — hem beyaz hem koyu sekmede test edin
- Renk: Marka renginizi kullanın — tutarlılık ve tanınırlık
- Şeffaf arka plan: PNG ve SVG'de şeffaf arka plan — her yüzeyde temiz görünüm
- Dark mode: SVG ile prefers-color-scheme desteği — koyu temada da görünür
- Metin kullanmayın: 16 pikselde metin okunamaz — harf veya sembol tercih edin
- Test edin: Farklı tarayıcı, mobil ve dark mode'da test edin
5. Web Sitesine Ekleme
Temel HTML Kodu
<!-- Temel favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- PNG favicon (modern tarayıcılar) -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- SVG favicon (ölçeklenebilir + dark mode) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Web manifest (PWA) -->
<link rel="manifest" href="/site.webmanifest">
<!-- Windows tile -->
<meta name="msapplication-TileColor" content="#1a1a2e">
<meta name="theme-color" content="#1a1a2e">
| Platform | Dosya Yeri | Not |
|---|
| HTML (statik site) | Kök dizinde /favicon.ico + head'e link tag | En basit yöntem |
| WordPress | Görünüm → Özelleştir → Site Kimliği | 512×512 PNG yükleyin |
| Shopify | Ayarlar → Temalar → Tema Ayarları → Favicon | 32×32 PNG yükleyin |
| Next.js | /app/favicon.ico veya /public/favicon.ico | Metadata API ile otomatik |
| React (CRA/Vite) | /public/favicon.ico + index.html link | Build sırasında kopyalanır |
| Wix / Squarespace | Ayarlar → Favicon bölümü | Görsel yükleme paneli |
Profesyonel E-Ticaret Sitenizi Beekod ile Kurun
Favicon, SEO, meta tag ve tüm teknik detaylar dahil — profesyonel e-ticaret altyapısı.
Ücretsiz Deneyin
6. Favicon Oluşturma Araçları
| Araç | Fiyat | Özellikler |
|---|
| RealFaviconGenerator.net | Ücretsiz | Tüm boyut + platform, HTML kodu, önizleme, en kapsamlı |
| Favicon.io | Ücretsiz | Metin, emoji veya görsel → favicon, ICO+PNG paket |
| Favicon.cc | Ücretsiz | Piksel piksel çizim, animasyonlu favicon, basit |
| Canva | Ücretsiz / Pro | Grafik tasarım → PNG dışa aktarma → favicon'a dönüştürme |
| Figma | Ücretsiz / Pro | Profesyonel tasarım, SVG/PNG dışa aktarma |
| Adobe Illustrator | Ücretli | Vektör tasarım, SVG çıktı, profesyonel |
| ICO Convert | Ücretsiz | PNG → ICO dönüştürme, çoklu boyut seçimi |
Adım Adım: RealFaviconGenerator ile Favicon Oluşturma
- Görsel hazırlayın: 512×512 px PNG (şeffaf arka plan ideal)
- realfavicongenerator.net adresine gidin
- "Select your Favicon image" butonuyla görseli yükleyin
- Platform önizlemeleri: iOS, Android, Windows, tarayıcı — her birini kontrol edin
- Renk ve ayarları yapın: Arka plan rengi, tema rengi
- "Generate your Favicons" butonuna tıklayın
- Paketi indirin: ZIP dosyasını kök dizine çıkarın
- HTML kodunu kopyalayın: <head> bölümüne yapıştırın
7. SEO ve Favicon
- Google arama: Favicon, mobil arama sonuçlarında site adının yanında görünür
- Tıklama oranı: Profesyonel favicon = daha güvenilir görünüm = daha yüksek CTR
- Google gereksinimleri: En az 48×48 px, kare format, robots.txt ile engellemeyin
- Indexleme: Google favicon'ı /favicon.ico veya link tag'den bulur — ikisini de kullanın
- Değişiklik: Favicon değiştiğinde Google güncellemeyi haftalar içinde yansıtır
8. Dark Mode Desteği (SVG)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
circle { fill: #1a1a2e; }
@media (prefers-color-scheme: dark) {
circle { fill: #f5c542; }
}
</style>
<circle cx="16" cy="16" r="14"/>
</svg>
SVG favicon ile koyu modda otomatik renk değişimi sağlayabilirsiniz — modern ve kullanıcı dostu.
9. Sık Yapılan Hatalar
| Hata | Sonuç | Çözüm |
|---|
| Favicon eklememek | Boş/generic ikon, güvensiz görünüm | Mutlaka favicon ekleyin |
| Çok detaylı tasarım | 16px'de bulamaç görünüm | Basit, sembolik ikon kullanın |
| Sadece .ico kullanmak | Mobil ve PWA'da görünmez | ICO + PNG + Apple Touch Icon |
| Büyük dosya boyutu | Yavaş yükleme | Optimize edin — favicon max 10-20 KB |
| Robots.txt ile engellemek | Google arama sonuçlarında görünmez | Favicon yolunu robots.txt'te izin verin |
| Dark mode'da görünmez | Koyu sekmede kaybolur | SVG + prefers-color-scheme kullanın |
| Cache sorunu | Eski favicon görünmeye devam eder | Dosya adına versiyon ekleyin (?v=2) |
Sonuç
Favicon, küçük ama etkili bir marka aracıdır. Profesyonel bir favicon ile tarayıcı sekmelerinde, Google arama sonuçlarında ve mobil cihazlarda markanızı tanınır kılarsınız. RealFaviconGenerator veya Favicon.io gibi ücretsiz araçlarla dakikalar içinde tüm platformlar için favicon paketinizi oluşturabilirsiniz.
