Cách tốt nhất hiện nay để có được biểu tượng yêu thích hiển thị trong tất cả các trình duyệt hiện hỗ trợ biểu tượng đó là gì?
Vui lòng bao gồm:
Những định dạng hình ảnh nào được hỗ trợ bởi trình duyệt nào.
Những dòng nào cần thiết ở những vị trí nào cho các trình duyệt khác nhau.
Câu trả lời:
Tôi đi đến một phương pháp tiếp cận thắt lưng và niềng răng ở đây.
Tôi tạo ra một biểu tượng 32x32 ở cả .icovà .pngcác định dạng được gọi là favicon.icovà favicon.png. Tên biểu tượng không thực sự quan trọng trừ khi bạn đang xử lý các trình duyệt cũ hơn.
favicon.icotại gốc trang web của bạn để hỗ trợ các trình duyệt cũ hơn (tùy chọn và chỉ phù hợp với các trình duyệt cũ hơn.<head>phần tử.<link rel = "icon" href = "/ images / favicon.png" type = "image / png" /> <link rel = "biểu tượng lối tắt" href = "/ favicon.ico" />
Xin lưu ý rằng:
.icocác tệp đã được IANA đăng ký là image / vnd.microsoft.icon .typethuộc tính cho mối quan hệ biểu tượng lối tắt và đây là trình duyệt duy nhất hỗ trợ mối quan hệ này, nó không cần được cung cấp.Tôi sử dụng định dạng .ico và đặt hai dòng sau trong <head>phần tử:
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Để 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:
(57px*57px)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.
Favicon phải là tệp .ico để hoạt động bình thường trên tất cả các trình duyệt.
Các trình duyệt hiện đại cũng hỗ trợ ảnh PNG và GIF.
Tôi thấy rằng nói chung cách dễ nhất để tạo một cái là sử dụng một dịch vụ web miễn phí có sẵn như favicon.cc .
Ngoài ra còn có một trang web nơi bạn có thể kiểm tra cách tạo biểu tượng yêu thích của bất kỳ trang nào
Ở đó bạn có thể xem hướng dẫn về cách tạo biểu tượng yêu thích, các loại hình ảnh và độ phân giải, rất hay!
Có một favicon.*trong thư mục gốc của bạn được tự động phát hiện bởi hầu hết các trình duyệt. Bạn có thể đảm bảo nó được phát hiện bằng cách sử dụng:
<link rel="icon" type="image/png" href="/path/image.png" />
Cá nhân tôi sử dụng hình ảnh .png nhưng hầu hết các định dạng sẽ hoạt động.
Câu trả lời cho câu hỏi này đã trở nên phức tạp đến mức cách tốt nhất là chỉ cần sử dụng một công cụ như RealFaviconGenerator, cho phép bạn tải lên png / jpg và sau đó tạo biểu tượng yêu thích và mã để bao gồm tất cả các nền tảng cho bạn: https: // realfavicongenerator. mạng lưới/