Có phải tất cả các kích thước favicon được lấy từ máy chủ không?

Question

Nếu tôi chỉ định kích thước hình ảnh khác nhau cho PNG favicon như vậy:

<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png" /> 
<link rel="icon" type="image/png" sizes="24x24" href="/favicon-24px.png" /> 
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32px.png" /> 
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48px.png" /> 
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64px.png" /> 
<link rel="icon" type="image/png" sizes="256x256" href="/favicon-256px.png" /> 
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512px.png" /> 
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> 

Liệu mỗi một trong những tập tin này được lấy?

Answer 1

Theo specification, biểu tượng thích hợp nhất sẽ được sử dụng. Vì vậy, không cần phải lấy một cái gì đó mà không sử dụng.

Nếu có nhiều biểu tượng được cung cấp, tác nhân người dùng phải chọn biểu tượng thích hợp nhất theo loại, phương tiện và kích thước thuộc tính.

Answer 2

Trích dẫn từ http://www.jonathantneal.com/blog/understand-the-favicon/:

Làm thế nào để những trình duyệt PNG-favicon-tương thích xác định favicon nên được sử dụng? Firefox và Safari sẽ sử dụng favicon đến cuối cùng. Chrome dành cho máy Mac sẽ sử dụng bất kỳ favicon nào được định dạng ICO, nếu không, hình đại diện 32 × 32. Chrome dành cho Windows sẽ sử dụng favicon xuất hiện trước nếu nó là 16 × 16, nếu không thì ICO. Nếu không có tùy chọn nào trong số có sẵn, cả hai Chromes sẽ sử dụng bất kỳ số nào favicon xuất hiện trước, hoàn toàn trái ngược với Firefox và Safari. Thật vậy, Chrome dành cho Mac sẽ bỏ qua biểu tượng 16 × 16 và sử dụng phiên bản 32 × 32 nếu chỉ để giảm kích thước xuống 16 × 16 trên các thiết bị không phải võng mạc. Opera, không muốn tham gia, sẽ chọn từ bất kỳ biểu tượng nào có sẵn một cách ngẫu nhiên trong số các biểu tượng có sẵn . Tôi thích Opera thực hiện điều này.

Và đó mới chỉ là khởi đầu. Bây giờ là lúc để tìm hiểu về các cảnh báo Internet Explorer .

Trong khi IE8-10 sẽ hiển thị hình đại diện trên tải đầu tiên của trang, IE7 sẽ bỏ qua lần tải đầu tiên và hiển thị favicon trong lần truy cập lặp lại. Tệ hơn nữa, IE6 sẽ chỉ hiển thị hình đại diện khi trang web đã được đánh dấu và mở lại trong trình duyệt. IE6 cũng sẽ xóa favicon bất cứ khi nào bộ nhớ cache của trình duyệt bị xóa và sẽ không hiển thị lại favicon cho đến khi trang web được đánh dấu lại hoặc biểu tượng được tải lại bằng cách nào đó. Nếu IE6 và favicon có ý nghĩa rất lớn đối với bạn, bạn có thể buộc tải lại này bằng đoạn mã JavaScript nhỏ , tốt nhất nên được bao bọc trong một nhận xét có điều kiện là .

<!-- I "support" IE6 --> 
<!--[if IE 6]><script>(new Image).src="path/to/favicon.ico"</script><![endif]--> 

Answer 3

Trình duyệt sẽ chỉ nhận được một tập tin, nếu có.

Answer 4

Đáng ngạc nhiên, tôi quan sát thấy rằng một số trình duyệt đang tải tất cả favicon PNG, không chỉ phù hợp nhất:

• Chrome trên Windows
• Chrome trên Android
• Firefox trên Windows

Tôi đã không kiểm tra các cài đặt khác, như Firefox trên Android.

Tìm hiểu thêm về "all favicons are loaded" issue.