App Router có thể tạo phần tử biểu tượng từ tệp theo quy ước hoặc từ đối tượng metadata. Cả hai cách đều hợp lệ, nhưng kết hợp không có quy tắc rõ ràng dễ tạo các khai báo cạnh tranh nhau.
Chọn quy ước tệp
Đặt favicon.ico ở gốc thư mục app. Các tệp icon được hỗ trợ có thể nằm trong một phân đoạn đường dẫn, còn apple-icon mô tả biểu tượng dành cho thiết bị Apple.
Next.js phát hiện các tệp này, xác định thuộc tính cần thiết và thêm phần tử link tương ứng vào head. Biểu tượng đặt trong một phân đoạn áp dụng cho các đường dẫn thuộc phân đoạn đó.
| Tệp | Vị trí | Mục đích |
|---|---|---|
| favicon.ico | app/ | Biểu tượng dự phòng của trang web |
| icon.svg | Phân đoạn trong app | Biểu tượng trình duyệt |
| apple-icon.png | Phân đoạn trong app | Biểu tượng Apple |
| manifest.webmanifest | Phân đoạn trong app | Manifest để cài ứng dụng |
Dùng metadata cho đường dẫn cụ thể
Nếu tài nguyên nằm trong public hoặc máy chủ ảnh, khai báo metadata.icons trong layout hoặc trang. Chỉ định icon, apple và shortcut khi cần với các URL nhất quán.
Metadata từ phân đoạn con có thể thay thế các trường tổng hợp kế thừa từ cha. Kiểm tra head cuối cùng trên nhiều đường dẫn thay vì mặc định mọi mục của cha đều được gộp lại.
Với biểu tượng tạo theo yêu cầu, Next.js còn hỗ trợ icon.tsx hoặc icon.js. Hàm trả dữ liệu ảnh với kích thước và kiểu nội dung được chỉ định rõ. Chỉ nên dùng cách này cho thiết kế thực sự động: tệp tĩnh dễ lưu đệm, kiểm tra và phục vụ nhất quán qua các lần triển khai hơn.
Kết nối manifest và các biểu tượng
Tệp manifest tĩnh hoặc hàm manifest.ts có thể mô tả tên ứng dụng, màu sắc và biểu tượng cài đặt. URL biểu tượng trong manifest phải công khai và trỏ đến tệp có đúng kích thước đã khai báo.
Giữ vai trò manifest riêng với favicon thẻ trình duyệt: biểu tượng cài đặt 512×512 không tự thay thế icon.svg hay favicon.ico.
Kiểm tra trên bản sản xuất
Chạy bản dựng sản xuất, mở một đường dẫn ở mỗi phân đoạn bị ảnh hưởng và kiểm tra các phần tử link. Sau đó mở trực tiếp URL từng tài nguyên và xác nhận middleware không chặn chúng.
Nếu dùng basePath hoặc CDN, kiểm tra các URL được tạo trong môi trường đã triển khai. Hoạt động cục bộ không phải lúc nào cũng bộc lộ đường dẫn gốc công khai hay quy tắc viết lại bị sai.
Nguồn chính thức
Câu hỏi thường gặp
Có cần tự viết phần tử link không?
Không. Quy ước tệp hoặc metadata.icons có thể tạo chúng. Hãy chọn một nguồn cấu hình chính rõ ràng.
Nên đặt favicon.ico ở đâu?
Với App Router, quy ước favicon.ico được hỗ trợ ở gốc thư mục app.
manifest.ts có thay thế icon.svg không?
Không. Manifest mô tả biểu tượng cài đặt cùng các dữ liệu khác, còn icon.svg trực tiếp cung cấp biểu tượng trình duyệt.