ฟาวิคอน HTML ที่ใช้งานได้แน่นอนไม่ได้อาศัยแท็กวิเศษเพียงตัวเดียว แต่ใช้ไฟล์จำนวนน้อยที่เข้าถึงได้และลิงก์ใน head ขั้นตอนนี้ครอบคลุมแท็บสมัยใหม่ โปรแกรมเก่า และทางลัดมือถือโดยไม่เพิ่มรูปแบบเก่ามากมาย
เตรียมไฟล์
เริ่มจากสัญลักษณ์สี่เหลี่ยมจัตุรัสที่ยังอ่านออกเมื่อเล็กมาก วาง favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest และ PNG ที่แมนิเฟสต์อ้างถึงในโฟลเดอร์สาธารณะที่ให้บริการจากรากโดเมน
พาธอย่าง /favicon.svg เริ่มจากรากโดเมน จึงยังถูกต้องบน /products หรือ /blog/article ต่างจาก favicon.svg ที่อาจถูกตีความจากตำแหน่งหน้าปัจจุบัน
เพิ่มแท็กใน head
ประกาศ SVG ก่อนด้วย rel icon และ type image/svg+xml ตามด้วย ICO ที่ใช้ rel icon และ sizes any เพิ่ม rel apple-touch-icon สำหรับ iOS และ rel manifest สำหรับการติดตั้งเว็บแอป
type ต้องตรงกับไฟล์ที่ให้บริการจริง อย่าเปลี่ยนชื่อ PNG เป็น .ico เพราะเนื้อหาและส่วนหัวต้องใช้รูปแบบ ICO
| การใช้งาน | ความสัมพันธ์ | ไฟล์ |
|---|---|---|
| เบราว์เซอร์ใหม่ | icon | /favicon.svg |
| ความเข้ากันได้ | icon | /favicon.ico |
| หน้าจอหลัก iOS | apple-touch-icon | /apple-touch-icon.png |
| เว็บแอป | manifest | /site.webmanifest |
เผยแพร่โดยไม่ทำให้พาธเสีย
เปิด URL ของทุกไฟล์โดยตรงหลังเผยแพร่ การตอบกลับต้องเป็นภาพหรือแมนิเฟสต์พร้อมสถานะสำเร็จ ไม่ใช่หน้าเข้าสู่ระบบหรือ HTML 404 ที่ส่งสถานะชวนเข้าใจผิด
หากเว็บไซต์อยู่ในโฟลเดอร์ย่อย ให้ปรับพาธหรือฐานสาธารณะ ตรวจหน้าที่ได้จริงด้วยเครื่องมือนักพัฒนา เบราว์เซอร์ควรขอ URL ที่คาดไว้โดยไม่เปลี่ยนเส้นทางไปโฮสต์อื่น
ตรวจสอบผลลัพธ์
โหลดใหม่โดยปิดแคชและตรวจแท็ก link ใน DOM ที่สร้าง จากนั้นทดสอบแท็บ บุ๊กมาร์ก และการเพิ่มเว็บไซต์บนหน้าจอหลักอุปกรณ์จริงเมื่อเกี่ยวข้อง
ฟาวิคอนในผลการค้นหายังขึ้นอยู่กับกฎและรอบการรวบรวมข้อมูลของเครื่องมือค้นหา การเห็นไอคอนในเบราว์เซอร์จึงไม่ได้รับประกันว่าผลการค้นหาจะอัปเดตทันที
แหล่งข้อมูลต้นทาง
คำถามที่พบบ่อย
แท็กฟาวิคอนต้องอยู่ใน body หรือไม่?
ไม่ แท็ก link ที่อธิบายไอคอนและแมนิเฟสต์ต้องอยู่ใน head ของเอกสาร
มี favicon.ico ที่รากอย่างเดียวพอไหม?
มีประโยชน์เป็นตัวสำรอง แต่ไม่ได้ระบุไอคอน Apple Touch หรือไอคอนแมนิเฟสต์สำหรับติดตั้ง ควรประกาศรูปแบบสำหรับการใช้งานเหล่านั้นด้วย
ทำไมต้องใช้พาธที่ขึ้นต้นด้วย /?
เพราะเริ่มจากรากโดเมน ทำให้หน้าในโฟลเดอร์ย่อยไม่ค้นหาไฟล์จากโฟลเดอร์ของหน้านั้นเอง