Để cũng hỗ trợ các biểu tượng cảm ứng cho máy tính bảng và điện thoại thông minh, tôi thích cách tiếp cận của HTML5Boilerplate
Thông tin thêm về các biểu tượng cảm ứng có thể được tìm thấy trong bài viết này .
Với tình trạng hỗ trợ trình duyệt hiện tại, bạn thậm chí không phải thêm thẻ HTML cho biểu tượng yêu thích trong tài liệu của mình. Các trình duyệt sẽ tự động tìm kiếm danh sách các tệp, hãy xem ví dụ này cho iOS:
Nếu không có biểu tượng nào được chỉ định trong HTML, iOS Safari sẽ tìm kiếm trong thư mục gốc của trang web để tìm các biểu tượng có tiền tố là apple-touch-icon hoặc apple-touch-icon-precomposed. Ví dụ: nếu kích thước biểu tượng thích hợp cho thiết bị là 57 × 57 pixel, iOS sẽ tìm kiếm tên tệp theo thứ tự sau:
- apple-touch-icon-57x57-precomposed.png
- apple-touch-icon-57x57.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
Lời khuyên của tôi là không bao gồm biểu tượng yêu thích trong tài liệu của bạn, nhưng hãy chuẩn bị sẵn danh sách các tệp trong trang web gốc:
- apple-touch-icon-114x114-precomposed.png
- apple-touch-icon-144x144-precomposed.png
- apple-touch-icon-57x57-precomposed.png
- apple-touch-icon-72x72-precomposed.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
(57px*57px)
- favicon.ico
HiDPI (32x32px)
Khi bạn tải xuống một mẫu từ html5boilerplate.com, tất cả đều được bao gồm, bạn chỉ cần thay thế chúng bằng các biểu tượng của riêng mình.