Favicon Boyutları: 2025'te Gerçekten İhtiyacınız Olanlar

"favicon size" araması yaparsanız çelişkili sayılarla karşılaşırsınız: 16x16, 32x32, 48x48, 64, 180, 192, 256, 512. Bu listelerin çoğu on yıl önce yazılmış ve hiç güncellenmemiştir. Pratikte, modern bir site yaklaşık dört dosyaya ihtiyaç duyar ve hepsini favicon oluşturucu ile tek seferde yapabilirsiniz — tamamen tarayıcınızda çalışır, bu nedenle logonuz makinenizi asla terk etmez.

İşte her boyutun gerçekten ne için olduğu ve güvenle atlayabileceğiniz şeyler.

Önemli boyutlar

16x16 ve 32x32 — tarayıcı sekmeleri ve yer işaretleri

Bu klasik favicon'dur. 16x16, sık sık kullanılan sekmeler arasında göreceğiniz şey; 32x32 yüksek DPI ekranlarda, yer işaretleri çubuğunda ve bazı adres çubuğu kullanıcı arayüzlerinde kullanılır. Her ikisi de geleneksel olarak birden fazla çözünürlüğü aynı anda tutabilen tek bir favicon.ico dosyasında birleştirilir. Windows ayrıca masaüstü kısayolları için aynı .ico dosyasından 48x48 boyutunu alır, bu nedenle bunu dahil etmek neredeyse hiçbir maliyet getirmez.

180x180 — Apple dokunmatik ikonu

Birisi iPhone veya iPad'de "Ana Ekrana Ekle" seçeneğine dokunduğunda, Safari apple-touch-icon.png dosyasını 180x180 boyutunda arar. Burada yoksa, iOS sayfanızın ekran görüntüsünü alır ve bunun yerine bunu kullanır, bu berbat görünür. Bu tek PNG dosyası her mevcut iOS cihazını kapsar çünkü sistem gerektiği gibi ölçeklendirir.

192x192 ve 512x512 — Android ve PWA'lar

Android Chrome ve yüklenebilir web uygulamaları site.webmanifest dosyasından simgeler okur. 192, ana ekran simgesi; 512 açılış ekranı ve uygulama listeleri için kullanılır. Sitenizin yüklenebilir olmasını istiyorsanız, her ikisine de ihtiyacınız vardır.

SVG — isteğe bağlı ancak kullanışlı

Firefox ve Chrome, SVG favicon'u destekler; bu her boyutta keskin kalır ve dosya içindeki bir medya sorgusuyla koyu moda yanıt verebilir. Bu ek bir özelliktir, bir değiştirme değil — Safari ve eski tarayıcılar hala raster sürümleri isteyecektir.

Atlayabileceğiniz şeyler

64x64, 96x96, 128x128, tüm Windows karo görüntüleri ve düzine kadar eski apple-touch-icon-76x76 tarzı dosyalar. Bunlar çoğunlukla kaybolmuş cihazlar için gerekliydi. Yirmi simge dosyası göndermek deponuzu şişirir ve ölçülebilir hiçbir fayda sağlamaz.

HTML Kodu

Dosyaları site kökünüze koyun ve bunu <head> bölümüne ekleyin:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Ve manifest dosyasında:

"icons": [
  { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
  { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]

16 piksel için tasarım yapma

Zor kısım dışa aktarma değil, tam bir logonun 16x16'da bulanıklaşmasıdır. Yardımcı olan birkaç şey:

• Tüm logoyu değil bir parçayı kullanın. Bir harf, bir glif, bir şekil. Kelime işaretleri sekme boyutunda okunamaz.
• Kare şekilde başlayın. Kaynağınız geniş bir logoysa, önce onu kareye kırpın, böylece oluşturucu bunu boş alanla harfleme yapmaz.
• Kontrast yüksek tutun. İnce çizgiler kayboluyor. Katı şekiller hayatta kalır.
• Arka planı belirleyin. Şeffaf bir PNG, açık ve koyu tarayıcı arayüzlerine uyum sağlar; işaretiniz koyu rengse, bunun yerine katı renkli bir karo vermeyi düşünün. Yalnızca düz bir JPG'niz varsa, logonun arka planını saniyeler içinde kaldırabilirsiniz.
• Güvenli alan göz önünde bulundurun. Android simgeleri dairelere ve kavisli kareye maskeler, bu nedenle 512 çalışmanızın kenarından kabaca %10 doldurma bırakın.

Favicon'un arka planını sitenizin marka rengine ayarlarken, resim renk seçici mevcut bir ekran görüntüsünden tam hex değerini alacaktır — theme-color meta etiketi için de pratiktir.

Tüm seti aynı anda oluşturun

Hiçbir şey yüklemeyin: kare bir PNG veya SVG'yi ücretsiz tarayıcı tabanlı favicon oluşturucuya bırakın ve .ico, Apple dokunmatik simgesi ve 192/512 PNG'leri yerel olarak, kendi sekmenizde üretir. Sunucuya hiçbir şey gönderilmez, kaydolma yoktur ve yayınlanmamış logonuzun hiçbir kopyası başka birinin depo alanında kalmaz.

Sonra tarayıcınızı uzaklaştırın, sekmeye bakın ve tek önemli soruyu sorun: bu nedir söyleyebiliyor musunuz?