แปลง SVG เป็น ICO Scalable Vector Graphics ↔ Icon ฟรี ออนไลน์ ปลอดภัย
SVG ไม่ใช่รูปภาพ แต่เป็นชุดคำสั่งสำหรับวาดรูป ที่นี่ระบบทำตามคำสั่งเหล่านั้นหนึ่งครั้ง ที่ขนาดที่คุณเลือก แล้วบันทึกผลเป็น ICO ภาพวาดถูกเรนเดอร์ในแซนด์บอกซ์ที่ไม่มีสิ่งใดในไฟล์รันได้ และไม่มีการอัปโหลดใด ๆ
แปลงไฟล์ของคุณ
วางไฟล์ SVG ที่นี่ หรือเลือกไฟล์
ไฟล์ของคุณไม่เคยออกจากอุปกรณ์นี้ ทุกอย่างทำงานในเบราว์เซอร์ของคุณ
ไม่มีการอัปโหลด
อะไรทำให้เวกเตอร์ต่างออกไป
SVG ไม่ใช่รูปภาพ แต่เป็นชุดคำสั่งสำหรับวาดรูปภาพ เช่น วงกลมรัศมีเท่านี้ตรงตำแหน่งนี้ เส้นตรงจากจุดนี้ไปยังจุดนั้น รูปทรงนี้ที่ระบายด้วยสีนั้น SVG กลายเป็นมาตรฐานของเว็บในปี 2001 และเพราะเก็บวิธีวาดไว้แทนที่จะเก็บผลลัพธ์ ไฟล์เดียวกันจึงพิมพ์ลงบนป้ายโฆษณาขนาดใหญ่ได้ และแสดงเป็นไอคอนขนาด 16 พิกเซลได้เช่นกัน ส่วน PNG หรือ JPEG เก็บในทางตรงข้าม คือเก็บตารางจุดสีที่เสร็จสมบูรณ์แล้ว โดยไม่มีบันทึกว่าอะไรเป็นผู้วาดจุดเหล่านั้น ความไม่สมมาตรนี้เป็นตัวกำหนดทุกอย่างในหน้านี้ การแปลงจากเวกเตอร์เป็นแรสเตอร์ก็คือการวาดตามคำสั่งในขนาดที่เลือก ส่วนการแปลงย้อนกลับคือการแปลงภาพเป็นเวกเตอร์ (tracing) ซึ่งโปรแกรมต้องดูตารางจุดแล้วเดาว่ารูปทรงแบบใดน่าจะทำให้เกิดภาพนั้น
คุณจะพบได้ที่ไหน
โลโก้ ไอคอน แผนที่ แผนภาพ และแผนภูมิ มักอยู่ในรูปแบบ SVG เพราะต้องอ่านได้ชัดทุกขนาดและมักต้องเปลี่ยนสีบ่อย ไอคอนเว็บ (favicon) และไอคอนแอปก็สร้างจากไฟล์ประเภทนี้ ส่วนการแปลงในทิศทางตรงข้ามใช้เมื่อต้องเปลี่ยนเวกเตอร์ให้เป็นภาพแบน เช่น โปรแกรมอีเมลที่ไม่แสดง SVG ภาพตัวอย่างสำหรับโซเชียลมีเดีย เอกสารที่ต้องส่งให้คนที่ใช้ซอฟต์แวร์รุ่นเก่ากว่าของคุณพิมพ์ หรือแบบฟอร์มอัปโหลดที่รับเฉพาะภาพถ่าย
คำถามที่คนมักถาม
ฉันแปลงภาพถ่ายเป็นเวกเตอร์แล้วผลออกมาแย่มาก เพราะอะไร
เพราะการแปลงภาพเป็นเวกเตอร์ไม่ได้ออกแบบมาสำหรับภาพถ่าย วิธีนี้ทำงานโดยหาบริเวณที่สีใกล้เคียงกันแล้ววาดเส้นขอบล้อมรอบแต่ละบริเวณ ซึ่งเหมาะกับงานกราฟิกแบบแบน เช่น โลโก้ ลายฉลุ หรือภาพวาดเส้น แต่ใช้ไม่ได้กับภาพถ่าย เพราะในภาพถ่ายทุกบริเวณไล่เฉดสีต่อเนื่องไปยังบริเวณถัดไป โปรแกรมจึงต้องสร้างเส้นแบ่งขึ้นมาเองทั้งที่ไม่มีเส้นแบ่งอยู่จริง ผลที่ได้จึงเป็นภาพคล้ายโปสเตอร์ที่เป็นหย่อมสีแบน ๆ หรือเป็นไฟล์ที่มีรูปทรงเล็ก ๆ นับหมื่นรูป สำหรับภาพถ่าย ควรเก็บไว้เป็นแรสเตอร์
ทำไม SVG ของฉันดูต่างไปเมื่อเปิดในโปรแกรมอื่น
สาเหตุส่วนใหญ่คือฟอนต์ SVG ที่มีข้อความอยู่ภายในจะอ้างถึงฟอนต์ด้วยชื่อ และคาดหวังให้เครื่องที่เปิดไฟล์มีฟอนต์นั้น หากไม่มี ระบบจะนำฟอนต์อื่นมาแทน และเลย์เอาต์ก็เลื่อนผิดไป วิธีแก้คือแปลงข้อความเป็นเส้นโครงร่าง (outline) ก่อนส่งออก ซึ่งจะเปลี่ยนตัวอักษรแต่ละตัวให้เป็นรูปทรง และทำให้ไฟล์แสดงผลเหมือนกันทุกที่ แต่ข้อความจะแก้ไขหรือเลือกไม่ได้อีกต่อไป อีกสาเหตุที่พบบ่อยคือเอฟเฟกต์ขั้นสูง เช่น ตัวกรองและโหมดการผสมสี
ไฟล์จะสูญเสียคุณภาพหรือไม่?
ขึ้นอยู่กับว่ารูปแบบทั้งสองเก็บอะไรได้บ้าง การแปลงระหว่างรูปแบบที่เก็บสิ่งเดียวกัน เช่น PNG เป็น BMP หรือ WAV เป็น FLAC ไม่สูญเสียอะไรเลย การแปลงไปเป็นรูปแบบที่ทิ้งข้อมูลบางส่วนเพื่อประหยัดพื้นที่ เช่น JPEG หรือ MP3 จะสูญเสียเล็กน้อยทุกครั้ง และการแปลงกลับไม่ได้นำสิ่งที่เสียไปคืนมา เมื่อมีตัวเลือกให้เลือก หน้านี้จะเอนไปทางรักษาคุณภาพเดิมไว้ มากกว่าทำให้ไฟล์เล็กที่สุด
ไฟล์ของฉันถูกอัปโหลดไปที่ใดหรือไม่?
ไม่ การแปลงเกิดขึ้นภายในเบราว์เซอร์ บนเครื่องของคุณเอง ไฟล์ไม่เคยออกจากเครื่อง และที่นี่ไม่มีเซิร์ฟเวอร์ที่จะรับไฟล์ได้ นั่นคือเหตุผลที่ไฟล์ขนาดใหญ่ถูกจำกัดด้วยหน่วยความจำของเครื่องคุณเอง ไม่ใช่ด้วยการอัปโหลด และเหตุผลที่ไม่มีสิ่งใดที่คุณแปลงไปปรากฏในบันทึกของใครได้ รวมถึงของเราด้วย เครื่องมือเสียงและวิดีโอจะดึงเอนจินแปลงไฟล์จากเว็บไซต์นี้ในการใช้ครั้งแรก ประมาณ 30 เมกะไบต์ครั้งเดียว หลังจากนั้นงานก็ยังเกิดขึ้นบนเครื่องของคุณทั้งหมด
ทำไมผู้คนจึงแปลง SVG เป็น ICO
ไฟล์ ICO คือไอคอน เป็นรูปภาพเล็ก ๆ ที่ปรากฏบนแท็บของเบราว์เซอร์ข้างชื่อหน้า ในรายการบุ๊กมาร์ก บนทางลัด และที่มุมของหน้าต่างโปรแกรมบน Windows หากคุณดูแลเว็บไซต์ คุณต้องการไอคอนที่มีเครื่องหมายของคุณ หากคุณสร้างโปรแกรม คุณต้องมีไอคอนสำหรับไฟล์ปฏิบัติการของโปรแกรม และหากคุณมีโลโก้ มันมีแนวโน้มสูงที่จะเป็นภาพวาดเวกเตอร์ในรูปแบบ SVG นั่นคือเหตุผลที่ผู้คนแปลง SVG เป็น ICO พวกเขามีภาพวาดของเครื่องหมาย และต้องการไฟล์ไอคอนที่เบราว์เซอร์และระบบปฏิบัติการยังคงเรียกหาด้วยชื่อ
SVG ไม่ใช่รูปภาพ แต่เป็นชุดคำสั่งสำหรับวาดรูปภาพ เช่น วาดวงกลมตรงนี้ เส้นโค้งตรงนั้น เติมรูปร่างนี้ด้วยสีนั้น เพราะเป็นคำสั่งไม่ใช่พิกเซล SVG จึงแสดงได้ทุกขนาดโดยไม่พร่ามัว ส่วนไอคอนตรงกันข้าม คือรูปภาพเล็ก ๆ จำนวนหนึ่งรวมกันไว้ในไฟล์เดียว แต่ละรูปทำขึ้นสำหรับขนาดหนึ่ง ๆ หน้านี้ทำตามคำสั่งของ SVG ของคุณหนึ่งครั้งต่อหนึ่งขนาด และรวมผลลัพธ์เป็นไฟล์ ICO ไฟล์เดียว
หน้านี้แปลง SVG เป็น ICO ในเบราว์เซอร์ของคุณ ภาพวาดถูกเรนเดอร์ในแซนด์บ็อกซ์ที่ไม่มีสิ่งใดในไฟล์ทำงานได้ และไม่มีอะไรถูกอัปโหลด ด้านล่างคุณจะพบว่าทำงานอย่างไร ไฟล์มีขนาดใดบ้าง เหตุใดไอคอนขนาดเล็กจึงเป็นปัญหาพิเศษ และควรทำอย่างไร
การแปลงทำงานอย่างไร
หกขนาดในไฟล์เดียว
ICO ที่ได้ประกอบด้วยหกขนาดในไฟล์เดียว ได้แก่ 16, 32, 48, 64, 128 และ 256 พิกเซล แต่ละขนาดถูกวาดใหม่จาก SVG แทนที่จะย่อจากกันและกัน ดังนั้นเวอร์ชัน 16 พิกเซลจึงเป็นคำสั่งที่ทำตามที่ 16 พิกเซล ไม่ใช่สำเนาย่อของอันใหญ่ ทุกขนาดคงความโปร่งใสไว้ จากนั้นระบบปฏิบัติการหรือเบราว์เซอร์จะเลือกขนาดที่เหมาะกับที่ซึ่งแสดงไอคอน
แซนด์บ็อกซ์ที่ไม่มีสิ่งใดทำงานได้
ไฟล์ SVG ในหลักการสามารถมีสคริปต์และการอ้างอิงถึงสิ่งอื่นได้ เพื่อไม่ให้เป็นความเสี่ยงเลย ภาพวาดถูกเรนเดอร์ในแซนด์บ็อกซ์ที่ไม่มีสิ่งใดในไฟล์ทำงานได้ มีเพียงรูปร่างที่ถูกระบายสี ซึ่งปลอดภัยแม้สำหรับไฟล์ที่คุณดาวน์โหลดมาจากที่ที่คุณไม่ไว้ใจทั้งหมด
ทำไมการวาดใหม่จึงดีกว่าการย่อ
เมื่อคุณย่อรูปภาพใหญ่ให้เป็นรูปเล็กจิ๋ว รายละเอียดจะกลืนเข้าหากันและเส้นจะกลายเป็นสีเทา การวาดใหม่จากคำสั่งเวกเตอร์ที่ขนาดเป้าหมายให้ผลที่คมชัดที่สุดที่แต่ละขนาดจะมีได้ เพราะเส้นถูกวางบนตารางพิกเซลโดยตรง
สิ่งที่คงไว้
หกขนาด
คุณจะได้รับ 16, 32, 48, 64, 128 และ 256 พิกเซล ซึ่งครอบคลุมที่ที่ไอคอนมักแสดง ได้แก่ แท็บเบราว์เซอร์ แถบงาน ทางลัดบนเดสก์ท็อป รายการไฟล์ และตัวอย่างขนาดใหญ่
ความโปร่งใส
ความโปร่งใสถูกคงไว้ในทั้งหกขนาด พื้นที่ของ SVG ที่ไม่มีการเติมสีจะยังโปร่งใสใน ICO ดังนั้นไอคอนจึงรับสีของสิ่งที่อยู่ข้างหลัง
รูปร่างของเครื่องหมาย
ภาพวาดถูกคงไว้ตามเดิม พร้อมสีและรูปร่าง หาก SVG ไม่เป็นสี่เหลี่ยมจัตุรัส ภาพจะถูกจัดให้พอดีในสี่เหลี่ยมจัตุรัสของแต่ละไอคอนโดยไม่ถูกยืด
สิ่งที่คุณควรรู้ก่อนแปลง SVG เป็น ICO
ไอคอนเป็นภาพวาดอีกแบบ
ไอคอนไม่ใช่รูปภาพขนาดเล็ก แต่เป็นภาพวาดอีกแบบ สิ่งใดที่มีเส้นละเอียดหรือข้อความเล็กจะกลายเป็นก้อนเละที่ 16 พิกเซล ไม่ว่าจะเรนเดอร์อย่างระมัดระวังเพียงใด โลโก้ที่ดูยอดเยี่ยมบนโปสเตอร์อาจอ่านไม่ออกเมื่อเป็นฟาวิคอน หากผลลัพธ์ดูขุ่นมัว คำตอบคือ SVG ที่เรียบง่ายขึ้น ไม่ใช่การแปลงที่ดีขึ้น
ออกแบบสำหรับขนาดที่เล็กที่สุด
ไอคอนที่ดีที่สุดสร้างขึ้นโดยคำนึงถึงขนาดที่เล็กที่สุด คือรูปร่างหนาหนึ่งรูป สีจำนวนจำกัด ไม่มีเส้นบางเฉียบ และไม่มีตัวอักษรนอกจากอักษรเดี่ยว ถ้าทำได้ ให้เตรียมโลโก้เวอร์ชันง่ายเป็น SVG แยกต่างหากเพื่อจุดประสงค์นี้ แล้วแปลง SVG เป็น ICO ด้วยไฟล์นั้น
ฟอนต์และรูปภาพจากที่อื่นจะไม่ถูกแก้ไข
ฟอนต์และรูปภาพที่ SVG ดึงมาจากที่อื่นจะไม่ถูกแก้ไขในแซนด์บ็อกซ์ ข้อความที่ตั้งด้วยเว็บฟอนต์ที่โหลดจากเซิร์ฟเวอร์จะถอยไปใช้ฟอนต์ระบบ และรูปภาพที่ลิงก์จากภายนอกไฟล์จะหายไป เพื่อผลลัพธ์ที่ดีที่สุด ให้แปลงข้อความเป็นเส้นขอบและฝังรูปภาพ
วิธีแปลง SVG เป็น ICO ที่นี่
เพิ่มภาพวาดของคุณ
ลากไฟล์ SVG มาวางที่หน้านี้หรือเลือกจากอุปกรณ์ของคุณ ไฟล์ถูกอ่านภายในเบราว์เซอร์ของคุณและไม่ถูกอัปโหลด
แปลง
กดปุ่ม หกขนาดถูกวาดทีละขนาด ซึ่งใช้เวลาครู่หนึ่ง เปิดหน้านี้ไว้จนกว่าจะเสร็จ
ดาวน์โหลดและทดสอบ
ดาวน์โหลด ICO แล้วลองใช้ในที่ที่จะใช้จริง บนเว็บไซต์ ให้วางไว้ในโฟลเดอร์รากภายใต้ชื่อ favicon.ico หรือลิงก์ไปยังไฟล์ในส่วนหัวของหน้า แล้วดูที่แท็บของเบราว์เซอร์ บน Windows คุณสามารถกำหนดให้เป็นทางลัดและดูว่าเป็นอย่างไรที่ขนาดต่าง ๆ
มองใกล้ขึ้นที่ SVG และ ICO
เวกเตอร์และชุดรวม
SVG คือภาพวาดเดียวที่เรนเดอร์ได้ทุกขนาด ICO คือคอนเทนเนอร์ที่มีรูปภาพหลายรูปอยู่ข้างใน แต่ละรูปมีขนาดคงที่ ซอฟต์แวร์ที่แสดงไอคอนจะเลือกรูปที่ใกล้เคียงที่สุดกับขนาดที่ต้องการ ซึ่งหลีกเลี่ยงการปรับขนาดที่พร่ามัว การแปลง SVG เป็น ICO คือการเรนเดอร์ภาพวาดที่ขนาดที่คอนเทนเนอร์คาดว่าจะมี
ไอคอนถูกใช้ที่ไหน
เบราว์เซอร์ใช้ขนาดเล็กที่สุดสำหรับแท็บ และขนาดที่ใหญ่กว่าสำหรับบุ๊กมาร์กและหน้าแท็บใหม่ Windows ใช้สำหรับแถบงาน เมนูเริ่ม และ Explorer อุปกรณ์เคลื่อนที่มีชุดขนาดรูปภาพของตนเองสำหรับหน้าจอหลัก ซึ่งโดยปกติเป็นไฟล์ PNG ไม่ใช่ ICO หากคุณเตรียมไอคอนแอปสำหรับโทรศัพท์ SVG เป็น PNG ที่ขนาดที่แพลตฟอร์มต้องการเป็นเส้นทางที่ดีกว่า
ฟาวิคอนในปัจจุบัน
เบราว์เซอร์สมัยใหม่ยอมรับ PNG และแม้แต่ SVG เป็นฟาวิคอน แต่ ICO ยังคงเป็นรูปแบบที่ใช้ได้ทุกที่ รวมถึงเบราว์เซอร์เก่า ตัวอ่านฟีดบางตัว และเครื่องมือที่มองหา favicon.ico โดยอัตโนมัติ การมีไว้สักอันเป็นตัวเลือกที่ปลอดภัย
สถานการณ์ทั่วไปโดยละเอียด
ฟาวิคอนของเว็บไซต์
แปลง SVG เป็น ICO บันทึกไฟล์เป็น favicon.ico ในรากของเว็บไซต์ของคุณ และลิงก์ไปยังไฟล์ แท็บของเบราว์เซอร์ทุกตัวจะมีเครื่องหมายของคุณ ทำให้หน้าเว็บจดจำได้ท่ามกลางแท็บที่เปิดอยู่มากมาย
ไอคอนของโปรแกรม Windows
โปรแกรมบน Windows มีไอคอนในไฟล์ปฏิบัติการและในทางลัดของโปรแกรม นักพัฒนาต้องการ ICO หลายขนาดสำหรับสิ่งนี้ หกขนาดที่คุณได้รับครอบคลุมข้อกำหนดตามปกติ
ทางลัดและโฟลเดอร์
บน Windows คุณให้ไอคอนของคุณเองแก่ทางลัดหรือโฟลเดอร์ได้ ICO ที่สร้างจากโลโก้ของคุณทำให้เดสก์ท็อปหรือโฟลเดอร์โครงการของคุณจดจำได้ง่ายขึ้น
เว็บไซต์ธุรกิจขนาดเล็กและบล็อก
ฟาวิคอนเป็นรายละเอียดเล็ก ๆ ที่ทำให้เว็บไซต์ดูสมบูรณ์ หากโลโก้ของคุณเป็น SVG การแปลงนี้สร้างไฟล์ที่ตัวสร้างเว็บไซต์ขอให้คุณอัปโหลด
คำแนะนำเชิงปฏิบัติก่อนแปลง SVG เป็น ICO
ทำภาพวาดให้เรียบง่าย
ลบเส้นละเอียด ตัดตัวอักษรออกหรือเก็บไว้ตัวเดียว และใช้รูปร่างหนา ดู SVG ที่ 16 พิกเซลในโปรแกรมวาดภาพของคุณก่อนแปลง เพื่อดูว่าไอคอนที่เล็กที่สุดจะเป็นอย่างไร
ทำภาพวาดให้เป็นสี่เหลี่ยมจัตุรัส
ไอคอนเป็นสี่เหลี่ยมจัตุรัส หากโลโก้ของคุณกว้าง ให้วางบนผืนผ้าใบสี่เหลี่ยมจัตุรัสพร้อมขอบเล็กน้อย เพื่อไม่ให้ถูกตัดและไม่เล็กจิ๋วภายในสี่เหลี่ยม
ตรวจสอบความคมชัด
แท็บเบราว์เซอร์อาจสว่างหรือมืด เครื่องหมายที่มีความคมชัดสูงกับทั้งสองพื้นหลังมองเห็นได้ง่ายกว่า เส้นขอบสีขาวบางบนเครื่องหมายสีเข้ม หรือรูปร่างสีทึบ มักใช้ได้ผล
เก็บ SVG ไว้
SVG คือต้นฉบับ หากคุณตัดสินใจเปลี่ยนไอคอนในภายหลัง คุณจะต้องใช้มันเพื่อแปลง SVG เป็น ICO อีกครั้ง
คำถามที่ผู้คนถามก่อนแปลง
ทำไมไอคอนของฉันดูพร่ามัวที่ 16 พิกเซล
เพราะ 16 พิกเซลน้อยมาก เส้นละเอียดและข้อความเล็กแสดงที่นั่นไม่ได้ ให้ทำภาพวาดให้เรียบง่ายแทนที่จะมองหาการแปลงที่ดีกว่า
ไฟล์มีขนาดใดบ้าง
16, 32, 48, 64, 128 และ 256 พิกเซล แต่ละขนาดวาดใหม่จาก SVG และทั้งหมดมีความโปร่งใส
ความโปร่งใสจะคงอยู่หรือไม่
ใช่ พื้นหลังโปร่งใสใน SVG จะโปร่งใสในทั้งหกขนาดของ ICO
ฉันใช้ไฟล์เป็นฟาวิคอนได้หรือไม่
ได้ ตั้งชื่อว่า favicon.ico วางไว้ในรากของเว็บไซต์ของคุณ หรือลิงก์ไปจากส่วนหัวของหน้าของคุณ
ไฟล์ของฉันถูกอัปโหลดหรือไม่
ไม่ การแปลงทำงานในเบราว์เซอร์ของคุณและไฟล์ไม่เคยออกจากอุปกรณ์ของคุณ
ฉันสร้าง SVG จากไอคอนได้หรือไม่
ได้ในระดับหนึ่ง ICO เป็น SVG ลากเส้นไอคอนให้เป็นรูปร่าง แม้ขนาดเล็กจะจำกัดสิ่งที่กู้คืนได้
การเลือกอย่างชาญฉลาดเมื่อแปลง SVG เป็น ICO
ICO หรือ PNG
สำหรับฟาวิคอนที่ใช้ได้ทุกที่ ให้เลือก ICO สำหรับไอคอนแอปบนโทรศัพท์และสำหรับรูปภาพบนหน้าเว็บ PNG เป็นรูปแบบที่ใช้กันตามปกติ SVG เป็น PNG ให้สิ่งนั้นแก่คุณ
คิดถึงทั้งชุด
หากคุณเตรียมแบรนด์ คุณอาจต้องมีโลโก้เป็น PNG ฟาวิคอนเป็น ICO และเวอร์ชันสำหรับพิมพ์เป็น PDF SVG เป็น PDF เก็บภาพวาดไว้เป็นภาพวาดสำหรับการพิมพ์
ทดสอบบนแท็บจริง
ดูไอคอนในแท็บเบราว์เซอร์จริง ทั้งในธีมสว่างและธีมมืด นั่นคือที่ที่คนส่วนใหญ่จะพบมัน
การได้ผลลัพธ์ที่ดีหลังการแปลง
ล้างแคชของเบราว์เซอร์
เบราว์เซอร์เก็บฟาวิคอนไว้เป็นเวลานาน หากคุณเปลี่ยนไอคอนแล้วยังเห็นอันเก่า ให้ล้างแคชหรือเปิดเว็บไซต์ในหน้าต่างส่วนตัว
ตรวจสอบทุกขนาด
หากคุณมีเครื่องมือที่เปิดไฟล์ ICO ได้ ให้ดูแต่ละขนาด เครื่องหมายที่ดีที่ 256 พิกเซลอาจอ่านไม่ออกที่ 16 และนั่นบอกคุณว่าควรทำให้เรียบง่ายขึ้นหรือไม่
ตั้งชื่อให้ถูกต้อง
เบราว์เซอร์มองหา favicon.ico ในรากของเว็บไซต์โดยค่าเริ่มต้น คงชื่อนั้นไว้ เว้นแต่คุณจะลิงก์ไปยังไฟล์อย่างชัดเจน
การออกแบบเครื่องหมายที่อยู่รอดในขนาดที่เล็กที่สุด
เริ่มจากตาราง 16 พิกเซล
วิธีที่เชื่อถือได้ที่สุดในการได้ผลลัพธ์ที่ดีเมื่อคุณแปลง SVG เป็น ICO คือออกแบบโดยคำนึงถึงขนาดที่เล็กที่สุด ลองนึกภาพตารางสิบหกคูณสิบหกช่อง แล้วถามว่าคุณวางอะไรลงไปได้ วงกลม ตัวอักษร สัญลักษณ์ง่าย ๆ ได้ ลายเซ็น ตราสัญลักษณ์พร้อมคำขวัญ ไม่ได้ ขนาดที่ใหญ่กว่าจะดูดีไม่ว่าคุณจะวาดอะไร ดังนั้นขนาดเล็กคือข้อจำกัดที่ต้องออกแบบให้
ใช้รูปร่างที่แข็งแรงและสีน้อย
สองหรือสามสีที่มีความคมชัดชัดเจนอ่านได้ดีกว่าการไล่เฉดสีหลายสี รูปร่างทึบที่เติมเต็มสี่เหลี่ยมส่วนใหญ่จดจำได้ง่ายกว่าเส้นขอบบาง เพราะแต่ละพิกเซลมีส่วนของเครื่องหมายมากกว่า
เว้นที่หายใจเล็กน้อย
เครื่องหมายที่แตะขอบสี่เหลี่ยมอาจดูอึดอัด และบางระบบเพิ่มการโค้งมนหรือเส้นขอบของตนเอง ขอบหนึ่งหรือสองพิกเซลที่ขนาดเล็กที่สุดช่วยรักษารูปร่างให้สมบูรณ์
ดูข้างไอคอนอื่น
เปิดแท็บของเว็บไซต์ที่รู้จักดีสองสามแห่งแล้วเปรียบเทียบ คุณจะเห็นว่าไอคอนที่ใช้ได้ดีที่สุดเรียบง่ายมาก ยืมวินัยนั้นมาก่อนที่คุณจะแปลง SVG เป็น ICO แล้วผลลัพธ์ของคุณจะยืนหยัดได้ท่ามกลางแท็บมากมาย
ความเป็นส่วนตัวและการจัดการ
ทำไมการแปลงในเครื่องจึงสำคัญสำหรับภาพวาด
โลโก้และเครื่องหมายแบรนด์อาจเป็นความลับก่อนเผยแพร่ ตัวแปลงออนไลน์จำนวนมากอัปโหลดไฟล์ของคุณไปยังเซิร์ฟเวอร์ ประมวลผล และส่งผลลัพธ์กลับมา และสำเนาจะอยู่บนเครื่องที่คุณควบคุมไม่ได้ชั่วระยะหนึ่ง ที่นี่เบราว์เซอร์ของคุณเองทำงาน ภาพวาดจึงอยู่บนอุปกรณ์ของคุณ
จะเกิดอะไรขึ้นเมื่อคุณออกไป
เมื่อคุณปิดหน้านี้ ไฟล์ที่แปลงแล้วจะหายไปจากเบราว์เซอร์ ดังนั้นให้ดาวน์โหลดก่อน ไม่มีสิ่งใดเกี่ยวกับภาพวาดของคุณถูกเก็บไว้
หากมีบางอย่างผิดพลาด
ไอคอนออกมาว่างเปล่า
SVG อาจขาดขนาดหรือวิวบ็อกซ์ เปิดในโปรแกรมแก้ไขข้อความและตรวจสอบว่ามีความกว้างและความสูงหรือวิวบ็อกซ์ หรือแก้ไขในโปรแกรมวาดภาพของคุณ
ไอคอนถูกตัด
SVG บางไฟล์มีองค์ประกอบที่ยื่นออกนอกพื้นที่ที่ประกาศไว้ ปรับวิวบ็อกซ์ในต้นฉบับเพื่อให้ทุกอย่างพอดีด้านใน
หน้าค้าง
ทุกอย่างทำงานบนอุปกรณ์ของคุณ ลองอีกครั้งบนคอมพิวเตอร์ หรือด้วยภาพวาดที่เรียบง่ายกว่า
เครื่องมือที่เกี่ยวข้อง
เครื่องมือตระกูลเดียวกันครอบคลุมงานใกล้เคียง สำหรับรูปภาพในขนาดที่คุณเลือก ใช้ SVG เป็น PNG หรือ SVG เป็น JPG สำหรับเอกสารที่คมชัดในทุกการซูม SVG เป็น PDF เก็บภาพวาดไว้เป็นภาพวาด สำหรับการลากเส้นรูปภาพกลับเป็นรูปร่าง ICO เป็น SVG PNG เป็น SVG และ JPG เป็น SVG ทำงานนี้ได้
ตัวอย่างการใช้งาน
สมมุติว่าคุณเริ่มบล็อกเล็ก ๆ และโลโก้ของคุณเป็น SVG คือใบไม้สีเขียวที่มีชื่อบล็อกอยู่ใต้ใบไม้ คุณวาง SVG ที่นี่และกดปุ่ม ICO มาถึง และในแท็บเบราว์เซอร์ จำใบไม้ได้ แต่ชื่อด้านล่างอ่านไม่ออก คุณเปิดโปรแกรมวาดภาพ สร้างเวอร์ชันที่มีแต่ใบไม้ แปลง SVG เป็น ICO อีกครั้ง และอัปโหลดไฟล์ใหม่เป็น favicon.ico ตอนนี้แท็บแสดงใบไม้สีเขียวที่ชัดเจน และโลโก้เต็มยังอยู่บนหน้า
รายการตรวจสอบสั้น ๆ
ก่อนแปลง
ทำภาพวาดให้เรียบง่าย ทำให้เป็นสี่เหลี่ยมจัตุรัส แปลงข้อความเป็นเส้นขอบและฝังรูปภาพ
ระหว่างแปลง
อยู่ที่หน้านี้จนกว่าไฟล์จะพร้อม
หลังแปลง
ทดสอบ ICO ในแท็บเบราว์เซอร์และในทางลัด ในธีมสว่างและมืด และเก็บ SVG ไว้
ข้อผิดพลาดที่พบบ่อย
การใช้โลโก้เต็ม
ตัวอักษรและรายละเอียดละเอียดหายไปที่ 16 พิกเซล ใช้เครื่องหมายที่ทำให้เรียบง่าย
การคาดหวังว่าการแปลงที่ดีกว่าจะแก้ภาพวาดที่ซับซ้อน
ข้อบกพร่องอยู่ที่ขนาด ไม่ใช่เครื่องมือ ทำ SVG ให้เรียบง่าย
การลืมแคช
ฟาวิคอนเก่าอาจค้างอยู่ในเบราว์เซอร์ ล้างแคชก่อนตัดสินว่าอันใหม่ล้มเหลว
ภาพวาดของคุณอยู่บนอุปกรณ์ของคุณ
การแปลงเกิดขึ้นในเครื่อง ภาพวาดของคุณถูกอ่านโดยเบราว์เซอร์ของคุณเอง ระบายสีที่นั่น และส่งคืนเป็น ICO ไม่มีสิ่งใดถูกอัปโหลด จึงไม่มีสำเนาไปอยู่บนเซิร์ฟเวอร์และไม่มีใครอื่นเห็นได้ สำหรับเครื่องหมายแบรนด์ที่ยังไม่เผยแพร่ นั่นคือวิธีที่ปลอดภัยในการแปลง SVG เป็น ICO
สรุป
หากต้องการแปลง SVG เป็น ICO ที่นี่ ให้วางภาพวาดแล้วกดปุ่ม SVG ไม่ใช่รูปภาพแต่เป็นคำสั่งสำหรับวาดรูปภาพ และที่นี่คำสั่งเหล่านั้นถูกทำตามหนึ่งครั้งต่อหนึ่งขนาดและบันทึกผลลัพธ์เป็น ICO ภาพวาดถูกเรนเดอร์ในแซนด์บ็อกซ์ที่ไม่มีสิ่งใดในไฟล์ทำงานได้ และไม่มีอะไรถูกอัปโหลด ไฟล์ประกอบด้วยหกขนาด ได้แก่ 16, 32, 48, 64, 128 และ 256 พิกเซล แต่ละขนาดวาดใหม่จาก SVG แทนที่จะย่อจากกันและกัน และทั้งหมดมีความโปร่งใส ไอคอนไม่ใช่รูปภาพเล็ก แต่เป็นภาพวาดอีกแบบ สิ่งใดที่มีเส้นละเอียดหรือข้อความเล็กจะกลายเป็นก้อนเละที่ 16 พิกเซลไม่ว่าจะเรนเดอร์อย่างระมัดระวังเพียงใด หากผลลัพธ์ดูขุ่นมัว คำตอบคือ SVG ที่เรียบง่ายขึ้น ไม่ใช่การแปลงที่ดีขึ้น ฟอนต์และรูปภาพที่ดึงมาจากที่อื่นจะไม่ถูกแก้ไข