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.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
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.