Các câu trả lời được cung cấp (tại thời điểm của bài đăng này) chỉ là các câu trả lời liên kết nên tôi nghĩ rằng tôi sẽ tóm tắt các liên kết thành một câu trả lời và những gì tôi sẽ sử dụng.
Khi làm việc để tạo Cross Browser Favicons (bao gồm các biểu tượng cảm ứng), có một số điều cần xem xét.
Đầu tiên (tất nhiên) là Internet Explorer. IE không hỗ trợ favicon PNG cho đến phiên bản 11. Vì vậy, dòng đầu tiên của chúng tôi là một nhận xét có điều kiện cho favicon trong IE 9 trở xuống:
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
Để bao gồm việc sử dụng biểu tượng, hãy tạo nó ở 32x32 pixel. Lưu ý rel="shortcut icon"cho IE để nhận ra biểu tượng nó cần từ shortcutkhông chuẩn. Ngoài ra, chúng tôi gói .icofavicon trong một nhận xét có điều kiện IE vì Chrome và Safari sẽ sử dụng .icotệp nếu có, mặc dù có các tùy chọn khác có sẵn, không phải là những gì chúng tôi muốn.
Ở trên bao gồm IE lên đến IE 9. IE 11 chấp nhận favicon PNG, tuy nhiên, IE 10 thì không. Ngoài ra IE 10 không đọc các bình luận có điều kiện, do đó IE 10 sẽ không hiển thị hình đại diện. Với IE 11 và Edge có sẵn, tôi không thấy IE 10 được sử dụng rộng rãi, vì vậy tôi bỏ qua trình duyệt này.
Đối với phần còn lại của các trình duyệt, chúng tôi sẽ sử dụng cách tiêu chuẩn để trích dẫn một favicon:
<link rel="icon" href="path/to/favicon.png">
Biểu tượng này phải có kích thước 196x196 pixel để bao phủ tất cả các thiết bị có thể sử dụng biểu tượng này.
Để che các biểu tượng cảm ứng trên thiết bị di động, chúng tôi sẽ sử dụng cách độc quyền của Apple để trích dẫn biểu tượng cảm ứng:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
Sử dụng rel="apple-touch-icon-precomposed"sẽ không áp dụng độ sáng phản chiếu khi được đánh dấu trên iOS. Để iOS áp dụng sử dụng tỏa sáng rel="apple-touch-icon". Biểu tượng này phải có kích thước tới 180x180 pixel vì đó là kích thước hiện tại được Apple khuyên dùng cho iPhone và iPad mới nhất. Tôi đã đọc Blackberry cũng sẽ sử dụng rel="apple-touch-icon-precomposed".
Lưu ý: Chrome dành cho trạng thái Android:
Touch-touch- * không được dùng nữa và sẽ chỉ được hỗ trợ trong một thời gian ngắn. (Được viết dưới dạng beta cho m31 của Chrome).
Gạch tùy chỉnh cho IE 11+ trên Windows 8.1+
IE 11+ trên Windows 8.1+ cung cấp một cách để tạo các ô được ghim cho trang web của bạn.
Microsoft khuyên bạn nên tạo một vài ô ở kích thước sau:
Nhỏ: 128 x 128
Trung bình: 270 x 270
Rộng: 558 x 270
Lớn: 558 x 558
Đây phải là những hình ảnh trong suốt vì chúng ta sẽ xác định một nền màu tiếp theo.
Khi những hình ảnh này được tạo, bạn nên tạo một tệp xml được gọi browserconfig.xmlvới mã sau:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="images/smalltile.png"/>
<square150x150logo src="images/mediumtile.png"/>
<wide310x150logo src="images/widetile.png"/>
<square310x310logo src="images/largetile.png"/>
<TileColor>#009900</TileColor>
</tile>
</msapplication>
</browserconfig>
Lưu tệp xml này trong thư mục gốc của trang web của bạn. Khi một trang web được ghim, IE sẽ tìm tệp này. Nếu bạn muốn đặt tên tệp xml một cái gì đó khác hoặc đặt nó ở một vị trí khác, hãy thêm thẻ meta này vào head:
<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />
Để biết thêm thông tin về các lát tùy chỉnh IE 11+ và sử dụng tệp XML, hãy truy cập trang web của Microsoft .
Để tất cả chúng cùng nhau:
Để kết hợp tất cả lại với nhau, đoạn mã trên sẽ như thế này:
<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">
Gạch ốp lát Windows Phone
Nếu người dùng đang sử dụng Windows Phone, họ có thể ghim một trang web vào màn hình bắt đầu của điện thoại. Thật không may, khi họ làm điều này, nó sẽ hiển thị một ảnh chụp màn hình của điện thoại của bạn chứ không phải hình đại diện (thậm chí không phải mã cụ thể của MS được tham chiếu ở trên). Để tạo "Ngói trực tiếp" cho Người dùng Windows Phone cho trang web của bạn, người ta phải sử dụng mã sau đây:
Dưới đây là hướng dẫn chi tiết từ Microsoft nhưng đây là tóm tắt:
Bước 1
Tạo một hình ảnh vuông cho trang web của bạn, để hỗ trợ màn hình độ phân giải cao tạo ra nó ở kích thước 768x768 pixel.
Bước 2
Thêm một lớp phủ ẩn của hình ảnh này. Dưới đây là mã ví dụ từ Microsoft:
<div id="TileOverlay" onclick="ToggleTileOverlay()" style='background-color: Highlight; height: 100%; width: 100%; top: 0px; left: 0px; position: fixed; color: black; visibility: hidden'>
<img src="customtile.png" width="320" height="320" />
<div style='margin-top: 40px'>
Add text/graphic asking user to pin to start using the menu...
</div>
</div>
Bước 3
Sau đó, bạn có thể thêm dòng sau đây để thêm ghim để bắt đầu liên kết:
<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>
Microsoft khuyên bạn nên phát hiện windows phone và chỉ hiển thị liên kết đó cho những người dùng đó vì nó không hoạt động cho những người dùng khác.
Bước 4
Tiếp theo, bạn thêm một số JS để chuyển đổi mức độ hiển thị của lớp phủ
<script>
function ToggleTileOverlay() {
var newVisibility = (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
document.getElementById('TileOverlay').style.visibility = newVisibility;
}
</script>
Lưu ý về kích thước
Tôi đang sử dụng một kích thước vì mọi trình duyệt sẽ thu nhỏ hình ảnh khi cần thiết. Tôi có thể thêm nhiều HTML hơn để chỉ định nhiều kích thước nếu muốn cho những người có băng thông thấp hơn nhưng tôi đã nén các tệp PNG rất nhiều bằng TinyPNG và tôi thấy điều này không cần thiết cho mục đích của mình. Ngoài ra, theo câu trả lời của philippe_b , Chrome và Firefox có lỗi khiến trình duyệt tải tất cả các kích thước của biểu tượng. Sử dụng một biểu tượng lớn có thể tốt hơn nhiều biểu tượng nhỏ hơn vì điều này.
Đọc thêm
Đối với những người muốn biết thêm chi tiết, xem các liên kết dưới đây: