Favicon Generator - Text to Favicon.ico

Anında özel site simgeleri oluşturun; web siteleri, uygulamalar ve PWA'lar için mükemmel

Favicon'unuzu Oluşturun

SVG'yi etkinleştir

Web Sitenize Faviconlar Nasıl Kurulur?

Özel site simgeleri yükleyerek web sitenizin görünümünü tüm cihazlarda iyileştirin. Yeni oluşturulan favicon paketinizi entegre etmek için şu basit adımları izleyin:

  1. Favicon'unuzu Oluşturun: İstediğiniz metin, renk, şekil ve yazı tipiyle özel simgeler oluşturmak için Favicon Oluşturucumuzu kullanın. Favicon paketinizi indirmek için 'Favicon Oluştur'u tıklayın.

  2. İndirin ve Sıkıştırmayı Açın: Oluşturulduktan sonra favicon paketini indirin ve dosyaları web sitenizin kök dizinine çıkarın.

  3. HTML Kodu Ekle: Çeşitli cihazlar ve tarayıcılar arasında uyumluluğu sağlamak için aşağıdaki kodu HTML dosyanızın "head" bölümüne ekleyin:

<link rel="apple-touch-icon" sizes="57x57" href="/favicon-57x57.png" type="image/png" />
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60x60.png" type="image/png" />
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72x72.png" type="image/png" />
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114x114.png" type="image/png" />
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120x120.png" type="image/png" />
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144x144.png" type="image/png" />
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152x152.png" type="image/png" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png" type="image/png" />
<link rel="icon" sizes="16x16" href="/favicon-16x16.png" type="image/png" />
<link rel="icon" sizes="32x32" href="/favicon-32x32.png" type="image/png" />
<link rel="icon" sizes="96x96" href="/favicon-96x96.png" type="image/png" />
<link rel="icon" sizes="192x192" href="/favicon-192x192.png" type="image/png" />
<link rel="icon" sizes="512x512" href="/favicon-512x512.png" type="image/png" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#FFFFFF" />
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="/favicon-512x512.png" />

Favicon Oluşturucu Nasıl Kullanılır

  1. İstediğiniz metni girin (1-2 karakter).
  2. Renkleri, şekli ve yazı tipini özelleştirin.
  3. 'Favicon Oluştur' butonuna tıklayın.
  4. Favicon paketini indirin.
  5. Sağlanan kodu kullanarak uygulayın.

Oluşturulan Favicon Boyutları

Favicon oluşturucumuz, aşağıdaki önemli boyutlarda ikonlar oluşturur:

Yaygın Apple Touch İkon Boyutları:

  • 57x57px: iPhone ve iPod touch.
  • 60x60px: Yeni iPhone'lar için dokunmatik ikonlar.
  • 72x72px: iPad için ikonlar.
  • 76x76px: Retina ekranlı iPad.
  • 114x114px: Retina ekranlı iPhone.
  • 120x120px: Yeni iPhone'lar için Retina dokunmatik ikonlar.
  • 144x144px: Retina ekranlı iPad.
  • 152x152px: Retina ekranlı iPad.
  • 180x180px: iPhone 6+ ve yeni Retina ikonlar.

Genel İkon Boyutları:

  • 16x16px: Tarayıcı sekmeleri için favicons.
  • 32x32px: Standart favicon boyutu.
  • 48x48px: Windows kısayolları.
  • 64x64px: Windows kısayolları.
  • 96x96px: Chrome ve Android cihazlar.
  • 192x192px: Android cihazlar.
  • 512x512px: Yüksek çözünürlüklü ekranlar ve bazı İleri Web Uygulamaları (PWA) için ikonlar.

Ek Formatlar:

  • favicon.ico (32x32px): Eski sistemler ve tarayıcılarla maksimum uyumluluk için çoklu çözünürlük içeren bir ikon dosyası.
  • SVG Formatı: Eğer etkinleştirilmişse, paket ayrıca ölçeklenebilir vektör grafik ikonu (SVG) içerir, bu da farklı boyutlar ve cihazlar için idealdir.

Neden Birden Fazla Favicon Boyutu Önemlidir

Günümüzün çok cihazlı dünyasında, birden fazla favicon boyutuna sahip olmak çok önemlidir:

  • Tüm cihazlar ve tarayıcılarda uyumluluğu sağlar
  • Yüksek çözünürlüklü ekranlarda görsel netliği artırır
  • İleri Web Uygulamaları (PWA) için gereksinimleri karşılar
  • Tarayıcı sekmelerinde tanınırlığı artırır

Sıkça Sorulan Sorular