Favicon Nasıl Oluşturulur? Tüm Boyutlar ve Formatlar

Favicon (favorites icon), web sitenizi tarayıcı sekmelerinde, yer imlerinde, arama sonuçlarında ve mobil cihazların ana ekranlarında temsil eden küçük ikondur. Küçük boyutuna rağmen marka tanınırlığı ve profesyonel görünüm açısından büyük öneme sahiptir. Doğru favicon yapılandırması, farklı platformlar ve cihazlar için birden fazla boyut ve format gerektirir.

Gerekli Favicon Boyutları

Modern web için gereken favicon boyutları şunlardır:

• 16x16 px: Tarayıcı sekmeleri (klasik favicon boyutu)
• 32x32 px: Tarayıcı sekmeleri (yüksek DPI ekranlar) ve masaüstü kısayolları
• 48x48 px: Windows site kısayolları
• 180x180 px: Apple Touch Icon (iOS ana ekran ikonu)
• 192x192 px: Android Chrome ana ekran ikonu
• 512x512 px: PWA (Progressive Web App) splash screen ve yükleme ekranı

Favicon Formatları

ICO Formatı

Geleneksel favicon formatıdır. Tek bir dosya içinde birden fazla boyut barındırabilir (16x16, 32x32, 48x48). Tüm tarayıcılarla tam uyumludur. Dezavantajı modern sıkıştırma yöntemlerini desteklememesidir.

PNG Formatı

Modern tarayıcıların çoğunda desteklenir ve ICO'ya göre daha iyi sıkıştırma sunar. Şeffaflık desteği vardır. Her boyut için ayrı dosya gerekir. HTML5 ile standart hale gelmiştir ve günümüzde en yaygın tercih edilen formattır.

SVG Formatı

Vektörel format olduğu için her boyutta mükemmel görüntü kalitesi sunar. Tek dosya tüm boyutlar için yeterlidir. prefers-color-scheme media query ile karanlık/aydınlık mod desteği sağlanabilir. Ancak tarayıcı desteği henüz tam değildir.

HTML Yapılandırması

Tüm platformları destekleyen eksiksiz bir favicon yapılandırması şöyle görünür:

<!-- Klasik favicon (ICO) -->
<link rel="icon" href="/favicon.ico" sizes="48x48">

<!-- Modern favicon (SVG) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web Manifest (Android/PWA) -->
<link rel="manifest" href="/site.webmanifest">

Apple Touch Icon

iOS cihazlarda siteniz ana ekrana eklendiğinde gösterilecek ikondur. 180x180 px boyutunda bir PNG dosyası olmalıdır. iOS otomatik olarak köşeleri yuvarlar, bu nedenle ikonunuzu kare olarak tasarlayın:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Web Manifest

Android cihazlar ve PWA'lar için web manifest dosyasında ikon boyutlarını tanımlarsınız:

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

SVG Favicon ile Karanlık Mod Desteği

SVG favicon kullanarak karanlık mod desteği ekleyebilirsiniz:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #1a1a2e; }
    text { fill: #e94560; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #e94560; }
      text { fill: #1a1a2e; }
    }
  </style>
  <rect width="32" height="32" rx="4"/>
  <text x="50%" y="50%" text-anchor="middle" dy=".35em"
    font-size="20" font-weight="bold">S</text>
</svg>

Favicon Tasarım İpuçları

• Basit tutun: 16x16 piksel çok küçüktür — karmaşık detaylar görünmez
• Kontrast kullanın: Faviconun farklı arka planlarda seçilebilir olmasını sağlayın
• Marka tutarlılığı: Logo veya marka rengini kullanarak tanınırlığı artırın
• Harf veya sembol: Tam logoyu sığdırmaya çalışmak yerine baş harf veya basit sembol kullanın
• Test edin: Faviconunuzun farklı tarayıcılarda ve boyutlarda nasıl göründüğünü kontrol edin

Favicon Araçlarını Kullanın

Profesyonel favicon setinizi hızlıca oluşturmak için Favicon Oluşturucu aracımızı kullanabilirsiniz. Mevcut bir PNG görseli ICO formatına dönüştürmek için ise PNG → ICO Dönüştürücü aracımız mevcuttur. Her iki araç da tüm gerekli boyutları otomatik olarak oluşturur.