Kısa cevap: Bir favicon; tarayıcı sekmeleri ve Windows kısayolları için .ico içinde 16×16, 32×32 ve 48×48 piksel, iOS'taki Apple Touch Icon için 180×180 piksel, Android Chrome ve Progressive Web App'ler için PNG olarak 192×192 ve 512×512 piksel içermelidir. Bu altı boyut modern bağlamların tamamını kapsar — 16 boyutun tamamını gösteren tablo hemen aşağıda.
Favicon, "favorite icon" ifadesinden geliyor — tarayıcıların yer imleriyle birlikte sakladığı ikon. Bugün kavram bunun çok ötesine geçti: favicon tarayıcı sekmelerinde, adres çubuğunda, masaüstü kısayollarında, iOS ve Android telefonların ana ekranında, Google sonuçlarında ve Progressive Web App (PWA) ikonu olarak görünüyor. Her bağlam farklı bir boyut istiyor.
En yaygın hata, yalnızca 16×16 piksellik bir favicon.ico dosyası oluşturup işi bitmiş saymaktır. Retina bir monitörde ya da iPhone'da bu ikon bulanık görünür. Çözüm, boyutların tamamını kapsayan bir set üretmek — kulağa zahmetli geliyor, ama doğru araçla saniyeler sürüyor.
.ico dosyası nedir ve ne zaman kullanılır
.ico, Microsoft'un 90'lı yıllarda ortaya çıkardığı özgün favicon biçimidir. Özel bir niteliği var: tek bir dosyanın içinde birden fazla boyut taşıyabilir — örneğin 16×16 ile 32×32'yi aynı anda. Tarayıcı her bağlam için en uygun boyutu kendisi seçer.
favicon.ico 2026'da hâlâ belirli bir nedenle gerekli: eski tarayıcılar ve bazı arama robotları sitenin kökündeki /favicon.ico dosyasına kendiliğinden erişmeye çalışır. Dosya yoksa sunucu günlüklerinde gereksiz bir 404 hatası birikir. Bu yüzden her şey için modern PNG kullansanız bile kökte bir favicon.ico bulundurmanız önerilir.
Favicon boyutlarının tam tablosu
Eksiksiz bir faviconun 2026'da kapsaması gereken bütün boyutlar şöyle:
| Boyut | Biçim | Nerede kullanılır |
|---|---|---|
| 16 × 16 px | .ico / PNG | Tarayıcı sekmesi (varsayılan) |
| 32 × 32 px | .ico / PNG | Masaüstü kısayolu (Windows), HiDPI ekranlarda sekmeler |
| 48 × 48 px | .ico / PNG | Windows Gezgini kısayolu |
| 57 × 57 px | PNG | iPhone (iOS 1–6, Retina olmayan ekranlar) |
| 60 × 60 px | PNG | iPhone (iOS 7+, Retina olmayan ekranlar) |
| 72 × 72 px | PNG | iPad (iOS 1–6, Retina olmayan ekranlar) |
| 76 × 76 px | PNG | iPad (iOS 7+, Retina olmayan ekranlar) |
| 96 × 96 px | PNG | Chrome kısayolu (Android) |
| 114 × 114 px | PNG | iPhone Retina (iOS 1–6) |
| 120 × 120 px | PNG | iPhone Retina (iOS 7+) |
| 144 × 144 px | PNG | iPad Retina (iOS 1–6), Windows 8 kutucuğu |
| 152 × 152 px | PNG | iPad Retina (iOS 7+) |
| 167 × 167 px | PNG | iPad Pro (iOS 9+) |
| 180 × 180 px | PNG | iPhone 6 Plus ve daha yeni sürümler |
| 192 × 192 px | PNG | Android Chrome, PWA (manifest.json) |
| 512 × 512 px | PNG | Android Chrome açılış ekranı, yüksek çözünürlüklü PWA |
💡 İyi haber: her boyutu tek tek oluşturmanız gerekmiyor. ImageTools'un Favicon Oluşturucu aracı bütün bu dosyaları tek bir görselden otomatik üretir — birden fazla boyut içeren .ico ve tüm PNG'leri barındıran bir ZIP dahil.
Favicona kaynak olarak hangi görsel kullanılmalı
Kaynak görselin en az 512×512 piksel olması gerekir — gereken en büyük ölçü budur ve büyük bir görselden başlamak küçük boyutların kaliteli üretilmesini sağlar. Küçük bir görselden yola çıkmak, büyük boyutlarda bulanık ikonlar doğurur.
Girdi olarak kabul edilen biçimler
- Saydam arka planlı PNG — ideal. İkon, sekmenin ya da ana ekranın arka plan rengi ne olursa olsun temiz durur.
- Düz renk arka planlı PNG — arka plan rengi sitenizin tasarımıyla uyuyorsa iyi sonuç verir.
- JPG — kabul edilir, ama saydamlığı desteklemez.
- SVG — elinizde varsa en iyi başlangıç noktası. Vektörel olduğu için her boyutta kayıpsız.
Favicon tasarımı için ipuçları
Favicon çok küçük bir alan — 16×16 sürümünde toplam yalnızca 256 piksel var. Bu da çoğu kişinin göz ardı ettiği tasarım kısıtları getiriyor:
- Markanızın en yalın öğesini kullanın. Logonun tamamı 16 pikselde genellikle işe yaramaz. Yalnızca baş harfi, tek bir sembolü ya da ikonun sadeleştirilmiş bir sürümünü tercih edin.
- İnce yazıdan kaçının. 32 pikselin altındaki her yazı okunmaz hale gelir.
- Yüksek kontrast kullanın. Favicon açık duran onlarca sekmeyle yarışır — düşük kontrastlı bir ikon görsel olarak kaybolur.
- Düz renk arka plan çoğu durumda saydamdan daha iyi sonuç verir. Böylece ikon hem açık hem koyu sekmelerde öne çıkar.
- Sonucu 16 pikselde test edin ve işi ancak ondan sonra bitmiş sayın. 512 pikselde harika görünen bir tasarım 16 pikselde tanınmaz olabilir.
Faviconunuzu şimdi oluşturun — tüm boyutlar tek seferde
Görselinizi yükleyin; tarayıcılar, iPhone, Android ve PWA için gereken .ico ve tüm PNG'leri içeren bir ZIP indirin. Ücretsiz, kayıt gerekmez.
Ücretsiz favicon oluşturFavicon sitenize nasıl kurulur
Dosyaları ürettikten sonra bunları HTML'in <head> bölümünde tanımlamanız gerekir. 2026 için önerilen kodun tamamı şöyle:
<!-- Tarayıcılar için temel favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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 (iPhone ve iPad) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android ve PWA -->
<link rel="manifest" href="/site.webmanifest">favicon.ico dosyası sitenin kök dizininde, yani index.html ile aynı klasörde olmalıdır. Diğer PNG dosyaları kökte ya da bir alt klasörde durabilir; yeter ki HTML'deki yollar doğru olsun.
site.webmanifest dosyası
PWA'lar için ve Android Chrome'un ikonunuzu doğru tanıması için sitenin kökünde bir site.webmanifest dosyası gerekir. Temel içeriği şöyle:
{
"name": "Sitenizin Adı",
"short_name": "Site",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}📦 Favicon Oluşturucu'nun ZIP dosyası, yolları önceden doğru ayarlanmış site.webmanifest dosyasını da içerir — açıp dosyaları sitenizin kök dizinine yüklemeniz yeterli.
Belirli platformlarda kurulum
WordPress
WordPress'te faviconun adı "site simgesi"dir. Ayarlamak için Görünüm → Özelleştir → Site Kimliği yolunu izleyin ve "Site Simgesi Seç" düğmesine tıklayın. WordPress, yüklediğiniz görselden gereken boyutları kendisi üretir — en az 512×512 piksellik kare bir görsel kullanmanız yeterli.
Shopify
Çevrimiçi Mağaza → Tercihler bölümünde "Mağaza simgesi" alanına inin ve en az 512×512 piksellik kare bir PNG ya da JPG yükleyin.
Wix
Ayarlar → Marka Kimliği → Favicon yolunu izleyin. PNG ya da JPG biçiminde kare bir görsel kullanın.
Squarespace
Design → Tarayıcı Stili bölümündeki "Favicon" alanını kullanın. Önerilen: 100×100 piksellik kare PNG (gerisini Squarespace hallediyor).
Saf HTML/CSS ya da framework'ler
Üretilen bütün dosyaları projenin kök dizinine koyun ve yukarıda gösterilen <link> etiketlerini her sayfanın <head> bölümüne ekleyin — Next.js, Nuxt gibi bir framework kullanıyorsanız temel şablona eklemeniz yeterli.
Faviconun çalıştığını doğrulama
Kurulumdan sonra siteyi bir tarayıcı sekmesinde açın ve ikonun sekmede görünüp görünmediğine bakın. Hemen görünmüyorsa şunları deneyin:
- Tarayıcı önbelleğini temizleyin (Windows'ta Ctrl+Shift+R, Mac'te Cmd+Shift+R).
- Gizli sekmede açın — önbellek kullanmaz.
- Birkaç dakika bekleyin; tarayıcılar faviconları değişken sürelerle önbellekte tutar.
- HTML'deki dosya yolunun doğru olduğunu ve dosyanın sunucuda gerçekten bulunduğunu kontrol edin.