Cách thêm Favicon vào HTML
Việc thêm biểu tượng yêu thích vào trang HTML đơn giản chỉ là thay đổi một dòng — nhưng thiết lập hiện đại, hoàn chỉnh có sáu dòng và bao gồm iOS, Android, chế độ tối và cài đặt PWA.
Muốn hướng dẫn từng bước? Cách thêm Favicon trong HTML
Thẻ duy nhất mà mọi trình duyệt đều tôn trọng là <link rel="icon" href="/favicon.ico">. Thả favicon.ico vào thư mục gốc của trang web của bạn và bạn đã hoàn thành được 80%.
20% còn lại — các biến thể apple-touch-icon, PNG, SVG có hỗ trợ chế độ tối và bảng kê khai web — là những gì phân biệt biểu tượng mặc định với trải nghiệm thương hiệu bóng bẩy.
Cách hoạt động
- 1
Tạo gói favicon của bạn
Sử dụng trình tạo gói FetchFavicon - tạo ra mọi tệp bạn cần cộng với đánh dấu sẵn sàng dán.
- 2
Thả tập tin vào thư mục gốc của trang web
favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, site.webmanifest.
- 3
Dán đoạn mã vào <head>
Sáu thẻ <link> + một <meta name="theme-color">.
Thử ngay
Lấy đoạn mã HTML
Tạo FaviconCâu hỏi thường gặp
Thẻ <link> đi đâu?+
Bên trong <head>, ở mọi nơi - thứ tự không quan trọng miễn là chúng đến trước </head>.
Tôi có cần cả .ico và PNG không?+
Đúng. .ico là dự phòng phổ biến; PNG hiển thị sắc nét nhất trên màn hình có độ phân giải cao.
Còn chế độ tối thì sao?+
Gửi một biến thể SVG nhúng truy vấn phương tiện lược đồ màu ưa thích bên trong khối <style> của nó.