Temel Favicon Boyutları: 2025 Hızlı Karar Rehberi

İnternette 4 ila 20'den fazla farklı boyut öneren favicon boyut tavsiyeleriyle doludur. Çoğu web sitesinin hepsine ihtiyacı yoktur. Bu rehber, size tam olarak hangi favicon boyutlarının projeniz için önemli olduğunu göstererek zamandan tasarruf etmenizi ve karmaşıklığı azaltmanızı sağlar.

Gerçekten İhtiyacınız Olan 4 Favicon Boyutu

Binlerce web sitesini ve cihaz kullanım kalıplarını analiz ettikten sonra, kullanım senaryolarının %99'unu kapsayan temel favicon boyutları:

1. favicon.ico (Çoklu Boyut Kabı)

Boyut: 16x16 ve 32x32 piksel içerir Neden Gerekli: Evrensel tarayıcı desteği, otomatik algılama Dosya Formatı: ICO Kullanım: Tarayıcı sekmeleri, yer imleri, tarayıcı geçmişi

2. 180x180 piksel (Apple Touch İkon)

Boyut: 180x180 piksel Neden Gerekli: iOS ana ekranı, Safari yer imleri Dosya Formatı: PNG Kullanım: iPhone/iPad "Ana Ekrana Ekle"

3. 192x192 piksel (Android Chrome)

Boyut: 192x192 piksel Neden Gerekli: Android ana ekranı, Chrome kısayolları Dosya Formatı: PNG Kullanım: Android cihazlar, PWA minimum gereksinimi

4. 512x512 piksel (PWA ve Geleceğe Hazır)

Boyut: 512x512 piksel Neden Gerekli: Progressive Web App'ler, yüksek çözünürlüklü ekranlar Dosya Formatı: PNG Kullanım: PWA açılış ekranları, uygulama mağazaları

Hızlı Uygulama Kodu

İşte <head> etiketinizde ihtiyacınız olan minimal HTML:

<!-- Temel favicon kurulumu - cihazların %99'unu kapsar -->
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">

Bu kadar. Bu dört dosya faviconunuzu tüm modern cihaz ve tarayıcılarda doğru şekilde gösterecektir.

Ek Boyutlara Ne Zaman İhtiyaç Duyabilirsiniz

Progressive Web App mı Oluşturuyorsunuz?

Web manifest'inize bunları ekleyin:

144x144 - Windows kutucukları
384x384 - Ara PWA boyutu

Eski Sistemleri mi Destekliyorsunuz?

Şunları eklemeyi düşünün:

16x16 PNG - Çok eski tarayıcılar
32x32 PNG - Eski yüksek DPI ekranlar
48x48 - Windows masaüstü kısayolları

Mükemmel Kapsam mı İstiyorsunuz?

Tam set şunları içerir:

16x16, 32x32, 48x48, 64x64, 96x96, 128x128, 144x144, 152x152, 167x167, 180x180, 192x192, 256x256, 384x384, 512x512

Ancak unutmayın: her ek boyut, azalan getirilerle karmaşıklık ekler.

Boyut Karar Akış Şeması

Siteniz bir PWA mı?
├─ Evet → 4 temel boyut + manifest boyutlarını kullanın
└─ Hayır → Devam edin
   │
   Basit bir web sitesi/blog mu?
   ├─ Evet → Yalnızca favicon.ico kullanın
   └─ Hayır → Devam edin
      │
      Mobil trafik > %50 mi?
      ├─ Evet → 4 temel boyutun tamamını kullanın
      └─ Hayır → favicon.ico + 192x192 kullanın

Gerçek Dünya Boyut Karşılaştırması

Büyük web sitelerinin gerçekte ne kullandığı:

Web Sitesi	Boyut Sayısı	Kullanılan Gerçek Boyutlar
Google	3	favicon.ico, 192x192, 512x512
Facebook	4	favicon.ico, 180x180, 192x192, 512x512
Amazon	2	favicon.ico, 192x192
Netflix	3	favicon.ico, 192x192, 512x512
GitHub	5	favicon.ico, 180x180, 192x192, 512x512, SVG

Kalıbı fark ettiniz mi? Teknoloji devleri bile işi basit tutuyor.

Dosya Boyutu Kuralları

Daha iyi performans için faviconlarınızı hafif tutun:

Favicon Boyutu	Hedef Dosya Boyutu	Kabul Edilebilir Maksimum
favicon.ico	< 5 KB	15 KB
180x180 PNG	< 3 KB	8 KB
192x192 PNG	< 4 KB	10 KB
512x512 PNG	< 15 KB	30 KB

Kaçınılması Gereken Yaygın Boyut Hataları

Hata 1: Yalnızca Büyük Boyutlar Kullanmak

Problem: 512x512 simge 16x16'ya küçültüldüğünde bulanık görünür Çözüm: Her zaman gömülü küçük boyutlarla favicon.ico ekleyin

Hata 2: Mobil Boyutları Unutmak

Problem: Kullanıcılar ana ekrana eklerken genel simge görünür Çözüm: 180x180 (iOS) ve 192x192 (Android) boyutlarını ekleyin

Hata 3: Dosya Boyutlarını Aşırı Optimize Etmek

Problem: Aşırı sıkıştırılmış simgeler pikselleşmiş görünür Çözüm: Kalite ve dosya boyutu arasında denge kurun; faviconlar zaten önbelleğe alınır

Hata 4: Yanlış Boyutlar Kullanmak

Problem: Standart boyutlar yerine 200x200 veya 256x256 kullanmak Çözüm: Platforma uygun standart boyutlara bağlı kalın

Hızlı Test Kontrol Listesi

Favicon uygulamanızı test edin:

Masaüstü Tarayıcı Sekmesi - favicon.ico görünüyor mu?
Mobil Tarayıcı - Simge mobil Chrome/Safari'de görünür mü?
Ana Ekrana Ekle - Hem iOS hem Android'de deneyin
Yer İmi Testi - Yer imi ekleyin ve simgeyi kontrol edin
Paylaşım Önizlemesi - Bazı platformlar paylaşımlar için daha büyük boyutlar kullanır

Format vs Boyut: Hangisi Daha Önemli?

Boyut, faviconunuzun nerede görüneceğini belirler Format, uyumluluk ve kaliteyi belirler

Öncelik sırası:

Önce boyutları doğru ayarlayın
favicon.ico için ICO kullanın
Diğer tüm boyutlar için PNG kullanın
SVG'yi yalnızca temel ayarlar çalıştıktan sonra düşünün

5 Dakikalık Favicon Kurulumu

512x512 ana görsel ile başlayın
Herhangi bir favicon oluşturucu ile 4 temel boyutu oluşturun
HTML kodunu sitenizin head bölümüne ekleyin
Bir masaüstü ve bir mobil tarayıcıda test edin
Yayınlayın — fazla düşünmeyin

Boyuta Özel İpuçları

16x16 ve 32x32 için (favicon.ico)

İnce detaylar olmadan basit şekiller kullanın
Gerçek boyutta görünürlüğü test edin
1-2 karakter olmadıkça metin kullanmaktan kaçının

180x180 için (iOS)

Yuvarlatılmış köşeleri göz önünde bulundurarak tasarlayın (iOS bunları uygular)
Düz arka plan kullanın (saydamlık beyaza dönüşür)
İyi kontrast sağlayın

192x192 ve 512x512 için (Android/PWA)

Uyarlanabilir simgeler için saydamlığı destekleyin
Çeşitli Android başlatıcı arka planlarında test edin
Önemli öğeleri merkezde tutun

Boyuta Göre Performans Etkisi

Birden fazla favicon boyutu yüklemenin etkisi minimaldir:

4 temel boyut: ~25KB toplam, 4 istek
10 kapsamlı boyut: ~60KB toplam, 10 istek
20+ boyut: ~120KB toplam, genellikle gereksiz

Faviconlar agresif şekilde önbelleğe alınır, bu nedenle yalnızca ilk yükleme önemlidir.

Son Öneriler

Web sitelerinin %90'ı için: 4 temel boyutu kullanın. İşlem tamam.

PWA'lar için: Temel 4 boyuta 144x144 ve 384x384 ekleyin.

Maksimum uyumluluk için: Tüm boyutları oluşturmak için bir oluşturucu aracı kullanın, ancak uç durumları optimize ettiğinizi bilin.

Unutmayın: Her olası cihaz ve tarayıcı sürümünde mükemmel favicon kapsamı imkansızdır. Gerçek kullanıcılarınız için önemli olan boyutlara odaklanın, doğru şekilde uygulayın ve web sitenizin daha etkili yönlerine geçin.

En iyi favicon uygulaması, kod tabanınızı karmaşıklaştırmadan kullanıcılarınız için güvenilir şekilde çalışan uygulamadır. Temellerle başlayın, daha fazlasını yalnızca belirli bir ihtiyacınız olduğunda ekleyin.

Faviconunuzu farklı boyutlarda test etmeniz mi gerekiyor? Herhangi bir web sitesinin faviconunun çeşitli boyutlarda nasıl göründüğünü anında önizlemek için Favicon.im'i deneyin.