Favicon HTML hoạt động ổn định không chỉ nhờ một thẻ đặc biệt. Nó cần bộ tệp nhỏ truy cập được và các liên kết đặt trong head. Quy trình này đáp ứng thẻ hiện đại, trình duyệt cũ và lối tắt trên di động mà không tạo hàng loạt phiên bản lỗi thời.
Chuẩn bị các tệp
Bắt đầu bằng biểu tượng vuông vẫn dễ nhận diện khi rất nhỏ. Đặt favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest và các tệp PNG được manifest tham chiếu vào thư mục công khai phục vụ ở thư mục gốc tên miền.
Đường dẫn như /favicon.svg là tuyệt đối tính từ tên miền. Vì vậy nó vẫn đúng ở /products hoặc /blog/article, khác với favicon.svg có thể được phân giải tương đối theo trang hiện tại.
Thêm các phần tử vào head
Khai báo SVG trước với rel icon và type image/svg+xml, rồi ICO với rel icon và sizes any. Thêm rel apple-touch-icon cho iOS và rel manifest để cài ứng dụng web.
type phải khớp tệp thực sự được phục vụ. Đừng đổi tên PNG thành .ico: nội dung và phần đầu phải dùng định dạng ICO.
| Mục đích | Quan hệ | Tệp |
|---|---|---|
| Trình duyệt hiện đại | icon | /favicon.svg |
| Tương thích | icon | /favicon.ico |
| Màn hình chính iOS | apple-touch-icon | /apple-touch-icon.png |
| Ứng dụng web | manifest | /site.webmanifest |
Triển khai mà không làm hỏng đường dẫn
Mở trực tiếp từng URL tệp sau khi triển khai. Phản hồi phải là ảnh hoặc manifest với mã trạng thái thành công, không phải trang HTML đăng nhập hay 404 được trả về cùng mã gây hiểu nhầm.
Nếu trang web nằm trong thư mục con, hãy điều chỉnh đường dẫn hoặc đường dẫn gốc công khai. Kiểm tra trang cuối cùng trong công cụ nhà phát triển: trình duyệt phải yêu cầu đúng các URL dự kiến mà không chuyển hướng sang máy chủ khác.
Xác minh kết quả
Tải lại với bộ nhớ đệm bị tắt và kiểm tra các phần tử link trong DOM đã tạo. Sau đó thử thẻ trình duyệt, dấu trang và nếu cần, thêm trang web vào màn hình chính thiết bị thật.
Favicon trong kết quả tìm kiếm còn tuân theo quy tắc và lịch thu thập dữ liệu của công cụ tìm kiếm. Vì vậy biểu tượng hiển thị trong trình duyệt không đảm bảo kết quả tìm kiếm cập nhật ngay.
Nguồn chính thức
Câu hỏi thường gặp
Phần tử favicon có đặt trong body không?
Không. Các phần tử link mô tả biểu tượng và manifest phải nằm trong head của tài liệu.
Chỉ favicon.ico ở thư mục gốc có đủ không?
Đó là phương án dự phòng hữu ích, nhưng không mô tả biểu tượng Apple Touch hay biểu tượng cài đặt trong manifest. Hãy khai báo các định dạng cho những mục đích đó.
Vì sao dùng đường dẫn bắt đầu bằng /?
Đường dẫn này bắt đầu từ thư mục gốc tên miền, tránh để trang lồng sâu tìm tệp trong thư mục riêng của nó.