Có một số cách để tạo biểu tượng yêu thích. Cách tốt nhất cho bạn phụ thuộc vào các yếu tố khác nhau:
- Thời gian bạn có thể dành cho nhiệm vụ này. Đối với nhiều người, điều này là "càng nhanh càng tốt".
- Những nỗ lực bạn sẵn sàng thực hiện. Giống như vẽ biểu tượng 16x16 bằng tay để có kết quả tốt hơn.
- Các ràng buộc cụ thể, như hỗ trợ một trình duyệt cụ thể với các thông số kỹ thuật kỳ lạ.
Phương pháp đầu tiên: Sử dụng trình tạo biểu tượng yêu thích
Nếu bạn muốn hoàn thành công việc tốt và nhanh chóng, bạn có thể sử dụng trình tạo favicon . Cái này tạo ra hình ảnh và mã HTML cho tất cả các trình duyệt chính trên máy tính để bàn và điện thoại di động. Tiết lộ đầy đủ: Tôi là tác giả của trang web này.
Ưu điểm của giải pháp như vậy: nó nhanh chóng và tất cả các cân nhắc về khả năng tương thích đã được giải quyết cho bạn.
Phương pháp thứ hai: Tạo favicon.ico (chỉ dành cho trình duyệt trên máy tính để bàn)
Như bạn đề xuất, bạn có thể tạo một favicon.icotệp có chứa ảnh 16x16 và 32x32 (lưu ý rằng Microsoft khuyến nghị 16x16, 32x32 và 48x48 ).
Sau đó, khai báo nó trong mã HTML của bạn:
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
Phương pháp này sẽ hoạt động với tất cả các trình duyệt máy tính để bàn, cũ và mới. Nhưng hầu hết các trình duyệt di động sẽ bỏ qua biểu tượng yêu thích.
Về đề xuất của bạn về việc đặt favicon.ico tệp trong thư mục gốc và không khai báo nó: hãy cẩn thận, mặc dù kỹ thuật này hoạt động trên hầu hết các trình duyệt, nhưng nó không đáng tin cậy 100%. Ví dụ: Windows Safari không thể tìm thấy nó (được cấp: trình duyệt này bằng cách nào đó không được dùng nữa trên Windows, nhưng bạn hiểu rồi). Kỹ thuật này rất hữu ích khi kết hợp với các biểu tượng PNG (cho các trình duyệt hiện đại).
Phương pháp thứ ba: Tạo favicon.ico, một biểu tượng PNG và một biểu tượng Apple Touch (tất cả các trình duyệt)
Trong câu hỏi của bạn, bạn không đề cập đến các trình duyệt di động. Hầu hết trong số họ sẽ bỏ qua favicon.icotệp. Mặc dù trang web của bạn có thể dành riêng cho các trình duyệt trên máy tính để bàn, nhưng rất có thể bạn không muốn bỏ qua các trình duyệt dành cho thiết bị di động.
Bạn có thể đạt được khả năng tương thích tốt với:
favicon.ico, xem ở trên.- Biểu tượng PNG 192x192 cho Android Chrome
- Biểu tượng Apple Touch 180x180 (dành cho iPhone 6 Plus; thiết bị khác sẽ thu nhỏ lại khi cần).
Khai báo chúng với
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">
Đây không phải là câu chuyện đầy đủ, nhưng nó đủ hay trong hầu hết các trường hợp.