สรุป Favicon สำหรับปี 2021

• ตามสเปกของเบราว์เซอร์ ปกติต้องใช้ไฟล์จำนวนมาก แต่บทความนี้สรุปรวมให้เหลือชุดเดียว

• ใช้รูปภาพ 5 ไฟล์และไฟล์ JSON 1 ไฟล์

→ .ico 32x32 : สำหรับเบราว์เซอร์รุ่นเก่า

→ .svg : ปรับขนาดได้ รองรับเบราว์เซอร์สมัยใหม่ส่วนใหญ่ และรองรับโหมดมืดด้วย

→ apple-touch-icon 180x180 : สำหรับอุปกรณ์ Apple โดย iOS8+ ใช้ขนาด 180x180 แนะนำให้ใส่ padding ราว 20px และสีพื้นหลังเพื่อให้ดูสวยงาม

→ manifest(JSON) : สำหรับ PWA และอุปกรณ์ Android

→ 192x192 : สำหรับหน้าโฮมสกรีน

→ 512x512 : สำหรับ splash screen ตอนโหลด PWA

• ในบทความมีคำอธิบายทีละขั้นตอนเกี่ยวกับการสร้างไอคอนทั้ง 5 นี้จาก SVG เดียวและการทำ optimization