หน้าจอเว็บไซต์ยอดนิยมของคุณใน IE 10 - ไอคอนไม่ปรากฏขึ้น

เราใช้รหัสต่อไปนี้เพื่อเพิ่มไอคอนสำหรับ favicon, แท็บเล็ต, สมาร์ทโฟน, ไทล์ Windows 8 และสิ่งที่ชอบ: -

<link rel="apple-touch-icon" href="apple-touch-icon.png">

<link rel="shortcut icon" type="image/x-icon" href="/webmasters//favicon.ico"/>

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<meta name="msapplication-TileImage" content="apple-touch-icon-144x144-precomposed.png"/>

<meta name="msapplication-TileColor" content="#17151a"/>

น่าเสียดายที่นี่ดูเหมือนจะใช้งานไม่ได้กับหน้าจอไซต์ที่ได้รับความนิยมมากที่สุดของ IE9 และ IE10 แต่การค้นหาของกูเกิลก็ไม่ได้ทำให้กระจ่าง

การใช้งานสแต็ก<link rel="apple-touch-icon" href="apple-touch-icon.png">ซึ่งดูเหมือนว่าจะทำงานได้ดี แต่ไม่ใช่สำหรับเรา

เบาะแสใด ๆ ในการแก้ปัญหาชื่นชม

ไฟล์ ico ของคุณอยู่ที่ไหน ฉันเห็นว่ามันอยู่ในโฟลเดอร์รูทแล้วคุณไม่จำเป็นต้องใช้สแลชข้างหลังลบสแลชจากด้านหลังไฟล์ของคุณและคุณไม่ต้องการtype="image/x-icon"

ไฟล์ ICO ของคุณควรเป็นไลบรารีไอคอนปกติที่มีขนาดไอคอนที่แตกต่างกัน

<link rel="shortcut icon" href="favicon.ico"/>

เพียงใช้โค้ดด้านบนมันใช้งานได้ดีกับ IE9, IE10, FX และ Chrome

หากคุณมี favico ที่แตกต่างกันก่อนหน้านี้คุณต้องรีเฟรชแคชเบราว์เซอร์ของคุณด้วย

favicon ของคุณมีขนาดเท่าไหร่ ตรวจสอบรายการนี้เพื่อให้แน่ใจว่าตรงตามหลักเกณฑ์เหล่านี้:

การปรับแต่งไอคอนของไซต์ - ไอคอนของไซต์ใน Internet Explorer 9

แก้ไข

ดูซอร์สโค้ดของ Stackoverflow ฉันเห็นภาพไอคอน 2 อัน:

<link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">

และ

<link rel="apple-touch-icon" href="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png">

เมื่อฉันดู stackoverflow ของฉันในแท็บรายการโปรดของฉันใน IE9 ดูเหมือนว่ามันใช้ favicon ขนาด 16x16 (และอยู่ตรงกลางในคอนเทนเนอร์ขนาด 32x32) ไม่ใช่ไอคอน apple touch 158x158 stackoverflow อย่างที่คุณแนะนำเพราะถ้าคุณดูที่ png อัตราส่วนระยะห่าง "padding" จาก side vs bottom อยู่ที่ 2.5: 1 โดยที่ 1: 1 ใน favicon เช่นเดียวกับ padding 1: 1 บนแท็บ IE9 ...

ฉันสามารถบอกคุณว่า favicon ของนายจ้างของฉันโหลดในรายการโปรด IE9 และ 64x64 (ไม่มีความโปร่งใสขนาด 12.5kb) หากคุณยังไม่สามารถแสดง favicon ให้โพสต์ลิงก์เพื่อให้เราสามารถตรวจสอบไฟล์ภาพที่แท้จริง

ลองแบบที่Omneแนะนำและลบ attribute ประเภทของคุณหรือเพิ่มอันที่สองด้วย image / vnd.microsoft.icon เป็นค่า จากนั้นตรวจสอบให้แน่ใจว่าเซิร์ฟเวอร์ของคุณกำลังส่งไฟล์ประเภท mime สำหรับไฟล์ dot ico ดูนี่:

https://github.com/paulirish/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee

Backstory บ้าง

มันเคยเป็นหรือค่อนข้างได้รับการโต้เถียงเกี่ยวกับสิ่งที่ประเภท mime ที่ถูกต้องสำหรับไอคอน

โลก Microsoft เคยใช้และอาจยังคงใช้ "image / vnd.microsoft.icon" ซึ่งส่วนที่เหลือของโลกใช้ "image / x-icon" lol (เป็นทางการ) อย่างไม่เป็นทางการ

จากรูปแบบวิกิพีเดีย ICO :

ประเภท MIME ที่ลงทะเบียนอย่างเป็นทางการของ IANA สำหรับไฟล์ ICO คือ image / vnd.microsoft.icon ซึ่งจดทะเบียนในปี 2003 ป้ายกำกับ "image / ico", "image / icon", "text / ico" และ "application / ico" ที่ผิดพลาด ด้วยชื่อ "image / x-icon" ที่ไม่เป็นทางการถูกนำมาใช้ในช่วงเวลาของการลงทะเบียนอย่างเป็นทางการและการกำหนดประเภท MIME

ยังมาจากวิกิพีเดียสำหรับ Favicon

ในปี 2003 รูปแบบ. ico ได้รับการลงทะเบียนกับ Internet Assigned Numbers Authority (IANA) ภายใต้ MIME type image / vnd.microsoft.icon [12] เมื่อใช้รูปแบบ. ico Internet Explorer ไม่สามารถแสดงไฟล์ที่ให้บริการด้วยชนิด MIME มาตรฐาน วิธีแก้ปัญหาสำหรับ Internet Explorer คือการเชื่อมโยง. ico กับอิมเมจ / ไอคอน x-MIME ชนิดมาตรฐานในเว็บเซิร์ฟเวอร์