แปลง SVG เป็นไอคอน
โลโก้เวกเตอร์ไฟล์เดียวใช้ทำไอคอนได้ทุกตำแหน่ง ทั้ง favicon ทางลัดบน Windows แอปบน Mac และไอคอนตัวเปิดแอปบนมือถือ หน้านี้ตั้งค่าเริ่มต้นเป็น ICO หลายขนาด และเปลี่ยนเป็น ICNS หรือ PNG สำหรับแพลตฟอร์มอื่นได้
แปลงไฟล์รูปภาพ
หรือลากไฟล์ JPG, JPEG, JPE … มาวางที่นี่ ·
สูงสุด 95 MB ต่อไฟล์· ได้สูงสุด 20 ไฟล์· ลบหลังจาก 30 นาที
ไฟล์จะถูกประมวลผลบนเซิร์ฟเวอร์ของเราและถูกลบหลังจาก 30 นาที
ค่า 85 ทำให้ภาพถ่ายดูเหมือนต้นฉบับทุกประการ ควรลดค่านี้เฉพาะเมื่อต้องการไฟล์ที่เล็กลง
JPG, BMP และ EPS ไม่รองรับความโปร่งใส พิกเซลโปร่งใสจะถูกเติมด้วยสีนี้
รหัสสีแบบ Hex ที่ใช้แทนพิกเซลโปร่งใส เช่น #FFFFFF
รูปแบบนี้เก็บภาพได้เพียงภาพเดียว หากต้องการคงภาพเคลื่อนไหวไว้ ให้เลือกผลลัพธ์เป็น GIF หรือ WebP
ไอคอนหลายขนาดจะรวมความละเอียดหลายระดับไว้ในไฟล์เดียว เบราว์เซอร์และระบบปฏิบัติการจะเลือกขนาดที่ต้องใช้เอง
คงขนาดภาพเดิมไว้ หรือกำหนดด้านใดด้านหนึ่ง โดยระบบจะคงอัตราส่วนภาพไว้
จำนวนพิกเซลของด้านที่เลือกไว้ด้านบน
เปอร์เซ็นต์ของขนาดภาพต้นฉบับ
sRGB เหมาะสำหรับหน้าจอและเว็บไซต์ ควรคงค่าเดิมไว้สำหรับงานพิมพ์ ส่วนระดับสีเทาจะตัดสีออกทั้งหมด
เป็นข้อมูลเมตาเท่านั้น ค่า 0 จะคงค่าเดิมไว้ เครื่องพิมพ์และบางเว็บไซต์จะอ่านค่านี้ แต่จะไม่เปลี่ยนขนาดภาพเป็นพิกเซล
วิธีใช้เครื่องมือนี้
- 1
อัปโหลดไฟล์ SVG ทรงสี่เหลี่ยมจัตุรัส
เพิ่มไฟล์ SVG ของโลโก้หรือสัญลักษณ์ของคุณ โดยควรใช้ viewBox เป็นสี่เหลี่ยมจัตุรัส เพิ่มได้สูงสุด 20 ไฟล์พร้อมกัน เช่น เวอร์ชันสีอ่อนและสีเข้ม
- 2
เลือกฟอร์แมตไอคอน
ระบบเลือก ICO ไว้ให้แล้ว โดยตั้ง ขนาดไอคอน เป็น All sizes (16–256) หากต้องการไอคอนสำหรับ macOS ให้เลือก ICNS ใน แปลงเป็น หรือหากต้องการไอคอนสำหรับโทรศัพท์หรือสโตร์ ให้เลือก PNG แล้วกำหนดความกว้างใน ปรับขนาดภาพผลลัพธ์
- 3
แปลงแล้วนำไฟล์ไปวางในตำแหน่งที่ใช้
กด แปลงเป็น ICO (ป้ายปุ่มจะเปลี่ยนตามฟอร์แมตที่เลือก) จากนั้นดาวน์โหลด แล้วนำแต่ละไฟล์ไปวางในตำแหน่งที่แต่ละแพลตฟอร์มกำหนด
ไม่มีฟอร์แมตไอคอนเดียวที่ใช้ได้ทุกที่ Windows และเบราว์เซอร์ใช้ ICO, macOS ใช้ ICNS และโทรศัพท์ใช้ชุดไฟล์ PNG การเริ่มจาก SVG ทำให้ทุกฟอร์แมตถูกวาดใหม่จากเวกเตอร์ และคมชัดในทุกขนาด
แปลง SVG เป็นไอคอน: เวกเตอร์ไฟล์เดียว ได้ไฟล์ไอคอนสามแบบ
ไฟล์ไอคอนเป็นคอนเทนเนอร์ที่เก็บบิตแมปขนาดเล็กหลายภาพ ไม่ใช่เวกเตอร์ ระบบปฏิบัติการจะเลือกบิตแมปที่ใกล้เคียงกับขนาดที่ต้องการที่สุด ไอคอนที่ดีจึงมีหลายขนาด และแต่ละขนาดถูกเรนเดอร์ตามกริดของตัวเอง
พรีเซ็ต ICO ในหน้านี้สร้างไฟล์เดียวที่มีทุกขนาดตั้งแต่ 16 ถึง 256 px ซึ่งใช้ได้กับ favicon.ico และทางลัดบน Windows เปลี่ยน แปลงเป็น เป็น ICNS เพื่อได้คอนเทนเนอร์ไอคอนของ Apple หรือเป็น PNG สำหรับขนาดเดี่ยวที่ Android, iOS และแอปสโตร์ต้องการ
ตารางนี้แสดงข้อกำหนดที่แพลตฟอร์มหลักประกาศไว้สำหรับช่องไอคอนของตน
| หน่วยงาน | ข้อกำหนด | แหล่งที่มา |
|---|---|---|
| เดสก์ท็อปและทาสก์บาร์ของ Windows | ICO ที่มีหลายขนาด รวมถึง 16, 32, 48 และ 256 px | — |
| favicon ของเว็บไซต์ | favicon.ico ที่รากของเว็บไซต์ พร้อมขนาด 16, 32 และ 48 px และ PNG ขนาด 180 × 180 px สำหรับ apple-touch-icon | — |
| ไอคอนแอป macOS | ICNS หรือ asset catalog ของ Xcode ขนาดสูงสุด 1024 × 1024 px | — |
| หน้าแอปใน Google Play | PNG 32 บิต ขนาด 512 × 512 px ไม่เกิน 1,024 KB | — |
| Apple App Store | PNG ขนาด 1024 × 1024 px ไม่มีความโปร่งใส | — |
SVG
Scalable Vector Graphics
SVG เป็นรูปแบบเวกเตอร์ที่อิงกับ XML ซึ่ง W3C กำหนดเป็นมาตรฐานในปี 2001 แทนที่จะใช้พิกเซล จะอธิบายรูปทรง เส้นพาธ และข้อความ จึงคมชัดในทุกขนาด และมักมีขนาดเล็กมากสำหรับโลโก้และไอคอน รองรับพื้นหลังโปร่งใส การจัดสไตล์ด้วย CSS สคริปต์ และภาพเคลื่อนไหว และเบราว์เซอร์ทุกตัวแสดงผลได้โดยตรง SVG ไม่เหมาะกับภาพถ่าย และภาพประกอบที่ซับซ้อนอาจแสดงผลช้า Illustrator, Inkscape, Figma และเบราว์เซอร์เปิดและแก้ไขไฟล์นี้ได้
- การบีบอัด
- –
- พื้นหลังโปร่งใส
- ได้
- ภาพเคลื่อนไหว
- ได้
- เปิดตัว
- 2001 · W3C
ICO
ไอคอน Windows
ICO คือรูปแบบไอคอนของ Microsoft ที่ใช้กับไอคอนโปรแกรมใน Windows และไอคอน favicon ของเว็บไซต์ ไฟล์ .ico หนึ่งไฟล์เก็บภาพได้หลายขนาด เช่น 16×16, 32×32, 48×48 และ 256×256 พิกเซล เพื่อให้ระบบเลือกขนาดที่เหมาะที่สุด แต่ละภาพเก็บเป็นบิตแมปหรือข้อมูล PNG ได้ และรองรับพื้นหลังโปร่งใสแบบ alpha เต็มรูปแบบ ICO ไม่ได้มีไว้สำหรับภาพถ่ายหรืองานภาพขนาดใหญ่ เบราว์เซอร์ Windows และโปรแกรมแก้ไขไอคอนส่วนใหญ่อ่านไฟล์นี้ได้
- การบีบอัด
- แบบไม่สูญเสียข้อมูล
- พื้นหลังโปร่งใส
- ได้
- ภาพเคลื่อนไหว
- ไม่ได้
- เปิดตัว
- Microsoft
คนค้นหา SVG เป็นไอคอนเมื่อมีโลโก้เวกเตอร์หนึ่งไฟล์แต่ต้องใช้กับหลายแพลตฟอร์ม ซึ่งแต่ละแห่งมีคอนเทนเนอร์ไอคอนของตัวเอง ตั้งแต่ favicon.ico บนเว็บไซต์ ไปจนถึง ICNS บน Mac และ PNG หลายขนาดในแอปสโตร์
แปลง SVG เป็นไฟล์ไอคอนสำหรับ Windows, Mac, Android และ iOS
ใช้ ICO และตั้ง ขนาดไอคอน เป็น All sizes ต่อไป เปลี่ยนชื่อไฟล์ผลลัพธ์เป็น favicon.ico สำหรับรากของเว็บไซต์ หรือชี้ไปที่ไฟล์นี้ในหน้าต่าง Change Icon ของทางลัด Windows
- ไฟล์ .ico ไฟล์เดียวใช้ได้ทั้งแท็บ บุ๊กมาร์ก และทาสก์บาร์
- เพิ่ม PNG ขนาด 180 px สำหรับบุ๊กมาร์กบนหน้าจอโฮมของ iPhone
เลือก ICNS ใน แปลงเป็น ไฟล์มีขนาดสูงสุด 256 px สำหรับแอปบันเดิล ให้ส่งออก PNG ขนาด 512 และ 1024 px สำหรับ Xcode ด้วย
- ใช้ SVG สี่เหลี่ยมจัตุรัสและเว้นขอบไว้บ้าง
- ไอคอนของ Apple วางอยู่บนสี่เหลี่ยมมุมมน หากต้องการลักษณะนั้นให้วาดไว้ใน SVG
เลือก PNG แล้วกำหนดความกว้างใน ปรับขนาดภาพผลลัพธ์ ทีละขนาด หน้าแอปในสโตร์ต้องใช้ 512 px สำหรับ Google Play และ 1024 px สำหรับ App Store
- ไอคอน adaptive ของ Android ใช้เลเยอร์ 108 dp โดยมีโซนปลอดภัย 72 dp
- เอาความโปร่งใสออกจากไอคอน App Store
ออกแบบ SVG ให้ยังชัดเจนที่ขนาด 16 px
ไอคอนขนาด 16 × 16 px มีพิกเซลรวมเพียง 256 พิกเซล แบรนด์ส่วนใหญ่จึงมีสัญลักษณ์สำหรับไอคอนแยกต่างหาก มักเป็นเพียงสัญลักษณ์หรือตัวอักษรตัวเดียว ใช้รูปทรงหนาและมีสีน้อย หากของคุณยังไม่มี ให้ทำสำเนา SVG แบบเรียบง่ายสำหรับใช้เป็นไอคอน
ตรวจสอบ viewBox ก่อนแปลง viewBox แบบกว้างจะทำให้ไอคอนมีแถบว่างด้านบนและด้านล่างของสัญลักษณ์ จึงควรครอปให้เป็นสี่เหลี่ยมจัตุรัสก่อน คู่มือการครอปรูปตามอัตราส่วน อธิบายการครอปเป็นสี่เหลี่ยมจัตุรัส และ SVG to PNG ช่วยดูตัวอย่างขนาดใหญ่ได้อย่างรวดเร็วเพื่อประเมินดีไซน์
คำถามที่พบบ่อยเกี่ยวกับการแปลง SVG เป็นไอคอน
หน้านี้ต่างจากหน้าแปลง SVG เป็น ICO อย่างไร
SVG to ICO เน้นไฟล์ .ico ไฟล์เดียวสำหรับ favicon และ Windows ส่วนหน้านี้ครอบคลุมทุกที่ที่ใช้ไอคอน รวมถึง ICNS ของ macOS และไฟล์ PNG ขนาดคงที่ที่ Android, iOS และแอปสโตร์ต้องการ
ระบบปฏิบัติการแต่ละระบบใช้ไอคอนฟอร์แมตใด
Windows อ่านไฟล์ ICO, macOS อ่านไฟล์ ICNS หรือ asset catalog ที่สร้างใน Xcode ส่วน Android และ iOS ใช้ภาพ PNG ที่ระบุขนาดพิกเซลคงที่
แปลงครั้งเดียวได้ PNG ครบทุกขนาดที่แอปต้องใช้หรือไม่
ไม่ได้ เพราะ PNG เก็บได้เพียงหนึ่งขนาด การแปลงแต่ละครั้งจึงได้หนึ่งความกว้าง ให้ตั้ง ปรับขนาดภาพผลลัพธ์ เป็นหนึ่งขนาด แปลง แล้วเปลี่ยนตัวเลขและแปลงอีกครั้ง แต่ละขนาดถูกวาดใหม่จากเวกเตอร์ให้คมชัด
ไฟล์ ICNS จากหน้านี้รองรับไอคอน Mac จอ Retina หรือไม่
มีขนาดตั้งแต่ 16 ถึง 256 px ไอคอนแอป macOS ปัจจุบันยังมีขนาด 512 px และ 1024 px สำหรับจอ Retina ซึ่ง Xcode หรือ iconutil ของ Apple สร้างจากไฟล์ PNG ให้ส่งออกสองขนาดนี้เป็น PNG ที่นี่ แล้วเพิ่มเข้าไปในชุด
ไอคอนควรมีพื้นหลังโปร่งใสหรือไม่
สำหรับ ICO, ICNS และเลเยอร์ launcher ของ Android ควรโปร่งใส เพื่อให้ระบบวาดพื้นหลังเอง ไอคอน iOS App Store เป็นข้อยกเว้น Apple ปฏิเสธไอคอนการตลาดขนาด 1024 px ที่มีช่องอัลฟา ดังนั้นให้ใส่พื้นหลังสีทึบใน SVG สำหรับ PNG ไฟล์นั้น
ทำไมโลโก้ที่มีรายละเอียดมากจึงกลายเป็นก้อนเบลอเมื่อเป็นไอคอนขนาดเล็ก
ที่ขนาด 16 หรือ 32 px ไม่มีที่ว่างสำหรับเส้นบางหรือตัวอักษรเล็ก ให้ทำเส้นให้หนาจนครอบคลุมอย่างน้อยหนึ่งพิกเซลเต็มที่ขนาดเล็กที่สุด และเอาชื่อแบรนด์ที่เป็นตัวอักษรออก
เครื่องมือแปลงไอคอนอื่น ๆ
- แปลง SVG เป็น ICOแปลงไฟล์ SVG ให้เป็น ICO ครบทุกขนาดตั้งแต่ 16 ถึง 256 px เรนเดอร์จากเวกเตอร์โดยตรง คงพื้นหลังโปร่งใส ทำ favicon.ico หรือไอคอน Windows จากไฟล์โลโก้ได้ทันที
- แปลง PNG เป็น ICNSแปลงไฟล์ PNG ให้เป็นไอคอน .icns ของ Apple สำหรับแอป Mac สคริปต์ ไดรฟ์ DMG และโฟลเดอร์ ได้หลายขนาดในไฟล์เดียว คงพื้นหลังโปร่งใส ไม่ต้องใช้ Xcode
- แปลง SVG เป็น PNGแปลงโลโก้และไอคอน SVG ให้เป็น PNG ตามความกว้างที่เลือก ค่าเริ่มต้น 1024 px โดยพื้นหลังโปร่งใสยังคงอยู่ พร้อมอธิบายว่า DPI สัมพันธ์กับพิกเซลอย่างไร
- แปลงรูปเป็น ICOแปลงรูปภาพใดก็ได้เป็นไฟล์ .ico หลายขนาดสำหรับ favicon หรือช็อตคัต Windows รองรับ PNG, JPG, SVG, WebP, HEIC และอื่น ๆ ได้ 16 ถึง 256 px ในไฟล์เดียว
- แปลง ICNS เป็น PNGแปลงไอคอน .icns ของ macOS เป็น PNG ออนไลน์ ได้ภาพที่ใหญ่ที่สุดในชุดไอคอนสูงสุด 1024 × 1024 px พร้อมพื้นหลังโปร่งใส ใช้บน Windows ได้ด้วย
- แปลง PNG เป็น ICOแปลงไฟล์ PNG ให้เป็น ICO ออนไลน์ ได้ไฟล์ .ico ไฟล์เดียวที่มีทุกขนาดตั้งแต่ 16 ถึง 256 px พื้นหลังโปร่งใสคงเดิม ใช้ทำ favicon และช็อตคัต Windows ฟรี ไม่ต้องสมัคร