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.
For a longer walkthrough with FAQ and troubleshooting, see our step-by-step tutorial.
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ó.