SVG → ICO

SVG เป็น ICO

สร้างไฟล์ .ico หลายขนาดจากเวกเตอร์ — แต่ละขนาดถูกเรนเดอร์จากตัว SVG เอง ไม่ใช่ย่อลงมาจากภาพบิตแมปใหญ่ภาพเดียว

SVG → ICO

☞ ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ไม่มีการอัปโหลดไฟล์

วางไฟล์ SVG ที่นี่

หรือคลิกเพื่อเลือก — เฉพาะ SVG

คมชัดที่ 16 พิกเซล

ทำไมการแปลงจากเวกเตอร์จึงสำคัญตรงนี้

favicon ถูกมองเห็นที่ขนาด 16 พิกเซลเป็นส่วนใหญ่ การย่อภาพบิตแมป 256px ลงมาเท่านั้นทำให้ขอบทุกเส้นเลอะปนกัน แต่การเรนเดอร์เวกเตอร์ที่ 16px โดยตรงทำให้เบราว์เซอร์วางรูปทรงลงบนตารางพิกเซลได้พอดี

นั่นคือสิ่งที่หน้านี้ทำ — เรนเดอร์หนึ่งครั้งต่อหนึ่งขนาด แล้วบรรจุทั้งหมดไว้ในไฟล์ .ico เดียว จากนั้น Windows และเบราว์เซอร์จะเลือกขนาดที่ต้องการเอง

สามขั้นตอน

วิธีแปลง SVG เป็น ICO

01

วางไฟล์ SVG

เลือกไฟล์ .svg — ไฟล์ยังอยู่ในอุปกรณ์ของคุณ

02

เลือกขนาด

ติ๊กขนาดที่ต้องการรวมไว้ แต่ละขนาดจะถูกเรนเดอร์แยกกัน

03

ดาวน์โหลด

บันทึกไฟล์ .ico แล้ววางไว้ที่รากของเว็บไซต์

ตอบสั้น ๆ

คำถามที่พบบ่อยเรื่อง SVG เป็น ICO

จริง ๆ แล้วต้องใช้ขนาดไหนบ้าง

16, 32 และ 48 ครอบคลุมแท็บเบราว์เซอร์ บุ๊กมาร์ก และแถบงานของ Windows เพิ่ม 256 หากไอคอนจะไปปรากฏในมุมมองไอคอนขนาดใหญ่ของ Explorer ใส่ขนาดมากกว่านี้มีแต่จะทำให้ไฟล์ใหญ่ขึ้น

โลโก้ที่มีรายละเอียดเยอะดูเละที่ 16px

นั่นเป็นข้อจำกัดของการออกแบบ ไม่ใช่ของการแปลง — 16×16 มีทั้งหมดเพียง 256 พิกเซล favicon ที่อ่านออกได้ดีมักเป็นตัวอักษรเดียวหรือรูปทรงเดียว ลองทำ SVG แบบย่อความซับซ้อนไว้ใช้เฉพาะไอคอน

ไอคอนยังคงความโปร่งใสไหม

ยังคงอยู่ แต่ละขนาดถูกเขียนเป็น PNG แบบ 32 บิตภายในไฟล์ .ico ช่องอัลฟาจึงยังอยู่ครบ ปิดสวิตช์นี้หากคุณต้องการพื้นหลังทึบ

ถ้า SVG ของฉันไม่เป็นสี่เหลี่ยมจัตุรัสล่ะ

ระบบจะย่อให้พอดีในกรอบสี่เหลี่ยมจัตุรัสและจัดกึ่งกลาง โดยปล่อยพื้นที่ที่เหลือให้โปร่งใส ไอคอนจะอ่านง่ายกว่าถ้าตัวงานเป็นสี่เหลี่ยมจัตุรัสมาตั้งแต่แรก