แปลง PNG เป็น ICO

Q: แปลง PNG เป็น ICO เพื่อทำ favicon ของเว็บไซต์อย่างไร

แปลงโดยเลือก **ทุกขนาด** จากนั้นเปลี่ยนชื่อไฟล์ที่ได้เป็น `favicon.ico` แล้วอัปโหลดไปที่โฟลเดอร์รากของเว็บไซต์ เบราว์เซอร์จะเรียกหาไฟล์ที่พาธนี้เอง และคุณยังอ้างอิงด้วยแท็ก `link rel="icon"` ในส่วนหัวของหน้าได้อีกทางหนึ่ง

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

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

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

ผลลัพธ์

แปลงเป็น

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

คุณภาพและสี

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

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

ขนาดไอคอน

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

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

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

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

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

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

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

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

คงโปรไฟล์สี

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

ปริภูมิสี

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

ค่า DPI ในไฟล์

dpi

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

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

1
อัปโหลดไฟล์ PNG ทรงจัตุรัส
ใช้ภาพต้นฉบับขนาดอย่างน้อย 256 × 256 px พื้นหลังโปร่งใส อัปโหลด PNG ได้สูงสุด 20 ไฟล์ต่อครั้ง ไฟล์ละไม่เกิน 95 MB
2
เลือกขนาดไอคอน
ค่าเริ่มต้นของ ขนาดไอคอน คือ ทุกขนาด (16–256) ซึ่งเหมาะกับการใช้งานทั่วไป เลือกเพียงหนึ่งขนาดใน การตั้งค่าขั้นสูง เฉพาะเมื่อโปรแกรมต้องการขนาดนั้นโดยเฉพาะ
3
แปลงแล้วนำไฟล์ .ico ไปใช้
กด แปลงเป็น ICO ดาวน์โหลดไฟล์ แล้ววางไว้ที่โฟลเดอร์รากของเว็บไซต์ หรือกำหนดให้ทางลัดใน Windows ใช้ไฟล์นี้ ไฟล์ที่อัปโหลดจะถูกลบหลังจาก 30 นาที

ICO คือคอนเทนเนอร์เล็ก ๆ ที่รวมภาพไอคอนหลายภาพ ไม่ใช่ภาพเดียว ไฟล์เดียวอาจมีเวอร์ชัน 16, 32, 48 และ 256 px แล้วระบบจะเลือกขนาดที่เหมาะสม

แปลง PNG เป็น ICO ให้มีหลายขนาดในไฟล์เดียว

ฟอร์แมต ICO เริ่มมาตั้งแต่ Windows 1.0 ในปี 1985 ซึ่งไอคอนเป็นบิตแมปขนาดเล็กมาก จุดเด่นคือไดเรกทอรีที่ต้นไฟล์ ซึ่งระบุภาพทุกภาพในไฟล์พร้อมความกว้างและความสูง Windows Vista (2007) เปิดให้เก็บภาพเหล่านั้นเป็น PNG ได้ ไอคอนขนาด 256 × 256 ที่มีความโปร่งใสเนียนจึงอยู่ในไฟล์ที่เล็กพอจะโหลดได้ทันที

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

1:1

16 × 16 px

แท็บเบราว์เซอร์

แท็บและบุ๊กมาร์กที่ความหนาแน่นพิกเซลมาตรฐาน

1:1

32 × 32 px

แท็บบนหน้าจอ high-DPI

จอ Retina และการปรับสเกล Windows 200%

1:1

48 × 48 px

ผลการค้นหาของ Google

Google ต้องการ favicon สี่เหลี่ยมจัตุรัสที่มีขนาดเป็นพหุคูณของ 48 px

1:1

256 × 256 px

ไอคอนขนาดใหญ่พิเศษของ Windows

ภาพที่ใหญ่ที่สุดที่ไฟล์ ICO เก็บได้

PNG

Portable Network Graphics

PNG เป็นรูปแบบภาพแรสเตอร์แบบไม่สูญเสียข้อมูล (lossless) ที่ PNG Development Group เผยแพร่ในปี 1996 และต่อมาได้รับการกำหนดเป็นมาตรฐานโดย W3C และ ISO รักษาทุกพิกเซลไว้อย่างแม่นยำ รองรับพื้นหลังโปร่งใสแบบ alpha เต็มรูปแบบ และแสดงข้อความ ขอบคม และสีพื้นเรียบได้โดยไม่มีสิ่งแปลกปลอมในภาพ (artefact) ความแม่นยำนี้ทำให้เหมาะกับภาพหน้าจอ โลโก้ ไอคอน และกราฟิกส่วนติดต่อผู้ใช้ ข้อแลกเปลี่ยนคือขนาด ภาพถ่ายที่บันทึกเป็น PNG มักใหญ่กว่าภาพเดียวกันในรูปแบบ JPEG หรือ WebP หลายเท่า เบราว์เซอร์ ระบบปฏิบัติการ และโปรแกรมแต่งภาพทุกตัวเปิดไฟล์ PNG ได้

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

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

ICO

ไอคอน Windows

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

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

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

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

Favicon หรือไอคอน Windows: ควรใส่ขนาดใดในไฟล์ ICO

เบราว์เซอร์แสดงไอคอนแท็บที่ 16 px หรือ 32 px บนหน้าจอ high-DPI และ Google Search แสดง favicon จากฐาน 48 px เลือก ทุกขนาด ไว้ ไฟล์เดียวก็ครอบคลุมทั้งสามขนาด

บันทึกเป็น favicon.ico ที่โฟลเดอร์รากของเว็บไซต์
เพิ่ม PNG ขนาด 180 × 180 สำหรับ Apple touch icon แยกต่างหาก

เตรียมภาพ PNG ให้ยังดูออกที่ขนาด 16 px

แนวคิด favicon เริ่มจาก Internet Explorer 5 ในปี 1999 ซึ่งจะมองหาไฟล์ชื่อ favicon.ico ที่รากของเว็บไซต์เมื่อมีผู้บุ๊กมาร์ก เบราว์เซอร์อื่นลอกพฤติกรรมนี้ตาม จึงยังพบคำขอพาธนี้ในบันทึกของเซิร์ฟเวอร์จนถึงทุกวันนี้

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

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

แปลง PNG เป็น ICO เพื่อทำ favicon ของเว็บไซต์อย่างไร

แปลงโดยเลือก ทุกขนาด จากนั้นเปลี่ยนชื่อไฟล์ที่ได้เป็น favicon.ico แล้วอัปโหลดไปที่โฟลเดอร์รากของเว็บไซต์ เบราว์เซอร์จะเรียกหาไฟล์ที่พาธนี้เอง และคุณยังอ้างอิงด้วยแท็ก link rel="icon" ในส่วนหัวของหน้าได้อีกทางหนึ่ง

ทำไมไอคอนจึงดูเบลอที่ขนาด 16 พิกเซล

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

ถ้าไฟล์ PNG ไม่ใช่ทรงจัตุรัสจะเกิดอะไรขึ้น

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

ใช้ไฟล์ .ico เปลี่ยนไอคอนโฟลเดอร์ใน Windows ได้หรือไม่

ได้ คลิกขวาที่โฟลเดอร์ เปิดคุณสมบัติ (Properties) > ปรับแต่ง (Customize) > เปลี่ยนไอคอน (Change Icon) แล้วเลือกไฟล์ .ico ส่วนทางลัดบนเดสก์ท็อปทำได้เหมือนกันผ่านคุณสมบัติ > เปลี่ยนไอคอน

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

เบราว์เซอร์รุ่นใหม่รองรับไอคอน PNG และ SVG ที่ประกาศไว้ในส่วนหัวของหน้า แต่เครื่องมือบางตัว โปรแกรมอ่านฟีด และเบราว์เซอร์รุ่นเก่ายังเรียก /favicon.ico โดยตรง การมีไฟล์ ICO หลายขนาดขนาดเล็กไว้ที่พาธนี้จะช่วยหลีกเลี่ยงข้อผิดพลาด 404 ในบันทึกของเซิร์ฟเวอร์