Biểu tượng yêu thích cho Vue.js
Ứng dụng Vue gửi nội dung tĩnh từ /public (Vite) hoặc /public (Vue CLI). Đặt favicon.ico ở đó và tham chiếu nó trong index.html — máy chủ nhà phát triển và bản dựng sản xuất phục vụ nó ở thư mục gốc của trang web.
Vite: bỏ favicon.ico vào /public/favicon.ico. Thêm <link rel="icon" href="/favicon.ico"> vào index.html bên trong <head>.
Đối với các bản dựng đã băm, cấp gốc /favicon.ico không nhận được hàm băm nội dung — lý tưởng cho các yêu cầu trình duyệt ổn định.
Vue CLI sử dụng cùng một quy ước/công khai. Thay thế public/favicon.ico mặc định bằng tệp nhiều kích thước của bạn.
Thêm liên kết PNG và apple-touch-icon cho thiết bị di động. Giữ đường dẫn tuyệt đối (/apple-touch-icon.png) để chế độ lịch sử vue-router không phá vỡ các tuyến lồng nhau.
Khi triển khai lên Netlify hoặc Vercel, hãy đảm bảo các tệp favicon được đưa vào đầu ra dist - chúng sao chép từ công khai/tự động.
Đối với vite-plugin-pwa, hãy khai báo các biểu tượng trong phần kê khai của các mục vite.config.ts — 192×192 và 512×512 PNG.
Cách hoạt động
- 1
Sao chép biểu tượng ra công khai/
favicon.ico, apple-touch-icon.png, favicon.svg tùy chọn.
- 2
Chỉnh sửa index.html
Thêm thẻ <link rel="icon"> và thẻ apple-touch-icon.
- 3
Xây dựng và triển khai
Xác nhận /favicon.ico trả về 200 khi sản xuất.
Thử ngay
Tạo nội dung favicon Vue
Tạo FaviconCâu hỏi thường gặp
Tại sao máy chủ dev Vue hiển thị logo Vite?+
Thay thế public/favicon.ico và khởi động lại máy chủ dev.
Các favicon SVG nằm ở đâu trong Vue?+
public/favicon.svg cộng với <link rel="icon" type="image/svg+xml" href="/favicon.svg"> trong index.html.
Bộ định tuyến vue có ảnh hưởng đến đường dẫn favicon không?+
Chỉ khi bạn sử dụng href tương đối - luôn sử dụng đường dẫn gốc / tương đối.