ฟาวิคอน SVG: สร้าง โค้ด และไฟล์สำรอง

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

สร้างสี่เหลี่ยมด้วย viewBox

ใช้ viewBox สี่เหลี่ยมจัตุรัส เช่น 0 0 64 64 และเว้นระยะรอบสัญลักษณ์ viewBox กำหนดระบบพิกัดโดยไม่บังคับขนาดจริงที่แสดงผล

ลดภาพให้เหลือรูปทรงที่เป็นเอกลักษณ์ รายละเอียดบาง ช่องเล็กในตัวอักษร และคำเต็มมักหายไปที่ 16 พิกเซล แม้ไฟล์เวกเตอร์ยังคมชัดในทางเทคนิค

ฝังสไตล์ที่จำเป็นภายใน SVG แปลงข้อความเป็นเส้นเวกเตอร์เมื่อสัญลักษณ์ขึ้นอยู่กับแบบอักษร เพราะแบบอักษรเว็บภายนอกเชื่อถือไม่ได้ในบริบทนี้

ลบสคริปต์ ลิงก์ภายนอก และข้อมูลกำกับจากโปรแกรมแก้ไขที่ไม่จำเป็น รูปทรงและสไตล์เรียบง่ายยังช่วยให้ตรวจความปลอดภัยง่ายและลดขนาดไฟล์

สุดท้ายเปิดไฟล์เดี่ยวในเบราว์เซอร์แล้วทดสอบออฟไลน์ หากภาพเปลี่ยนหรือหายไป แสดงว่ายังพึ่งทรัพยากรภายนอกที่ต้องฝังหรือแทนที่

เพิ่ม link rel icon ที่มี type image/svg+xml และ URL อ้างอิงจากรากเว็บไซต์ เก็บ favicon.ico ที่รากด้วยสำหรับโปรแกรมที่ไม่เลือก SVG หรือขอ ICO โดยตรง

SVG ไม่แทนไอคอน Apple Touch หรือไอคอนแมนิเฟสต์ ให้ส่งออก PNG พื้นทึบหรือแบบ maskable สำหรับส่วนติดต่อเหล่านั้น

กฎ prefers-color-scheme ในแท็ก style เปลี่ยน fill หรือ stroke ในโหมดมืดได้ กำหนดสีเริ่มต้นที่ใช้ได้ดีก่อน แล้วเพิ่มเวอร์ชันอื่นตามการรองรับ

ทดสอบไฟล์ในแท็บจริงและการซูมหลายระดับ ตรวจไฟล์สำรองเมื่อไม่ได้เลือก SVG ด้วย เพราะ ICO ที่หายไปบนพื้นมืดยังคงเป็นปัญหาสำหรับโปรแกรมกลุ่มนั้น

SVG ต้องมี width และ height ไหม?

viewBox สี่เหลี่ยมจัตุรัสเป็นส่วนสำคัญสำหรับการปรับขนาด จะระบุ width และ height ด้วยก็ได้ แต่เบราว์เซอร์เป็นผู้กำหนดขนาดไอคอนตามบริบท

โหลดแบบอักษรภายนอกได้ไหม?

ไม่ควรพึ่งวิธีนี้ แปลงตัวอักษรเป็นเส้นเวกเตอร์เพื่อให้ไฟล์ทำงานได้ด้วยตัวเองและแสดงผลแน่นอน

SVG เพียงพอสำหรับ iOS หรือไม่?

ไม่ ต้องมีไอคอน Apple Touch แบบ PNG พื้นทึบแยกสำหรับหน้าจอหลัก