คำสั่ง 1: <link rel = ไอคอนทางลัด href = favicon.ico />
คำสั่ง 2 <link rel = icon href = animated_favicon.gif type = image /gif />
หมายเหตุ: ไอคอนทางลัดคำสั่งเป็นไอคอนที่ปรากฏอยู่ด้านหน้าของคอลัมน์ URL
คำถาม: ไอคอนคำสั่ง 2 ฟังก์ชั่นคืออะไร? ความแตกต่างระหว่างคำสั่ง 1 คืออะไร?
แนะนำ
ในอดีตนักออกแบบเว็บไซต์และนักพัฒนาได้ใช้วิธีการที่หลากหลายเพื่อให้แน่ใจว่าการเกิดขึ้นของ Favicon เป็นการยากที่จะตรวจสอบให้แน่ใจว่า Favicon สามารถแสดงบนคอมพิวเตอร์ทุกเครื่องได้อย่างชัดเจนแม้จะมีเบราว์เซอร์รุ่นเดียวกันก็ตาม
ข้อ จำกัด อีกประการหนึ่งของรหัสต่อไปนี้คือมันเชื่อมโยง favicon กับเอกสาร HTML หรือ XHTML เฉพาะ เพื่อหลีกเลี่ยงสิ่งนี้ควรวางไฟล์ favicon.ico ไว้ในไดเรกทอรีราก เบราว์เซอร์ส่วนใหญ่จะตรวจจับและใช้งานโดยอัตโนมัติ
ขอแนะนำให้รวมรหัส HTML สองบรรทัดต่อไปนี้:
รหัส:
<link rel = ไอคอนทางลัด href = http: //example.com/favicon.ico type = image/vnd.microsoft.icon>
<link rel = icon href = http: //example.com/favicon.ico type = image/vnd.microsoft.icon>
อย่างไรก็ตามเฉพาะบรรทัดแรกเท่านั้นที่จำเป็นเนื่องจากสตริงไอคอนทางลัดจะได้รับการยอมรับจากเบราว์เซอร์ที่สอดคล้องกับมาตรฐานส่วนใหญ่เป็นรายการคำหลักที่เป็นไปได้ (ทางลัดจะถูกละเว้นและจะใช้ไอคอนเท่านั้น); และ Internet Explorer จะใช้เป็นชื่อแยกต่างหาก (ไอคอนทางลัด) ผลที่ตามมาคือเบราว์เซอร์ทั้งหมดสามารถเข้าใจรหัสนี้ได้ จำเป็นต้องเพิ่มบรรทัดที่สองหากคุณต้องการให้ภาพอื่นอื่น (เช่น GIF ภาพเคลื่อนไหว) สำหรับเบราว์เซอร์ใหม่
ใน HTML องค์ประกอบลิงก์จะต้องอยู่ในองค์ประกอบหัว (ระหว่าง <head> และ </head>)
สำหรับ XHTML ลิงก์จะต้องใช้ End (หรือ>/link>) และไม่สามารถใช้งานได้
Href สามารถ แต่ไม่ชี้ไปที่ตำแหน่งของ /favicon.ico มันสามารถชี้ไปที่ URL ใด ๆ
ภาพมักจะใช้รูปแบบรูปภาพใด ๆ ที่รองรับโดยเบราว์เซอร์
รูปแบบไฟล์. ICO สามารถอ่านได้โดยเบราว์เซอร์ทั้งหมดที่สามารถแสดง Favicon ได้
ตั้งค่าเซิร์ฟเวอร์เพื่อส่ง MIME ID ที่ถูกต้อง:
ICO FILE IMAGE/VND.MICROSOFT.ICON (หรือรูปภาพ/X-ICON สามารถใช้เพื่อเหตุผลที่เข้ากันได้อย่างไรก็ตามมันจะดีกว่าที่จะใช้ประเภท MIME ที่ลงทะเบียนของ IANA เนื่องจากเบราว์เซอร์กระแสหลักส่วนใหญ่รองรับ)
ไฟล์ไฟล์ gif/gif
รูปภาพไฟล์ png/png
ใช้ความละเอียดที่เหมาะสมและความลึกสี
ICO: รวมถึงความละเอียดหลายอย่าง (ที่ใช้กันมากที่สุดคือ 16 × 16 และ 32 × 32, Mac OS X บางครั้งใช้ 64 × 64 และ 128 × 128) และความลึกบิต (บิตต่อพิกเซล) (ส่วนใหญ่ใช้ 4, 8, 24 BPP, I.E. 16, 256 และ 16 ล้านสี)
GIF: ใช้ 16 × 16, 256 สี
PNG: ใช้ 16 × 16, 256 สีหรือ 24 บิต
หมายเหตุ: เมื่อ Favicon.ico ถูกวางไว้ในไดเรกทอรีรูทของเอกสารจะพบได้โดยเบราว์เซอร์บางตัวที่ไม่ประมวลผลองค์ประกอบลิงก์แม้ว่าจะไม่มีลิงก์ไปยังเว็บไซต์ของคุณ
มาตรฐาน
ฟังก์ชั่น Favicon ถูกสร้างขึ้นครั้งแรกโดย Microsoft และเว็บเบราว์เซอร์ Internet Explorer ของ Microsoft จะขอ Favicon สำหรับทุกเว็บไซต์ แท็กลิงค์ที่รองรับ Microsoft ไม่สอดคล้องกับคำแนะนำ HTML ของ World Wide Web Consortium (W3C, World Wide Web Consortium) เพราะ:
แอตทริบิวต์ Rel ต้องมีรายการประเภทลิงค์ที่ใช้ช่องว่างเป็นตัวคั่นดังนั้นประเภทลิงค์ที่มีสองคำไม่สามารถเข้าใจได้โดยเบราว์เซอร์มาตรฐาน
ประเภทไฟล์. ICO (รูปแบบแรสเตอร์สำหรับไอคอนบน Microsoft Windows) ไม่มีประเภท MIME ที่ลงทะเบียนและดูเหมือนว่าเบราว์เซอร์ส่วนใหญ่ไม่สามารถเข้าใจได้ในเวลานั้น อย่างไรก็ตามในปี 2003 รูปแบบนี้ลงทะเบียนกับ IANA และประเภท MIME คือ Image/Vnd.microsoft.icon ดังนั้นจึงกำจัดส่วนแรกของปัญหานี้
การใช้ตำแหน่งที่สงวนไว้บนเว็บไซต์ขัดแย้งกับสถาปัตยกรรมของเวิลด์ไวด์เว็บและยังถือว่าเป็นลิงค์นั่งยองหรือนั่งยอง ๆ
Mozilla Browser เพิ่มการสนับสนุนสำหรับ Favicon ด้วยวิธีการที่สอดคล้องกับมาตรฐานเว็บ ต้องใช้ไอคอน Rel = และอนุญาตให้นักออกแบบเว็บไซต์เพิ่ม Favicon ในรูปแบบภาพที่รองรับ ตัวอย่างเช่น <link rel = icon type = image/png href =/path/image.png> ในภายหลังเนื่องจากคุณลักษณะนี้จะใช้สำหรับเนื้อหาใหม่ทั้งหมดเบราว์เซอร์ส่วนใหญ่ได้เพิ่มการสนับสนุนสำหรับคุณสมบัตินี้