ICO กับ PNG สำหรับ Favicons
ICO เป็นสากลแต่เก่า PNG มีความทันสมัย แต่ต้องมีการเชื่อมโยงที่ชัดเจน ต่อไปนี้เป็นวิธีใช้ทั้งสองอย่างร่วมกัน
4 นาทีในการอ่าน
ICO: ทางเลือกสากล
เบราว์เซอร์เดสก์ท็อปทุกตัวดึงข้อมูล /favicon.ico โดยที่คุณไม่ต้องทำอะไรเลย เป็นคอนเทนเนอร์ที่สามารถเก็บความละเอียดได้หลายแบบ
ทางลัด Windows และ File Explorer ต้องใช้ .ico ดังนั้นแม้ว่าคุณจะไม่สนใจfavicon ของเว็บก็ตาม ให้เตรียมไฟล์เดียวสำหรับระบบปฏิบัติการ
PNG: พิกเซลสมบูรณ์แบบในทุกความหนาแน่น
PNG แสดงผลอย่างคมชัดบนจอแสดงผล DPI สูง เมื่อคุณเชื่อมโยงกับ <link rel="icon" size="...">
ใช้ 192×192 และ 512×512 PNGs สำหรับรายการเว็บ และ 180×180 สำหรับ apple-touch-icon
คำตัดสิน: ใช้ทั้งสองอย่าง
ใช้ .ico หลายขนาดเพื่อรองรับการใช้งานแบบสากล รวมถึงรุ่น PNG สำหรับจอแสดงผล HD และข้อความแจ้งการติดตั้ง PWA เพิ่ม SVG ที่ด้านบนเพื่อให้ได้ไอคอนที่ปรับขนาดได้คมชัดที่สุด