Biểu tượng yêu thích cho React

Trong cả Vite và Tạo ứng dụng React (CRA), các tệp tĩnh được đặt trong thư mục /public được cung cấp trực tiếp từ URL gốc mà không cần xử lý gói nào. Điều này có nghĩa là /public/favicon.ico có thể truy cập được tại https://yourdomain.com/favicon.ico, đây chính xác là đường dẫn mà trình duyệt thử đầu tiên cho favicon. Không cần trình tải webpack, plugin Vite hoặc cấu hình bản dựng để thiết lập .ico cơ bản.

Khi bạn tạo dự án Vite React mới với `npm create vite@latest`, giàn giáo đã đặt favicon.svg vào /public và tham chiếu nó trong index.html. Đây là điểm khởi đầu tốt, nhưng SVG mặc định là biểu tượng Vite chung. Thay thế nó bằng SVG của riêng bạn và thêm dự phòng .ico nhiều kích thước cho các trình duyệt không hỗ trợ favicon SVG.

Tạo khung ứng dụng React bao gồm favicon.ico trong /public theo mặc định. Để thay thế nó, chỉ cần ghi đè lên tệp bằng .ico nhiều kích thước của riêng bạn. CRA cũng bao gồm tệp kê khai.json trong /public — cập nhật các mục nhập mảng `icons` để trỏ đến các tệp PNG của riêng bạn (192×192 và 512×512). index.html trong /public đã có thẻ liên kết tệp kê khai được CRA chèn vào.

Tệp .ico nhiều kích thước vẫn là tệp quan trọng nhất. Các trình duyệt không hỗ trợ favicon SVG — phiên bản Safari cũ hơn, một số công cụ nhúng và tạo lối tắt Windows — tự động quay lại /favicon.ico. Một tệp .ico duy nhất gói các khung 16×16, 32×32, 48×48 và 64×64 để trình duyệt chọn độ phân giải phù hợp mà không cần thêm bất kỳ thẻ liên kết nào.

Đối với màn hình có độ phân giải cao (Retina), hãy thêm thẻ liên kết PNG rõ ràng bên cạnh .ico. `<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` yêu cầu trình duyệt sử dụng PNG trên màn hình retina trong đó biểu tượng 2x hiển thị sắc nét hơn khung .ico có cùng độ phân giải. Đặt cả .ico và PNG vào /public.

Favicon SVG cung cấp giải pháp phù hợp nhất cho tương lai cho các ứng dụng React. Một tệp SVG duy nhất hiển thị sắc nét ở bất kỳ kích thước tab nào và có thể điều chỉnh màu sắc của nó cho phù hợp với bảng màu của người dùng. Thêm `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` vào index.html. Các trình duyệt hỗ trợ favicon SVG thích nó hơn .ico; các trình duyệt không chỉ đơn giản chuyển sang thẻ liên kết tiếp theo.

Các favicon SVG ở chế độ tối rất mạnh mẽ trong các ứng dụng React vì đối tượng mục tiêu thường sử dụng các công cụ dành cho nhà phát triển và máy tính để bàn ở chế độ tối. Nhúng khối `<style>` bên trong SVG của bạn với `@media (prefers-color-scheme: dark) { :root { fill: white; } }` (được điều chỉnh theo cấu trúc biểu tượng của bạn). Tệp duy nhất này phục vụ cả chủ đề sáng và tối mà không có JavaScript hoặc thẻ bổ sung.

apple-touch-icon là bắt buộc nếu bất kỳ người dùng di động nào lưu ứng dụng React của bạn vào màn hình chính của họ. Đặt apple-touch-icon.png (180×180) vào /public và thêm `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>` vào index.html. Nếu không có điều này, iOS sẽ hiển thị ảnh chụp màn hình có độ phân giải thấp của ứng dụng thay vì biểu tượng thương hiệu của bạn trên màn hình chính.

Đối với các ứng dụng React được triển khai dưới dạng PWA, /public/manifest.json (hoặc site.webmanifest) của bạn phải bao gồm các mục biểu tượng ở kích thước 192×192 và 512×512. Các kích thước này điều khiển lời nhắc cài đặt trên màn hình chính Android và hộp thoại cài đặt Chrome PWA. favicon generator xuất ra cả PNG và mẫu tệp kê khai được điền sẵn mà bạn có thể thả trực tiếp vào /public.

Vấn đề định tuyến cho favicon trong quá trình triển khai React SPA. Đường dẫn /favicon.ico phải được máy chủ của bạn cung cấp trực tiếp, không bị bộ định tuyến React chặn. Các trang Vercel, Netlify và GitHub đều phục vụ nội dung /public ở thư mục gốc trước khi chuyển tới SPA. Nếu bạn lưu trữ trên máy chủ tùy chỉnh, hãy xác nhận rằng phần mềm trung gian tệp tĩnh của bạn chạy trước tuyến tổng hợp phục vụ XXH4XX.

Trong quá trình phát triển với `npm run dev`, Vite tự động tải lại hầu hết các thay đổi nhưng những thay đổi của favicon đôi khi yêu cầu làm mới cứng trình duyệt thủ công. 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 máy chủ nhà phát triển. Để buộc làm mới trong quá trình phát triển, hãy làm mới cứng (Ctrl+Shift+R) hoặc nối thêm chuỗi truy vấn như `/favicon.svg?v=2` vào thẻ liên kết của bạn tạm thời.

Trong thiết lập hiển thị phía máy chủ (ví dụ: React với máy chủ Express tùy chỉnh), bạn phải xác nhận phần mềm trung gian express.static() phục vụ /public trước trình xử lý React SSR. Nếu trình xử lý SSR bắt được tất cả các yêu cầu trước tiên, /favicon.ico sẽ được React hiển thị và trả về HTML thay vì tệp ICO nhị phân, phá vỡ hoàn toàn favicon.

Thiết lập Monorepo với nhiều ứng dụng React cần quản lý favicon cẩn thận. Thư mục /public của mỗi ứng dụng đều có biểu tượng yêu thích riêng. Nếu bạn chia sẻ các biểu tượng giữa các ứng dụng, hãy cân nhắc việc giữ một thư mục biểu tượng nguồn tin cậy duy nhất ở thư mục gốc monorepo và sao chép các tệp vào từng /public trong bước xây dựng. Các công cụ như `cp` trong tập lệnh xây dựng hoặc plugin đồng bộ hóa nội dung chuyên dụng giúp chúng được đồng bộ hóa.

Sau khi triển khai, hãy sử dụng favicon tester để xác minh tất cả các biến thể favicon đều có thể truy cập công khai. Nhập URL sản phẩm của bạn và kiểm tra xem favicon.ico, favicon.svg, apple-touch-icon.png và PNG trong bảng kê khai của bạn đều phân giải chính xác. Điều này loại trừ việc phân phát tệp tĩnh bị định cấu hình sai hoặc các đường dẫn hoạt động trong nhà phát triển nhưng bị gián đoạn trong quá trình sản xuất.