favicon สำหรับ React
React จะไม่เรนเดอร์ <head> ให้คุณ — ไอคอน favicon อยู่ใน index.html วาง favicon.ico ของคุณลงใน /public และลิงก์มัน; การตั้งค่าที่ทันสมัยยังมาพร้อมกับรุ่น SVG และ PNG
Vite และ CRA ทั้งคู่ให้บริการ /public ที่รูท ดังนั้น /favicon.ico จึงเป็นพาธการค้นหาเริ่มต้น ไม่จำเป็นต้องมีการกำหนดค่าบันเดิล
สำหรับจอแสดงผล DPI สูงและพร้อมท์การติดตั้ง PWA ให้เพิ่ม 180×180 apple-touch-icon และ 512×512 PNG ไปที่ /public และลิงก์พวกมันใน index.html
วิธีการทำงาน
- 1
สร้าง .ico หลายขนาด
ใช้โปรแกรมสร้าง favicon ของเรากับแหล่งที่มาขนาด 512×512
- 2
วางลงใน /public
วาง favicon.ico, favicon.svg และ apple-touch-icon.png ไว้ตรงนั้น
- 3
ลิงก์ใน index.html
เพิ่ม <link rel="icon" href="/favicon.ico"> และ <link rel="icon" type="image/svg+xml" href="/favicon.svg">
ลองเลย
สร้าง favicon ที่พร้อมใช้งาน React
เครื่องมือสร้าง Faviconคำถามที่พบบ่อย
favicon ไปอยู่ที่ไหนในแอป Vite React+
/public/favicon.ico (และ /public/favicon.svg หากคุณต้องการตัวแปรเวกเตอร์)
ฉันจะเพิ่ม favicon ในโหมดมืดได้อย่างไร+
ใช้ SVG เดี่ยวกับบล็อก <style>@media (prefers-color-scheme: dark) {...}</style>
เหตุใด favicon ของฉันจึงไม่โหลดในรูปแบบ dev+
รีเฟรชแคชแท็บ เบราว์เซอร์แคช /favicon.ico ต่อต้นทางแม้จะโหลดซ้ำก็ตาม