Biểu tượng yêu thích cho Nuxt
Nuxt phân phát các tệp tĩnh từ /public tại thư mục gốc của trang web của bạn, do đó /public/favicon.ico tự động trở thành /favicon.ico. Đối với biểu tượng nhiều kích thước hoặc SVG, hãy thêm thẻ liên kết qua nuxt.config.ts hoặc useHead() trong app.vue.
Quick answer
To add a favicon in Nuxt 3, place favicon.ico in /public (served at /favicon.ico), add link tags in nuxt.config.ts app.head if needed, deploy, and verify with the Favicon Checker — use the Favicon Generator to create the icon files first.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Tạo gói favicon của bạn với Favicon Generator — xuất favicon.ico, favicon.svg và apple-touch-icon.png từ nguồn 512×512. Thả chúng vào thư mục /public của dự án Nuxt của bạn.
Nuxt 3 phục vụ mọi thứ trong /public ở gốc tên miền mà không cần cấu hình bổ sung. Các trình duyệt yêu cầu /favicon.ico theo mặc định, vì vậy việc đặt tệp ở đó sẽ phù hợp với trường hợp phổ biến nhất.
Để kiểm soát rõ ràng mọi biến thể biểu tượng, hãy thêm thẻ liên kết trong nuxt.config.ts trong app.head.link — hoặc gọi useHead({ link: [...] }) trong app.vue. Cả hai cách tiếp cận đều đưa thẻ vào <head> của mỗi trang.
Sau khi triển khai, hãy mở URL sản xuất của bạn trong cửa sổ riêng tư và chạy Favicon Checker để xác nhận /favicon.ico và đường dẫn <link rel="icon"> của bạn trả về 200. Biểu tượng nhà phát triển được lưu trong bộ nhớ đệm là lý do phổ biến khiến favicon Nuxt không hiển thị sau khi triển khai.
Nếu biểu tượng tab hoạt động nhưng Google Search vẫn hiển thị một biểu tượng yêu thích trống, hãy xác minh rằng trang chủ trực tiếp của bạn liên kết với biểu tượng hình vuông có kích thước tối thiểu 48×48. Xem hướng dẫn yêu cầu về biểu tượng yêu thích của Google của chúng tôi để biết các quy tắc thu thập thông tin và kích thước.
Nuxt không tự động tạo các tệp .ico nhiều kích thước — bạn phải cung cấp chúng. Sử dụng các dự phòng PNG được liên kết trong app.head cho lời nhắc cài đặt PWA và các tab có độ phân giải cao.
Cách hoạt động
- 1
Generate favicon files
Use the Favicon Generator to export favicon.ico and PNG variants from a 512×512 logo.
- 2
Thêm vào /public
Sao chép favicon.ico (và favicon.svg, apple-touch-icon.png tùy chọn) vào thư mục Nuxt /public của bạn.
- 3
Cấu hình và xác minh
Thêm các mục app.head.link trong nuxt.config.ts nếu cần, triển khai rồi chạy Favicon Checker trên URL trực tiếp của bạn.
Thử ngay
Generate a Nuxt-ready favicon
Tạo FaviconCâu hỏi thường gặp
Làm cách nào để thêm biểu tượng yêu thích trong Nuxt 3?+
Đặt favicon.ico vào /public, sau đó tùy ý thêm thẻ <link rel="icon"> vào nuxt.config.ts dưới app.head.link hoặc qua useHead() trong app.vue.
Favicon đi đâu trong dự án Nuxt?+
Thư mục /public. Các tệp ở đó được cung cấp từ gốc miền của bạn — /public/favicon.ico có sẵn tại XXH1XX.
Tại sao favicon Nuxt của tôi không hiển thị?+
Nguyên nhân phổ biến: tệp không có trong /public, đường dẫn sai trong app.head, bộ đệm của trình duyệt từ nhà phát triển hoặc kiểm tra localhost thay vì URL đã triển khai. Kiểm tra trong một cửa sổ ẩn danh.
Tôi nên sử dụng nuxt.config.ts hay useHead() cho favicon?+
Hoặc hoạt động. nuxt.config.ts là tốt nhất cho các biểu tượng tĩnh trên toàn trang web; useHead() trong app.vue nếu các biểu tượng phụ thuộc vào trạng thái thời gian chạy hoặc logic trên mỗi tuyến đường.
Tôi có thể sử dụng favicon SVG trong Nuxt không?+
Có — đặt favicon.svg vào /public và thêm { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' } vào app.head.link.