ขนาด favicon ที่เบราว์เซอร์และอุปกรณ์ต้องการจริงๆ

favicon เคยหมายถึงภาพเล็กๆ ขนาด 16×16 เพียงภาพเดียว ตอนนี้แท็บเบราว์เซอร์ ทางลัดหน้าจอหลักของโทรศัพท์ แถบบุ๊กมาร์ก และไอคอนสัมผัสของ Apple ต่างก็คาดหวังขนาดของตัวเอง และการให้เพียงขนาดเดียวจะทำให้บางบริบทเหล่านั้นดูเบลอหรือแสดงไอคอนสำรองทั่วไปแทนที่จะเป็นของคุณ

ทำไมขนาดเดียวจึงไม่เพียงพอ

ไอคอนขนาด 16×16 ที่ขยายเพื่อเติมเต็มช่องไอคอนหน้าจอหลักขนาด 180×180 ดูเป็นบล็อกเหมือนกับภาพเล็กๆ ที่ยืดให้ใหญ่ — ไม่มีทางที่จะเพิ่มรายละเอียดที่ไม่มีอยู่ในต้นฉบับ ทุกบริบทที่ favicon ปรากฏมีความละเอียดที่คาดหวังของตัวเอง และแนวทางปฏิบัติสมัยใหม่คือการจัดหาชุดขนาดแทนที่จะพึ่งพาเบราว์เซอร์ในการขยายไฟล์เล็กไฟล์เดียวอย่างแย่ๆ

ขนาดที่คุ้มค่าที่จะครอบคลุม

• 16×16 และ 32×32 — ขนาด favicon แบบคลาสสิก ใช้ในแท็บเบราว์เซอร์และรายการบุ๊กมาร์กในเบราว์เซอร์เดสก์ท็อปส่วนใหญ่
• 180×180 — ขนาดที่ Apple คาดหวังสำหรับไอคอนหน้าจอหลักเมื่อมีการเพิ่มหน้าเว็บไปยังหน้าจอหลักของ iPhone หรือ iPad
• 192×192 และ 512×512 — ใช้โดย Android และโดยแมนิเฟสต์แอปเว็บสำหรับไอคอนหน้าจอหลักและหน้าจอเปิดตัวในแอปเว็บที่ติดตั้งได้

การรักษาให้การออกแบบอ่านได้ที่ 16px

ตัวสร้าง favicon รับภาพต้นฉบับหนึ่งภาพและสร้างชุดขนาดมาตรฐานทั้งหมดในครั้งเดียว ทั้งหมดในเบราว์เซอร์ของคุณ — แต่ไม่มีตัวสร้างใดที่สามารถแก้ไขการออกแบบที่ไม่ทำงานที่ขนาดเล็กตั้งแต่แรกได้ รายละเอียดปลีกย่อย เส้นบาง และข้อความเล็กหายไปทั้งหมดที่ 16×16 รูปทรงหรือตัวอักษรที่เรียบง่ายและหนาที่ยังคงจดจำได้เมื่อย่อขนาดลงคือสิ่งที่อ่านได้ชัดเจนจริงๆ ในแท็บเบราว์เซอร์ ไม่ว่าจะสร้างขนาดกี่ขนาดจากมัน