Favicon untuk React
React tidak memaparkan <head> untuk anda — favicon berada dalam index.html. Letakkan favicon.ico anda ke /public dan pautkannya; persediaan moden turut menyediakan varian SVG dan PNG.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Vite dan CRA kedua-duanya berkhidmat /awam pada akar, jadi /favicon.ico ialah laluan penemuan lalai. Tiada konfigurasi pengikat diperlukan.
Untuk paparan DPI tinggi dan gesaan pemasangan PWA, tambahkan 180×180 apple-touch-icon dan 512×512 PNG ke /public dan pautkannya dalam index.html.
Cara ia berfungsi
- 1
Hasilkan .ico berbilang saiz
Gunakan penjana favicon kami dengan sumber 512×512.
- 2
Turun ke / awam
Letakkan favicon.ico, favicon.svg dan apple-touch-icon.png di sana.
- 3
Pautan dalam index.html
Tambahkan <link rel="icon" href="/favicon.ico"> dan <link rel="icon" type="image/svg+xml" href="/favicon.svg">.
Cuba sekarang
Bina favicon sedia React
Penjana FaviconSoalan lazim
Ke mana perginya favicon dalam apl Vite React?+
/public/favicon.ico (dan /public/favicon.svg jika anda mahukan varian vektor).
Bagaimanakah cara menambah favicon mod gelap?+
Gunakan satu SVG dengan blok <style>@media (prefers-color-scheme: dark) {...}</style>.
Mengapa favicon saya tidak dimuatkan dalam dev?+
Muat semula tab dengan keras. Cache penyemak imbas /favicon.ico setiap asal walaupun merentasi muat semula.