React için site simgesi
React sizin için <head>'i oluşturmaz; favicon index.html'de bulunur. favicon.ico'inizi /public'e bırakın ve bağlayın; modern kurulumlar ayrıca SVG ve PNG varyantını da gönderir.
Vite ve CRA'nın her ikisi de kökte /public hizmeti verir, dolayısıyla /favicon.ico varsayılan keşif yoludur. Paketleyici yapılandırması gerekmez.
Yüksek DPI'lı ekranlar ve PWA kurulum istemleri için, /public'e 180×180 apple-touch-icon ve 512×512 PNG ekleyin ve bunları index.html'ye bağlayın.
Nasıl çalışır
- 1
Çok boyutlu bir .ico oluşturun
Favicon oluşturucumuzu 512×512 kaynakla kullanın.
- 2
/public'e bırakın
favicon.ico, favicon.svg ve apple-touch-icon.png'yi buraya yerleştirin.
- 3
index.html'deki bağlantı
<link rel='icon'' href='/favicon.ico'> ve <link rel'''icon'' type='image/svg+xml' href''/favicon.svg'>'i ekleyin.
Hemen deneyin
React'e hazır bir sık kullanılan simgesi oluşturun
Favicon OluşturucuSSS
Favicon bir Vite React uygulamasında nereye gider?+
/public/favicon.ico (ve vektörel bir değişken istiyorsanız /public/favicon.svg).
Karanlık mod favicon'unu nasıl eklerim?+
<style>@media (prefers-color-scheme: dark) {...</style> bloğuyla tek bir SVG kullanın.
Favicon'um neden geliştiriciye yüklenmiyor?+
Sekmeyi kalıcı olarak yenileyin. Tarayıcılar, yeniden yüklemelerde bile başlangıç başına /favicon.ico önbelleğe alır.
İlgili araçlar
Favicon Oluşturucu
Her cihaz ve tarayıcı için eksiksiz bir favicon paketi (ICO + PNG) oluşturun.
PNG'den ICO'ya Dönüştürücü
Windows ikonları, uygulama simgeleri ve web sitesi favicon'ları için ücretsiz online PNG'den ICO'ya dönüştürücü.
SVG'den PNG'ye Dönüştürücü
SVG vektör grafiklerini her çözünürlükte PNG olarak işleyin.