tôi asked a similar question về favicon và sau một vài liên kết được cung cấp tôi đã đưa ra một solution cho nhiều kích cỡ vv
tôi sử dụng đoạn mã sau trong <head> của trang web của tôi:
<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- IE 10+ "Metro" Tiles - 144x144 pixels in size icon should be transparent -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">
<!-- Touch Icons - iOS and Android 2.1+ 152x152 pixels in size. -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 96x96 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">
Tôi đã nhận xét từng dòng mã để hiểu rõ hơn. Bây giờ để trả lời câu hỏi của bạn:
-Làm cách nào để phát hiện biểu tượng nào sẽ được phân phát cho trình duyệt (cách phát hiện trình duyệt yêu cầu biểu tượng hiển thị trong thanh địa chỉ?) Hoặc để lưu thành ô? quay số nhanh?)
Bạn có thể tạo giải pháp JS có thể hoạt động, tuy nhiên, tôi cảm thấy không cần thiết. Như bạn thấy ở trên, tôi tạo ra một vài kích cỡ khác nhau và một chú thích có điều kiện cho IE. Mỗi biểu tượng nhắm vào một trình duyệt cụ thể và phần còn lại không được tải, do đó giảm chi phí.
-Cách phân phối biểu tượng cụ thể đó cho trình duyệt mà không làm mất tốc độ kết nối vì kích thước biểu tượng lớn?
Đối với tôi, tôi nén hình ảnh càng nhiều càng tốt. Tôi đang sử dụng file PNG (với ngoại lệ của IE 9 và dưới đó là một tập tin ICO) và tôi sử dụng TinyPNG để nén những và nó hoạt động rất tốt. Biểu tượng của tôi có kích thước trung bình 3 - 6 kilobyte (nó thay đổi tùy theo biểu tượng). Trong khi đó là lớn hơn một tập tin 16x16 ICO Tôi tin rằng nó cung cấp các kinh nghiệm tốt nhất trên tất cả các thiết bị.
- dòng lệnh (html) nào phải được thêm vào vị trí nào trong html (tệp) cho mục đích được chỉ định?
Xem trên mã.
-By tải tất cả các biểu tượng trên trang index.html, có thể một bộ nhớ cache của trình duyệt tất cả chúng cho tất cả các trang con? (Bằng cách đặt tất cả các biểu tượng trong thư mục gốc của trang web?)
Gốc của trang web làm việc cho một file ICO tên favicon.ico nhưng không phải cho PNG hoặc các loại tập tin khác. Tôi không chắc chắn nếu nó sẽ lưu lại các tập tin cho tất cả các trang trên một trang web nếu mã là chỉ trên trang index.html. Tôi thường có mã ở trên trong mẫu của tôi áp dụng cho tất cả các trang trên trang web của tôi.
-Nhưng lại sẽ ảnh hưởng đến hiệu suất của trang web bằng cách tăng thời gian tải của trang chỉ mục.
như vậy, Có cách nào để phát hiện mục đích nào cần favicon và sau đó để phân phát động (sử dụng JavaScript chẳng hạn), mà không làm mất tốc độ tải trang? Cũng như thế nào để có một favicon cho Chromes webstore? (Tức là, những gì dòng (html) code).
Tôi thấy tác động không đáng kể đến hiệu suất trang web với mã của tôi ở trên. Một lần nữa, tôi nén tất cả các tệp PNG rất nhiều.
Như đã nêu ở trên, tôi không tin rằng giải pháp JS thực sự cần thiết. Tôi đã thấy số này question here on SO hỏi về JS và favicon.Cá nhân tôi có thể thấy nơi JS sẽ thêm chi phí cao hơn so với kích thước tập tin mình. Tôi không thể sao lưu câu nói đó với kiểm tra thực tế, chỉ là một ý nghĩ. (Ý nghĩ là, bao nhiêu mã sẽ được yêu cầu để truy cập vào favicon và được bạn thực sự tiết kiệm bất kỳ chi phí?)
Về mặt lý thuyết bạn sẽ có thể specify the favicons sizes sử dụng HTML sau:
<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
Trong lý thuyết trình duyệt sau đó chọn kích thước tốt nhất và tải nó, tuy nhiên, điều này doesn't work well across all browsers. Một số trình duyệt chọn kích thước tốt nhất trong khi các trình duyệt khác tải tất cả các kích thước để tăng chi phí.
Từ mọi thứ tôi đã đọc và trải nghiệm của mình, tôi khuyên bạn nên sử dụng mã ở đầu câu trả lời này ở các kích thước được chỉ định trong nhận xét. Điều đó bao gồm hầu hết các trình duyệt không có chi phí lớn và cung cấp cho người dùng cuối trải nghiệm tốt.
Cửa hàng Chrome trực tuyến là 128x128px in size nhưng tôi không chắc chắn về mã chính xác mà bạn nên sử dụng nếu nó khác với mã favicon chuẩn.