Favicon untuk React
React tidak merender <head> untuk Anda — favicon ada di index.html. Masukkan favicon.ico Anda ke /public dan tautkan; pengaturan modern juga menyediakankan varian SVG dan PNG.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Vite dan CRA keduanya melayani /public di root, jadi /favicon.ico adalah jalur penemuan default. Tidak diperlukan konfigurasi bundler.
Untuk tampilan DPI tinggi dan perintah penginstalan PWA, tambahkan 180×180 apple-touch-icon dan 512×512 PNG ke /public dan tautkan keduanya di index.html.
Cara kerjanya
- 1
Hasilkan .ico multi-ukuran
Gunakan generator favicon kami dengan sumber 512×512.
- 2
Masuk ke /publik
Tempatkan favicon.ico, favicon.svg, dan apple-touch-icon.png di sana.
- 3
Tautan di index.html
Tambahkan <link rel="icon" href="/favicon.ico"> dan <link rel="icon" type="image/svg+xml" href="/favicon.svg">.
Coba sekarang
Buat favicon yang siap React
Pembuat FaviconFAQ
Ke mana perginya favicon di aplikasi Vite React?+
/public/favicon.ico (dan /public/favicon.svg jika Anda menginginkan varian vektor).
Bagaimana cara menambahkan favicon mode gelap?+
Gunakan satu SVG dengan blok <style>@media (prefers-color-scheme: dark) {...}</style>.
Mengapa favicon saya tidak dapat dimuat di dev?+
Segarkan tab secara paksa. Cache browser /favicon.ico per asal bahkan saat memuat ulang.