Bir favicon 16×16 piksel. Bu boyutta detay, renk geçişi, metin — bunların hiçbirinin önemi yok, çoğu zaten görünmez. Ama herhangi bir favicon kılavuzu açtığınızda karşılaştığınız liste şöyle bir şey: 16×16, 32×32, 48×48, 64×64, 96×96, 128×128, 180×180, 192×192, 256×256, 512×512. On farklı boyut. Neden bu kadarı?
Tek bir standart kurum bu boyutları belirlemedi. Masaüstü tarayıcılar, mobil işletim sistemleri ve PWA spesifikasyonları birbirine koordine olmadan ilerledi; her platform kendi ihtiyacını ayrı bir boyutla tanımladı. Sonuç ortada: tek ikonun onlarca boyutta var olması beklentisi.
Hepsini üretmek zorunlu değil. Neyin nerede kullanıldığını bilirseniz, gereksiz olanı baştan eleyebilirsiniz.
Boyut karmaşası nereden çıktı?
Favicon'un tarihi 1999'a dayanıyor ve o dönemde sorun yoktu: tek boyut yeterliydi, 16×16, ICO formatında. ICO formatının içine birden fazla boyutu yerleştirme özelliği var — bu yüzden standart zamanla genişledi ama yavaş ve dağınık bir şekilde.
Mobil tarayıcılar devreye girince ekran yoğunlukları (DPI) farklılaştı. Retina ekranlarda 16×16 bulanık görünüyor; tarayıcı 32×32 veya 48×48 talep etmeye başladı. Apple, iOS için ayrı bir karar aldı: "apple-touch-icon". Google, Android Chrome için PWA manifest'ine baktı. Her platform kendi tercihini ilan etti, kimse diğeriyle koordine olmak zorunda hissetmedi.
Bu nedenle güncel kılavuzlar çelişiyor gibi görünür. Gerçekte hepsi farklı bir platformdan konuşuyor.
Tarayıcıların gerçekte hangi boyutlara baktığı
Masaüstü tarayıcılar tab ikonu için genellikle 16×16 veya 32×32 ister. Firefox ve Chrome, mevcut boyutlar arasından en uygun olanı seçer; 32×32 varsa 16×16'yı atlayabilir. Yer imi (bookmark) görünümünde 32×32 tercih edilir. Windows'ta tarayıcı kısayolları bazen 48×48 veya 64×64 kullanır.
Bu boyutların tamamını ayrı dosyalarla sunmak yerine, ICO formatının çoklu boyut özelliğinden yararlanmak çok daha pratik. Tek bir favicon.ico içinde 16×16, 32×32 ve 48×48'i birlikte barındırabilirsiniz; tarayıcı hangisine ihtiyaç duyarsa onu seçer.
Şeffaf arka planlı PNG favicon kullanmak isteyenler — özellikle dark mode'da logo rengini korumak isteyenler — için durum biraz farklı. <link rel="icon" type="image/png" sizes="32x32" href="..."> ile açık boyut bildirimi yapmadan tarayıcının hangi dosyayı seçeceği garantili değildir. sizes attribute'u olmadan iki PNG favicon tanımladığınızda tarayıcı hangisini alacağına rastgele karar verebilir.
Mobil ve PWA için boyutlar
Burada iki ayrı senaryo var: ev ekranına ekleme ve PWA manifest ikonu. Bunları karıştırmamak gerekiyor.
iOS'ta bir siteyi ev ekranına eklemek için Apple 180×180 piksel ister. apple-touch-icon.png adıyla kök dizine koyarsanız cihaz otomatik bulur, ama <link rel="apple-touch-icon" sizes="180x180" href="..."> ile açık bağlantı vermek daha güvenli. Eski iOS sürümleri 120×120 veya 152×152 bekliyordu; 2025 itibarıyla bu cihazların payı ihmal edilebilir düzeyde. 180×180 yeterli.
PWA manifest.json için standart iki boyut zorunlu: 192×192 ve 512×512. İkisini de atlamayın.
- 192×192 → Android ev ekranı ikonu için minimum boyut
- 512×512 → Yükleme splash ekranı ve uygulama mağazası görünümü için
Bir de maskable icon kavramı var. Android bazı launcher'lar ikonu belirli bir şekle (daire, yuvarlatılmış kare) kırpar. Buna hazırlıklı olmak için tasarımın güvenli alanı — yani kesinlikle görünmesi gereken kısım — yüzey alanının merkezindeki yaklaşık %80'inde kalmalı; kenar bölgesi kırpılabilir. Tasarımınızda merkez yeterliyse aynı 512×512 dosyayı maskable olarak bildirebilirsiniz. Logo kenara taşıyorsa ayrı bir dosya hazırlamak gerekir; aksi hâlde Android homescreen'de ikonu yanlış kırpılmış halde görürsünüz.
Pratikte minimum favicon seti
Her boyutu üretmek zorunda değilsiniz. Tüm önemli platformları kapsayan minimum set beş dosyadan oluşur:
favicon.ico— 16×16, 32×32 ve 48×48 boyutlarını içerecek şekildefavicon.svg— Modern tarayıcılar için; boyutsuz, dark mode'a uyarlanabilirapple-touch-icon.png— 180×180icon-192.png— PWA manifest içinicon-512.png— PWA manifest için
64×64, 96×96, 128×128, 256×256 boyutları genellikle gereksiz. Eski Windows sürümleriyle uyumluluk için öneriliyordu; bugün üretmeye değmez. Kaynak dosyanız yüksek çözünürlüklü bir PNG veya SVG ise, tek bir görselden tüm gerekli favicon boyutlarını otomatik çıkartmak için Favicon Generator'ı kullanabilirsiniz. Çıktıda manifest.json bağlantıları da dahil geldiği için HTML'e manuel ekleme yükü ortadan kalkar.
SVG favicon: boyut sorununu kökten çözmek
SVG favicon tek dosya, sonsuz ölçeklenebilir. 16×16'da da 512×512'de de aynı netlikte görünür. Tarayıcı desteği artık oldukça geniş; Firefox, Chrome, Edge ve Safari'nin güncel sürümleri SVG favicon'u tanır.
Üstelik dark mode uyarlaması yapılabilir. SVG içine prefers-color-scheme media query gömerek tarayıcının sistem temasına göre ikon rengini otomatik değiştirebilirsiniz. Beyaz logolar koyu temada görünmez hale gelir — bu, ICO ve PNG favicon'ların çözemediği bir sorundur. SVG bunu doğrudan içinden halleder.
Tek kısıtlama: IE11 ve eski Edge sürümleri SVG favicon'u tanımaz. Bu kullanıcılar hedef kitlenizde varsa favicon.ico'yu paralelde bırakın. Büyük ihtimalle yoktur.
Boyutu etkileyen format ve dosya boyutu kararı
32×32 piksel bir PNG neredeyse sıfır ağırlığında — birkaç yüz byte. 512×512 ise tasarıma bağlı olarak 20–80 KB arasına çıkabilir. PWA manifest'indeki 512×512, splash ekranı sırasında tarayıcı tarafından talep edilir. Gereksiz yere büyük bırakmak anlamsız.
Bu nedenle 512×512 PNG dosyanızı yüklemeden önce sıkıştırmak iyi bir alışkanlık. Kalite gözle anlaşılmaz düzeyde kalırken dosya boyutu belirgin şekilde düşer. Özellikle PNG için lossless sıkıştırma makul bir seçenek; şeffaflık katmanı korunur, renk bozulması yaşanmaz.
JPEG formatında logo ya da ikon kaynağınız varsa, şeffaflık katmanı eklemeniz gerektiği durumlarda önce PNG'ye dönüştürmeniz gerekir. JPEG şeffaflığı desteklemez; beyaz ya da renkli bir arka planla kaydedilir. Favicon bağlamında bu çoğunlukla sorun çıkarır — özellikle koyu arka planlı tasarımlarda.
Favicon oluşturmanın geniş adımları — hangi HTML kodunun head'e ekleneceğinden ICO dosyasının nasıl hazırlandığına kadar — için favicon oluşturma rehberine bakabilirsiniz. Boyut kararını verdiğinizde geri kalanı teknik detay.
Kısaca: onlarca boyut üretmek değil, doğru beş dosyayı doğru platformlara sunmak yeterli. Tarayıcı neye ihtiyaç duyduğunu <link> etiketleri aracılığıyla anlar; gerisi zaman kaybı.