Favicon (.ico) so với SVG
SVG là định dạng favicon thú vị nhất của thời kỳ hiện đại — vector, nhận biết chế độ tối và nhỏ. Nhưng nó không thể thay thế hoàn toàn .ico vào năm 2026. Đây là lý do và cách sử dụng cả hai.
SVG có quy mô vô hạn và hỗ trợ các truy vấn phương tiện ở chế độ tối bên trong chính tệp đó. SVG 1 KB đáp ứng mọi mật độ trên mọi trình duyệt hiện đại.
ICO là dự phòng phổ quát. Tất cả các phiên bản Safari cũ hơn, trình duyệt cũ và quy ước <code>/favicon.ico</code> URL trần vẫn phụ thuộc vào nó.
Thiết lập được đề xuất: gửi <code>favicon.ico</code> + <code>favicon.svg</code>. Các trình duyệt hỗ trợ SVG sẽ thích nó hơn; phần còn lại tự động quay trở lại .ico.
Cách hoạt động
- 1
Thiết kế hoặc xuất SVG
viewBox vuông, phần tử gốc đơn <svg>.
- 2
Tạo dự phòng .ico
Sử dụng FetchFavicon để phân loại SVG của bạn thành tệp .ico nhiều kích thước.
- 3
Liên kết cả hai
<link rel="icon" href="/favicon.ico"> + <link rel="icon" type="image/svg+xml" href="/favicon.svg">.
Thử ngay
Tạo cặp .ico + SVG
Chuyển đổi SVG sang PNGCâu hỏi thường gặp
Tôi có thể bỏ hoàn toàn .ico nếu tôi sử dụng SVG không?+
Không an toàn. Nhiều trình nhúng trên mạng xã hội, trình đọc RSS và các công cụ cũ vẫn yêu cầu /favicon.ico theo quy ước.
Trình duyệt nào hỗ trợ favicon SVG?+
Chrome 80+, Edge 80+, Firefox 41+, Safari 15+ và Dũng cảm. iOS Safari vẫn thích apple-touch-icon PNG hơn.
Favicon SVG có thể nhỏ đến mức nào?+
Dưới 1 KB cho dấu đơn sắc rõ ràng. Ngay cả những logo nhiều màu phức tạp cũng hiếm khi vượt quá 4 KB.