Biểu tượng yêu thích cho Nuxt
Nuxt 3 phục vụ các tệp tĩnh từ /public ở thư mục gốc của trang. Định cấu hình thẻ <link> trong nuxt.config.ts trong app.head.link để thiết lập favicon tập trung, thân thiện với SSR.
Đặt favicon.ico ở chế độ công khai/favicon.ico — Nuxt tự động phục vụ nó mà không cần cấu hình thêm.
Trong nuxt.config.ts, mở rộng app.head.link với các mục biểu tượng: { rel: 'icon', type: 'image/png', size: '32x32', href: '/favicon-32x32.png' }.
Chỉ sử dụng useHead() trong bố cục khi các biểu tượng thay đổi theo tuyến — hầu hết các trang web đều đặt biểu tượng chung một lần trong nuxt.config.
Đối với các mô-đun @nuxtjs/seo hoặc cấu hình trang web, hãy theo dõi trường favicon của chúng nếu có - nó bao bọc các thẻ liên kết giống nhau.
Nuxt Hình ảnh không xử lý favicon; tải kích thước cuối cùng lên public/.
Khi sử dụng lưu trữ tĩnh cài sẵn Nitro, hãy xác minh đường dẫn favicon tồn tại trong .output/public sau khi tạo nuxi.
Cách hoạt động
- 1
Thêm tập tin vào công khai/
Kích thước favicon.ico, PNG, SVG tùy chọn.
- 2
Định cấu hình app.head.link
Tập trung các liên kết biểu tượng trong nuxt.config.ts.
- 3
Tạo và kiểm tra HTML
Xem nguồn trên trang được triển khai để có thẻ chính xác.
Thử ngay
Xây dựng gói biểu tượng Nuxt của bạn
Trình tạo gói faviconCâu hỏi thường gặp
Nuxt vẫn hiển thị biểu tượng mặc định - tại sao?+
Xóa bộ nhớ đệm .nuxt, thay thế public/favicon.ico và khởi động lại máy chủ nhà phát triển.
Làm cách nào để thêm biểu tượng cảm ứng quả táo vào Nuxt 3?+
Thêm { rel: 'apple-touch-icon', size: '180x180', href: '/apple-touch-icon.png' } vào app.head.link.
SSR có trùng lặp thẻ favicon không?+
Tránh xác định cùng một liên kết trong cả nuxt.config và lệnh gọi useHead cấp trang.