Biểu tượng yêu thích cho React
React không hiển thị <head> cho bạn — favicon tồn tại trong index.html. Thả favicon.ico của bạn vào /public và liên kết nó; các thiết lập hiện đại cũng cung cấp biến thể SVG và PNG.
Vite và CRA đều phục vụ /public ở thư mục gốc, vì vậy /favicon.ico là đường dẫn khám phá mặc định. Không cần cấu hình gói.
Đối với màn hình có độ phân giải cao và lời nhắc cài đặt PWA, hãy thêm apple-touch-icon 180×180 và PNG 512×512 vào /public và liên kết chúng trong index.html.
Cách hoạt động
- 1
Tạo tệp .ico nhiều kích thước
Sử dụng trình tạo favicon của chúng tôi với nguồn 512×512.
- 2
Thả vào / công khai
Đặt favicon.ico, favicon.svg và apple-touch-icon.png vào đó.
- 3
Liên kết trong index.html
Thêm <link rel="icon" href="/favicon.ico"> và <link rel="icon" type="image/svg+xml" href="/favicon.svg">.
Thử ngay
Xây dựng một favicon sẵn sàng cho React
Tạo FaviconCâu hỏi thường gặp
Favicon nằm ở đâu trong ứng dụng Vite React?+
/public/favicon.ico (và /public/favicon.svg nếu bạn muốn một biến thể vectơ).
Làm cách nào để thêm biểu tượng yêu thích ở chế độ tối?+
Sử dụng một SVG duy nhất với khối <style>@media (prefers-color-scheme: dark) {...</style>.
Tại sao favicon của tôi không tải được trong dev?+
Làm mới cứng tab. Bộ nhớ đệm của trình duyệt/favicon.ico trên mỗi nguồn gốc ngay cả khi tải lại.