คำตอบที่ให้ไว้ (ตอนที่โพสต์นี้) เป็นเพียงคำตอบของลิงก์ดังนั้นฉันคิดว่าฉันจะสรุปลิงก์ให้เป็นคำตอบและสิ่งที่ฉันจะใช้
เมื่อทำงานเพื่อสร้าง Cross Browser Favicons (รวมถึงไอคอนแบบสัมผัส) มีหลายสิ่งที่ต้องพิจารณา
อันแรก (แน่นอน) คือ Internet Explorer IE ไม่รองรับ PNG favicons จนถึงเวอร์ชั่น 11 ดังนั้นบรรทัดแรกของเราคือการแสดงความคิดเห็นแบบมีเงื่อนไขสำหรับ favicons ใน IE 9 และต่ำกว่า:
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
เพื่อให้ครอบคลุมการใช้ไอคอนให้สร้างที่ 32x32 พิกเซล สังเกตุที่rel="shortcut icon"สำหรับ IE ที่จะรู้จักไอคอนมันต้องการคำshortcutที่ไม่เป็นมาตรฐาน นอกจากนี้เราได้รวม.icofavicon ไว้ในข้อคิดเห็นตามเงื่อนไข IE เนื่องจาก Chrome และ Safari จะใช้.icoไฟล์หากมีอยู่แม้ว่าจะมีตัวเลือกอื่น ๆ ให้เลือกไม่ใช่สิ่งที่เราต้องการ
ข้างต้นครอบคลุม IE ถึง IE 9 IE 11 ยอมรับ PNG favicons อย่างไรก็ตาม IE 10 ไม่ได้รับ นอกจากนี้ IE 10 จะไม่อ่านความคิดเห็นตามเงื่อนไขดังนั้น IE 10 จะไม่แสดง favicon ด้วย IE 11 และ Edge ที่มีอยู่ฉันไม่เห็น IE 10 ที่ใช้กันอย่างแพร่หลายดังนั้นฉันจึงไม่สนใจเบราว์เซอร์นี้
สำหรับส่วนที่เหลือของเบราว์เซอร์เราจะใช้วิธีมาตรฐานในการอ้างอิง favicon:
<link rel="icon" href="path/to/favicon.png">
ไอคอนนี้ควรมีขนาด 196x196 พิกเซลเพื่อครอบคลุมอุปกรณ์ทั้งหมดที่อาจใช้ไอคอนนี้
เพื่อให้ครอบคลุมไอคอนสัมผัสบนอุปกรณ์มือถือเราจะใช้วิธีที่เป็นกรรมสิทธิ์ของ Apple ในการอ้างอิงไอคอนสัมผัส:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
การใช้rel="apple-touch-icon-precomposed"จะไม่ใช้แสงสะท้อนเมื่อบุ๊กมาร์กบน iOS ที่จะมีผลบังคับใช้ iOS rel="apple-touch-icon"ของคุณใช้ความเงางาม ไอคอนนี้ควรมีขนาด 180x180 พิกเซลตามขนาดปัจจุบันที่ Apple แนะนำสำหรับ iPhone และ iPads ล่าสุด ฉันได้อ่าน Blackberry จะใช้rel="apple-touch-icon-precomposed"แล้ว
โปรดทราบว่า: สถานะ Chrome สำหรับ Android:
apple-touch- * เลิกใช้แล้วและจะได้รับการสนับสนุนในช่วงเวลาสั้น ๆ เท่านั้น (เขียนเป็น beta สำหรับ m31 ของ Chrome)
Custom Tiles สำหรับ IE 11+ บน Windows 8.1+
IE 11+ บน Windows 8.1+ มีวิธีสร้างไทล์ตรึงสำหรับไซต์ของคุณ
Microsoft ขอแนะนำให้สร้างไทล์ขนาดเล็กตามขนาดต่อไปนี้:
เล็ก: 128 x 128
ปานกลาง: 270 x 270
กว้าง: 558 x 270
ใหญ่: 558 x 558
ภาพเหล่านี้ควรเป็นภาพโปร่งใสเนื่องจากเราจะกำหนดพื้นหลังสีต่อไป
เมื่อสร้างภาพเหล่านี้แล้วคุณควรสร้างไฟล์ xml ชื่อbrowserconfig.xmlรหัสต่อไปนี้:
<?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>
บันทึกไฟล์ xml นี้ในรูทของเว็บไซต์ของคุณ เมื่อไซต์ถูกตรึง IE จะค้นหาไฟล์นี้ หากคุณต้องการตั้งชื่อไฟล์ xml ที่แตกต่างหรือมีอยู่ในตำแหน่งอื่นให้เพิ่มเมตาแท็กนี้ลงในhead:
<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับไทล์ที่กำหนดเอง IE 11+ และการใช้ไฟล์ XML โปรดเยี่ยมชมเว็บไซต์ของ Microsoftเยี่ยมชมเว็บไซต์ไมโครซอฟท์
วางมันทั้งหมดเข้าด้วยกัน:
หากต้องการรวมโค้ดด้านบนทั้งหมดไว้ด้วยกันจะมีลักษณะดังนี้:
<!-- 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">
Windows Phone Live Tiles
หากผู้ใช้ใช้ Windows Phone ผู้ใช้สามารถตรึงเว็บไซต์ไว้ที่หน้าจอเริ่มต้นของโทรศัพท์ แต่น่าเสียดายที่เมื่อพวกเขาทำเช่นนี้มันจะแสดงภาพหน้าจอของโทรศัพท์ของคุณไม่ใช่ favicon (ไม่ใช่แม้แต่รหัสเฉพาะ MS ที่อ้างถึงข้างต้น) ในการสร้าง "Live Tile" สำหรับผู้ใช้ Windows Phone สำหรับเว็บไซต์ของคุณต้องใช้รหัสต่อไปนี้:
นี่คือคำแนะนำโดยละเอียดจาก Microsoftแต่นี่เป็นบทสรุป:
ขั้นตอนที่ 1
สร้างภาพสี่เหลี่ยมจัตุรัสสำหรับเว็บไซต์ของคุณเพื่อรองรับหน้าจอความละเอียดสูงสร้างได้ที่ขนาด 768x768 พิกเซล
ขั้นตอนที่ 2
เพิ่มภาพซ้อนทับที่ซ่อนอยู่ของภาพนี้ นี่คือตัวอย่างรหัสจาก 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>
ขั้นตอนที่ 3
จากนั้นคุณสามารถเพิ่ม thew บรรทัดต่อไปนี้เพื่อเพิ่มพินเพื่อลิงค์เริ่มต้น:
<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>
Microsoft แนะนำให้คุณตรวจจับ windows phone และแสดงลิงค์นั้นไปยังผู้ใช้เหล่านั้นเท่านั้นเพราะมันจะไม่ทำงานสำหรับผู้ใช้รายอื่น
ขั้นตอนที่ 4
ถัดไปคุณเพิ่ม JS เพื่อสลับการมองเห็นภาพซ้อนทับ
<script>
function ToggleTileOverlay() {
var newVisibility = (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
document.getElementById('TileOverlay').style.visibility = newVisibility;
}
</script>
หมายเหตุเกี่ยวกับขนาด
ฉันใช้ขนาดเดียวเพราะเบราว์เซอร์ทุกตัวจะย่อขนาดรูปภาพตามที่จำเป็น ฉันสามารถเพิ่ม HTML เพิ่มเติมเพื่อระบุหลายขนาดถ้าต้องการสำหรับผู้ที่มีแบนด์วิดท์ต่ำกว่า แต่ฉันบีบอัดไฟล์ PNG อย่างหนักโดยใช้TinyPNGและฉันพบว่ามันไม่จำเป็นสำหรับวัตถุประสงค์ของฉัน นอกจากนี้ตามคำตอบของphilippe_b Chrome และ Firefox มีข้อบกพร่องที่ทำให้เบราว์เซอร์โหลดไอคอนทุกขนาด การใช้ไอคอนขนาดใหญ่หนึ่งอันอาจดีกว่าไอคอนขนาดเล็กหลายอันเนื่องจากสิ่งนี้
อ่านเพิ่มเติม
สำหรับผู้ที่ต้องการรายละเอียดเพิ่มเติมดูลิงค์ด้านล่าง: