Favicon ต้องแสดงผลถูกต้องพร้อมกันในหลายที่: แท็บเบราว์เซอร์ บุ๊กมาร์ก หน้าจอโฮมของ iOS และไอคอนของเว็บแอปที่ติดตั้งบน Android — แต่ละที่ต้องการขนาดและรูปแบบไฟล์ของตัวเอง
เหตุใดตัวอักษรไทยตัวเดียวจึงทำเป็นไอคอนเล็ก ๆ ได้ยาก
การใช้อักษรตัวแรกของแบรนด์บนพื้นสีเป็นวิธีทำโลโก้อย่างง่ายที่พบได้ทั่วไป แต่อักษรไทยมีวรรณยุกต์และสระที่วางซ้อนอยู่เหนือหรือใต้พยัญชนะ (เช่น ่ ้ ๊ ๋ หรือสระอิ อี อึ) รวมถึงไม่มีตัวพิมพ์ใหญ่-เล็กแบบอักษรละติน เมื่อย่อลงเหลือ 16×16 พิกเซล ส่วนบนและส่วนล่างที่ซ้อนกันมักเบลอจนแยกไม่ออก พยัญชนะที่ไม่มีวรรณยุกต์กำกับจึงมักคมชัดกว่าที่ขนาดเล็กที่สุด
บทบาทของแท็ก <link> ใน <head>
ไอคอนแต่ละรูปแบบเชื่อมโยงด้วยแท็ก <link rel="icon"> หรือ <link rel="apple-touch-icon"> ของตัวเอง พร้อมแอตทริบิวต์ sizes ที่ระบุขนาด เพื่อให้เบราว์เซอร์เลือกตัวเลือกที่เหมาะสมที่สุดจากชุดที่มีให้
Web App Manifest สำหรับ PWA
เว็บแอปพลิเคชันแบบ progressive ต้องการไฟล์ site.webmanifest รูปแบบ JSON ที่ระบุรายการไอคอน ชื่อเว็บไซต์ และสีธีม — Android จะดึงไอคอนจากตรงนี้เมื่อมีการติดตั้งเว็บไซต์เป็นแอปแยกต่างหาก
เหตุใดจึงจำเป็น
- สร้างชุดไอคอนครบถ้วนในขนาดที่ต้องการจากภาพต้นฉบับเพียงภาพเดียว
- รับโค้ด HTML ของแท็ก <link> ที่พร้อมวางลงใน <head>
- ตรวจสอบว่าเว็บไซต์แสดงผลถูกต้องเมื่อถูกเพิ่มไปยังหน้าจอโฮมของอุปกรณ์มือถือ