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 hỗ trợ biểu tượng yêu thích là gì?


83

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:

  1. Những định dạng hình ảnh nào được hỗ trợ bởi trình duyệt nào.

  2. 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.


1
Nó cũng có thể đáng giá bao gồm cả 'biểu tượng yêu thích' cho iPhone ở đây; đó là nếu người dùng chọn thêm trang web của bạn vào màn hình chính của họ. Mã được sử dụng trong trường hợp này như sau: <link rel = "apple-touch-icon" href = "touch.png" /> Kích thước phải là 57x57 pixel. Ngoài ra, bạn có thể bỏ qua thẻ liên kết và chỉ cần đặt một tệp có tên 'apple-touch-icon.png' vào thư mục gốc của trang web của bạn.
khác nhau

Trong khi bạn đang ở đó, hãy đọc cái này: mathiasbynens.be/notes/touch-icons
Zach Lysobey

Lưu ý rằng bạn sẽ cần các biểu tượng lớn hơn cho màn hình iPad và iPhone retina. Xem hướng dẫn của Apple: developer.apple.com/library/IOs/#documentation/…
Mike Ottum

Câu trả lời:


108

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ả .ico.pngcác định dạng được gọi là favicon.icofavicon.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.

  1. Đặt 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.
  2. Đặt favicon.png trong thư mục phụ hình ảnh của tôi (chỉ để giữ mọi thứ ngăn nắp).
  3. Thêm HTML sau vào bên trong <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:

  • Loại MIME cho .icocác tệp đã được IANA đăng ký là image / vnd.microsoft.icon .
  • Internet Explorer sẽ bỏ qua 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 liệu tham khảo


2
OK, tôi đang gặp phải một ngày 'Microsoft đang làm tôi căng thẳng'. Tôi không thể làm cho điều này hoạt động trong Internet Explorer, mặc dù thực tế là nó hiển thị biểu tượng yêu thích cho trang web stackoverflow. Có bất kỳ cài đặt nào khác ảnh hưởng đến điều này, chẳng hạn như loại tài liệu?
belugabob

1
FYI - Tôi đã tìm ra câu trả lời. Nếu bạn tham khảo trang web qua localhost: 8080 / index.html , nó không hoạt động - nếu bạn sử dụng tên thực của máy ( machineName: 8080 / index.html ), mọi thứ hoạt động như bạn mong đợi. Tôi thậm chí không thể bắt đầu hiểu được hành vi này - có ai muốn thử không?
belugabob

2
Cập nhật - hành vi là do biểu tượng của trình duyệt vào bộ nhớ đệm. Xóa các tệp internet tạm thời sẽ khắc phục được điều này, nếu bạn cảm thấy hài lòng khi mất bộ nhớ cache.
belugabob

2
Sẽ gọn gàng hơn nếu đặt phiên bản IE của liên kết trong một nhận xét có điều kiện của IE?
EoghanM

9
32x32 ?? 16x16 không phải là tiêu chuẩn?
Eduardo Molteni

10

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" />

6

Để 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:

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. 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.


Liên kết đầu tiên đã lỗi thời, cần truy cập github.com/h5bp/html5-boilerplate/blob/master/src/doc/… ngay bây giờ. Tôi đã tự mình chỉnh sửa nhưng không đủ ký tự đã thay đổi: / Cảm ơn câu trả lời của bạn!
Brendan


4

IE6 không thể xử lý PNG một cách chính xác, được cảnh báo.


3

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 .


3

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

getfavicon.org

Ở đó 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!


Không còn hoạt động.
Roman Starkov

2

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.


Không, nó không phải là "favicon. *", Chỉ có rất ít định dạng hoạt động: ico, png, gif, jpeg và SVG. Xem en.wikipedia.org/wiki/Favicon#File_format_support .
WhyNotHugo

1

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/

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.