แปลง SVG เป็น ICO

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

หรือลากไฟล์ JPG, JPEG, JPE … มาวางที่นี่ ·

สูงสุด 95 MB ต่อไฟล์· ได้สูงสุด 20 ไฟล์· ลบหลังจาก 30 นาที

ผลลัพธ์

แปลงเป็น

ไฟล์จะถูกประมวลผลบนเซิร์ฟเวอร์ของเราและถูกลบหลังจาก 30 นาที

คุณภาพและสี

ไฟล์ต้นฉบับแบบภาพเคลื่อนไหว

รูปแบบนี้เก็บภาพได้เพียงภาพเดียว หากต้องการคงภาพเคลื่อนไหวไว้ ให้เลือกผลลัพธ์เป็น GIF หรือ WebP

ขนาดไอคอน

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

ปรับขนาดภาพผลลัพธ์

คงขนาดภาพเดิมไว้ หรือกำหนดด้านใดด้านหนึ่ง โดยระบบจะคงอัตราส่วนภาพไว้

ข้อมูลเมตาและโปรไฟล์สี

ปรับแนวภาพอัตโนมัติ

หมุนภาพตามข้อมูลการวางแนวใน EXIF เพื่อให้ภาพแสดงในแนวตั้งตรงในทุกโปรแกรม

ลบข้อมูลเมตา

ลบตำแหน่ง GPS ข้อมูลกล้อง และความคิดเห็นออก ส่วนโปรไฟล์สีสามารถเลือกเก็บไว้แยกต่างหากได้ด้านล่าง

คงโปรไฟล์สี

เก็บโปรไฟล์ ICC ที่ฝังอยู่ไว้ เพื่อให้สีถูกต้องหลังการแปลง

ปริภูมิสี

sRGB เหมาะสำหรับหน้าจอและเว็บไซต์ ควรคงค่าเดิมไว้สำหรับงานพิมพ์ ส่วนระดับสีเทาจะตัดสีออกทั้งหมด

ค่า DPI ในไฟล์

dpi

เป็นข้อมูลเมตาเท่านั้น ค่า 0 จะคงค่าเดิมไว้ เครื่องพิมพ์และบางเว็บไซต์จะอ่านค่านี้ แต่จะไม่เปลี่ยนขนาดภาพเป็นพิกเซล

วิธีใช้เครื่องมือนี้

1
อัปโหลดไฟล์โลโก้ SVG
ใช้สัญลักษณ์หรือตัวอักษรย่อของโลโก้ ไม่ใช้โลโก้แบบเต็มที่เป็นชื่อแบรนด์ viewBox แบบสี่เหลี่ยมจัตุรัสให้ผลลัพธ์คมชัดที่สุด
2
เลือกเก็บไอคอนไว้ทุกขนาด
ขนาดไอคอน เริ่มต้นที่ทุกขนาด (16–256) ซึ่งรวมทุกความละเอียดไว้ในไฟล์ .ico ไฟล์เดียว เลือกเพียงขนาดเดียวเมื่อโปรแกรมต้องการขนาดนั้นขนาดเดียวเท่านั้น
3
กด แปลงเป็น ICO
บันทึกไฟล์เป็น favicon.ico ในโฟลเดอร์รากของเว็บไซต์ หรือชี้ทางลัดของ Windows ไปที่ไฟล์นี้

คำตอบ

แปลง SVG เป็น ICO สำหรับ favicon ทำอย่างไร

อัปโหลดไฟล์ SVG คงค่า ขนาดไอคอน ไว้ที่ทุกขนาด (16–256) แล้วกด แปลงเป็น ICO คุณจะได้ไฟล์ .ico หนึ่งไฟล์ที่มีทุกความละเอียดซึ่งวาดจากเวกเตอร์โดยตรง และคงความโปร่งใสไว้

แปลง SVG เป็น ICO: ทำไมเวกเตอร์จึงเป็นต้นฉบับที่เหมาะที่สุด

ฟอร์แมต .ico มีมาตั้งแต่ Windows รุ่นแรก ๆ ส่วนธรรมเนียม favicon.ico มาจาก Internet Explorer 5 ในปี 1999 ซึ่งมองหาไฟล์ชื่อนี้ในรากของทุกเว็บไซต์ที่บุ๊กมาร์ก ICO เป็นคอนเทนเนอร์ขนาดเล็ก ประกอบด้วยไดเรกทอรีของรายการ แต่ละรายการเป็นบิตแมปสี่เหลี่ยมจัตุรัสแยกกัน ไฟล์เดียวจึงเก็บไอคอนแท็บ 16 px และไอคอนเดสก์ท็อป 256 px ไว้ด้วยกันได้ Windows Vista เพิ่มขนาดสูงสุดเป็น 256 × 256 และอนุญาตให้เก็บรายการขนาดใหญ่เหล่านั้นเป็น PNG

เนื่องจากแต่ละรายการเป็นบิตแมปของตัวเอง คุณภาพของไอคอนจึงขึ้นอยู่กับวิธีสร้างแต่ละขนาด จาก PNG ทุกขนาดคือการย่อจากพิกเซลชุดเดียวกัน จาก SVG ทุกขนาดคือการเรนเดอร์เส้นพาธใหม่ โดยคำนวณการลดรอยหยักตามกริดขนาดนั้นโดยเฉพาะ ที่ 16 × 16 px ซึ่งโลโก้มีพิกเซลให้ใช้เพียง 256 พิกเซล ความต่างนี้มองเห็นได้ชัด

1:1

16 × 16 px

16 × 16

แท็บเบราว์เซอร์ บุ๊กมาร์ก และรายการประวัติ

1:1

32 × 32 px

32 × 32

แท็บบนหน้าจอความละเอียดสูง และทางลัดบนแถบงานของ Windows

1:1

64 × 64 px

64 × 64

มุมมองเดสก์ท็อปที่ปรับขนาดและรายการที่ปักหมุด

1:1

128 × 128 px

128 × 128

ภาพตัวอย่างขนาดใหญ่ในตัวจัดการไฟล์

1:1

256 × 256 px

256 × 256

รายการ ICO ที่ใหญ่ที่สุด และไอคอนขนาดใหญ่พิเศษของ Explorer

SVG

Scalable Vector Graphics

SVG เป็นรูปแบบเวกเตอร์ที่อิงกับ XML ซึ่ง W3C กำหนดเป็นมาตรฐานในปี 2001 แทนที่จะใช้พิกเซล จะอธิบายรูปทรง เส้นพาธ และข้อความ จึงคมชัดในทุกขนาด และมักมีขนาดเล็กมากสำหรับโลโก้และไอคอน รองรับพื้นหลังโปร่งใส การจัดสไตล์ด้วย CSS สคริปต์ และภาพเคลื่อนไหว และเบราว์เซอร์ทุกตัวแสดงผลได้โดยตรง SVG ไม่เหมาะกับภาพถ่าย และภาพประกอบที่ซับซ้อนอาจแสดงผลช้า Illustrator, Inkscape, Figma และเบราว์เซอร์เปิดและแก้ไขไฟล์นี้ได้

การบีบอัด: –
พื้นหลังโปร่งใส: ได้
ภาพเคลื่อนไหว: ได้
เปิดตัว: 2001 · W3C

ตัวแปลงไฟล์ SVG

ICO

ไอคอน Windows

ICO คือรูปแบบไอคอนของ Microsoft ที่ใช้กับไอคอนโปรแกรมใน Windows และไอคอน favicon ของเว็บไซต์ ไฟล์ .ico หนึ่งไฟล์เก็บภาพได้หลายขนาด เช่น 16×16, 32×32, 48×48 และ 256×256 พิกเซล เพื่อให้ระบบเลือกขนาดที่เหมาะที่สุด แต่ละภาพเก็บเป็นบิตแมปหรือข้อมูล PNG ได้ และรองรับพื้นหลังโปร่งใสแบบ alpha เต็มรูปแบบ ICO ไม่ได้มีไว้สำหรับภาพถ่ายหรืองานภาพขนาดใหญ่ เบราว์เซอร์ Windows และโปรแกรมแก้ไขไอคอนส่วนใหญ่อ่านไฟล์นี้ได้

การบีบอัด: แบบไม่สูญเสียข้อมูล
พื้นหลังโปร่งใส: ได้
ภาพเคลื่อนไหว: ไม่ได้
เปิดตัว: Microsoft

ตัวแปลงไฟล์ ICO

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

เตรียมไฟล์ SVG ก่อนแปลง SVG เป็น ICO

ควรทำ	ไม่ควรทำ
ตั้ง viewBox เป็นสี่เหลี่ยมจัตุรัส เช่น `0 0 512 512`	พึ่งเส้นบางเฉียบที่จะหายไปเมื่อเล็กกว่า 32 px
เว้นขอบเล็กน้อยเพื่อไม่ให้สัญลักษณ์ชิดขอบไอคอน	ใช้โลโก้ชื่อแบรนด์แนวกว้างที่กลายเป็นรอยเลอะบาง ๆ
แปลงข้อความเป็นเส้นพาธเพื่อไม่ให้ฟอนต์เปลี่ยน	อ้างอิงรูปภาพภายนอกหรือเว็บฟอนต์ภายใน SVG
ใช้สัญลักษณ์หรือตัวอักษรย่อ ไม่ใช้ชื่อเต็ม	ใส่สี่เหลี่ยมสีขาวไว้หลังโลโก้ เว้นแต่ต้องการให้เห็นในแท็บสีเข้มด้วย

ตัวแปลงเรนเดอร์เฉพาะสิ่งที่ SVG อธิบายไว้เท่านั้น จึงดึงไฟล์ที่ลิงก์ไว้และฟอนต์ที่ไม่ได้ฝังไว้ไม่ได้ เครื่องมือออกแบบอย่าง Figma, Illustrator และ Inkscape ส่งออกข้อความเป็นเส้นพาธได้ ทำเช่นนั้นแล้วตัวอักษรจะตรงกับแบรนด์ของคุณทุกที่

เมื่อได้ไฟล์ .ico แล้ว ให้เพิ่ม PNG ขนาด 180 px สำหรับ Apple touch icon และไฟล์ SVG เองสำหรับเบราว์เซอร์ที่รองรับ favicon แบบเวกเตอร์ แปลง SVG เป็น PNG สร้าง PNG ได้ทุกขนาด หากต้นฉบับเป็นโลโก้บิตแมป แปลง PNG เป็น ICO ทำงานเดียวกันจากพิกเซลได้

คำถามเกี่ยวกับการแปลง SVG เป็น ICO

ทำไมควรแปลง SVG เป็น ICO แทนการเริ่มจาก PNG

ไฟล์ PNG ต้องถูกย่อลงสำหรับทุกขนาดไอคอน และการย่อภาพทำให้ขอบเบลอ ส่วน SVG จะถูกเรนเดอร์โดยตรงที่ 16, 32, 64, 128 และ 256 px ทำให้ทุกขนาดมีขอบคมตามกริดพิกเซลของตัวเอง

ถ้าเว็บไซต์มีไอคอน SVG แล้ว เบราว์เซอร์ยังต้องใช้ favicon.ico อยู่หรือไม่

Chrome และ Firefox อ่าน favicon แบบ SVG ที่ประกาศด้วยแท็ก link ได้ แต่เบราว์เซอร์ โปรแกรมอ่านฟีด และครอว์เลอร์จำนวนมากยังคงขอ /favicon.ico จากรากของเว็บไซต์เป็นค่าเริ่มต้น การมีทั้งสองแบบจึงครอบคลุมทุกกรณี

ถ้าไฟล์ SVG ไม่ใช่รูปสี่เหลี่ยมจัตุรัสจะเป็นอย่างไร

ช่องไอคอนเป็นสี่เหลี่ยมจัตุรัส โลโก้แนวกว้างจึงมีขอบว่างหรือดูเล็กเกินไป ให้แก้ viewBox ให้กว้างเท่ากับสูงก่อน หรือครอปเป็นรูปจัตุรัสด้วยเครื่องมือครอปรูปหลังส่งออกเป็น PNG

ไฟล์ ICO ยังคงพื้นหลังโปร่งใสไว้หรือไม่

ได้ ICO เก็บช่องอัลฟา พื้นที่ที่ไม่มีสีใน SVG จึงยังคงโปร่งใส และไอคอนแสดงสวยทั้งบนแท็บเบราว์เซอร์สีอ่อนและสีเข้ม

แปลง SVG เป็น ICO เพื่อใช้เป็นไอคอนโปรแกรมหรือโฟลเดอร์ใน Windows ได้หรือไม่

ได้ ใช้ไฟล์เดียวกันได้ Windows จะใช้ภาพขนาด 256 px สำหรับมุมมองไอคอนขนาดใหญ่และใหญ่พิเศษใน Explorer และใช้รายการขนาดเล็กกว่าสำหรับรายการไฟล์และแถบงาน

ทำไมไอคอนดูว่างเปล่าเมื่อแสดงที่ขนาด 16 px

เส้นบางและข้อความขนาดเล็กจะหายไปที่ขนาดนั้น เส้นหนา 2 หน่วยในอาร์ตบอร์ด 512 หน่วยจะเรนเดอร์ได้น้อยกว่าหนึ่งพิกเซลมากในไอคอน 16 px ให้ทำเส้นให้หนาขึ้นหรือใช้สัญลักษณ์ที่เรียบง่ายกว่าสำหรับ favicon

แปลง SVG เป็น ICO

แปลงไฟล์รูปภาพ