แปลงรูปเป็น ICO
สร้าง favicon.ico หรือไอคอน Windows จากรูปที่มีอยู่ได้ทันที ไม่ว่าจะเป็นโลโก้ PNG, ไฟล์ SVG จากนักออกแบบ, JPG จากชุดแบรนด์ หรือแม้แต่รูปถ่ายจากมือถือ ไฟล์ที่ได้จะรวมไอคอนไว้หลายขนาด ด้านล่างนี้อธิบายว่ารูปต้นฉบับแบบใดให้ผลดีที่สุด และแต่ละแพลตฟอร์มต้องใช้ไฟล์ไอคอนอื่นใดบ้าง
แปลงไฟล์รูปภาพ
หรือลากไฟล์ JPG, JPEG, JPE … มาวางที่นี่ ·
สูงสุด 95 MB ต่อไฟล์· ได้สูงสุด 20 ไฟล์· ลบหลังจาก 30 นาที
ไฟล์จะถูกประมวลผลบนเซิร์ฟเวอร์ของเราและถูกลบหลังจาก 30 นาที
ค่า 85 ทำให้ภาพถ่ายดูเหมือนต้นฉบับทุกประการ ควรลดค่านี้เฉพาะเมื่อต้องการไฟล์ที่เล็กลง
JPG, BMP และ EPS ไม่รองรับความโปร่งใส พิกเซลโปร่งใสจะถูกเติมด้วยสีนี้
รหัสสีแบบ Hex ที่ใช้แทนพิกเซลโปร่งใส เช่น #FFFFFF
รูปแบบนี้เก็บภาพได้เพียงภาพเดียว หากต้องการคงภาพเคลื่อนไหวไว้ ให้เลือกผลลัพธ์เป็น GIF หรือ WebP
ไอคอนหลายขนาดจะรวมความละเอียดหลายระดับไว้ในไฟล์เดียว เบราว์เซอร์และระบบปฏิบัติการจะเลือกขนาดที่ต้องใช้เอง
คงขนาดภาพเดิมไว้ หรือกำหนดด้านใดด้านหนึ่ง โดยระบบจะคงอัตราส่วนภาพไว้
จำนวนพิกเซลของด้านที่เลือกไว้ด้านบน
เปอร์เซ็นต์ของขนาดภาพต้นฉบับ
sRGB เหมาะสำหรับหน้าจอและเว็บไซต์ ควรคงค่าเดิมไว้สำหรับงานพิมพ์ ส่วนระดับสีเทาจะตัดสีออกทั้งหมด
เป็นข้อมูลเมตาเท่านั้น ค่า 0 จะคงค่าเดิมไว้ เครื่องพิมพ์และบางเว็บไซต์จะอ่านค่านี้ แต่จะไม่เปลี่ยนขนาดภาพเป็นพิกเซล
วิธีใช้เครื่องมือนี้
- 1
เลือกรูปต้นฉบับที่คมชัดที่สุดที่มี
อัปโหลดรูปที่ต้องการใช้เป็นไอคอน ควรเป็นโลโก้หรือสัญลักษณ์ทรงสี่เหลี่ยมจัตุรัสขนาด 256 × 256 px ขึ้นไป
- 2
ตั้งขนาดไอคอนไว้ที่ทั้งหมด
ใน การตั้งค่าขั้นสูง ตัวเลือก ขนาดไอคอน จะเริ่มที่ ทุกขนาด (16–256) เลือกเพียงขนาดเดียวเมื่อโปรแกรมต้องการขนาดนั้นโดยเฉพาะเท่านั้น
- 3
แปลงแล้วทดสอบ
กด แปลงเป็น ICO ดาวน์โหลดไฟล์ แล้วลองดูในแท็บเบราว์เซอร์หรือบนหน้าจอเดสก์ท็อปก่อนนำไปเผยแพร่
จะแปลงรูปเป็นไอคอน ICO ได้อย่างไร
อัปโหลดรูปสี่เหลี่ยมจัตุรัสขนาดอย่างน้อย 256 × 256 px ปล่อย ขนาดไอคอน ไว้ที่ ทุกขนาด (16–256) แล้วกด แปลงเป็น ICO คุณจะได้ไฟล์เดียวที่มีรูปขนาด 16, 32, 64, 128 และ 256 px พร้อมใช้เป็น favicon.ico หรือไอคอนทางลัดของ Windows
แปลงรูปเป็น ICO: ควรเริ่มจากรูปต้นฉบับแบบใด
ICO คือคอนเทนเนอร์ไอคอนของ Microsoft ที่มีมาตั้งแต่ยุคแรกของ Windows ไม่ได้เก็บรูปเดียว แต่เก็บเป็นชุดรูปขนาดเล็กหลายรูป และตั้งแต่ Windows Vista รูปที่ใหญ่ที่สุดขนาด 256 px อาจบีบอัดเป็น PNG ได้ เบราว์เซอร์เริ่มใช้ฟอร์แมตนี้ในปี 1999 เมื่อ Internet Explorer 5 เริ่มร้องขอ /favicon.ico จากทุกเว็บไซต์
เนื่องจากตัวแปลงย่อรูปลงเหลือเพียง 16 px ภาพต้นฉบับจึงกำหนดผลลัพธ์มากกว่าการตั้งค่าใด ๆ ควรจัดลำดับสิ่งที่มีก่อนอัปโหลด และครอปให้เป็นสี่เหลี่ยมจัตุรัสก่อนหากรูปเป็นแนวกว้าง เครื่องมือครอปรูปตั้งกรอบ 1:1 ได้ในไม่กี่วินาที
โลโก้เวกเตอร์ (SVG, EPS, AI)
แปลงเป็นภาพพิกเซลใหม่ทุกขนาด ขอบจึงคมชัด เป็นตัวเลือกที่ดีที่สุดหากนักออกแบบส่งไฟล์แบบนี้ให้ได้
PNG หรือ WebP แบบโปร่งใส
คงพื้นหลังโปร่งใสที่แถบแท็บมองทะลุได้ ควรเริ่มจากขนาด 256 px ขึ้นไป
JPG, HEIC หรือภาพหน้าจอ
ใช้ได้ แต่พื้นหลังสี่เหลี่ยมจะติดมาด้วย ควรเติมสีหรือครอปเพื่อให้มุมภาพดูตั้งใจ
แต่ละแพลตฟอร์มหาไฟล์ไอคอนจากที่ใด
32 × 32 px
favicon.ico (แท็บเบราว์เซอร์)
แท็บและบุ๊กมาร์กแสดงที่ 16 และ 32 px ICO จากหน้านี้ครอบคลุมทั้งสองขนาด
256 × 256 px
ทางลัด Windows หรือไฟล์ .exe
มุมมองไอคอนขนาดใหญ่และหน้าจอ high-DPI จะเลือกรูปขนาด 256 px
180 × 180 px
apple-touch-icon.png
เป็น PNG ไม่ใช่ ICO ใช้เมื่อมีคนเพิ่มเว็บไซต์ไปที่หน้าจอโฮมของ iPhone
512 × 512 px
ไอคอน Web app manifest
PNG ที่ระบุใน manifest.json คู่กับเวอร์ชัน 192 px สำหรับเว็บแอปที่ติดตั้งได้
ANY I
รูปภาพทุกประเภท
เครื่องมือนี้รองรับรูปแบบภาพทั่วไป รวมถึง JPG, PNG, WebP, HEIC, GIF, BMP และ TIFF ระบบจะตรวจหารูปแบบจากไฟล์โดยอัตโนมัติ คุณจึงไม่จำเป็นต้องทราบว่าภาพของคุณเป็นไฟล์ประเภทใด
ICO
ไอคอน Windows
ICO คือรูปแบบไอคอนของ Microsoft ที่ใช้กับไอคอนโปรแกรมใน Windows และไอคอน favicon ของเว็บไซต์ ไฟล์ .ico หนึ่งไฟล์เก็บภาพได้หลายขนาด เช่น 16×16, 32×32, 48×48 และ 256×256 พิกเซล เพื่อให้ระบบเลือกขนาดที่เหมาะที่สุด แต่ละภาพเก็บเป็นบิตแมปหรือข้อมูล PNG ได้ และรองรับพื้นหลังโปร่งใสแบบ alpha เต็มรูปแบบ ICO ไม่ได้มีไว้สำหรับภาพถ่ายหรืองานภาพขนาดใหญ่ เบราว์เซอร์ Windows และโปรแกรมแก้ไขไอคอนส่วนใหญ่อ่านไฟล์นี้ได้
- การบีบอัด
- แบบไม่สูญเสียข้อมูล
- พื้นหลังโปร่งใส
- ได้
- ภาพเคลื่อนไหว
- ไม่ได้
- เปิดตัว
- Microsoft
คนแปลงรูปทั่วไปเป็น ICO เพราะแท็บเบราว์เซอร์ ทางลัด Windows หรือตัวติดตั้งต้องการไฟล์ .ico หนึ่งไฟล์ แต่งานภาพที่มีอยู่เป็นโลโก้ ภาพหน้าจอ หรือรูปถ่ายในฟอร์แมตอื่น ส่วนการดึง PNG ออกจาก ICO เป็นทิศทางตรงข้าม คือการกู้งานภาพ
ทดสอบความชัดที่ 16 px ก่อนแปลงรูปเป็น ICO
ที่ขนาด 16 × 16 px ไอคอนมีพิกเซลรวมเพียง 256 พิกเซล โลโก้ที่เป็นตัวอักษรเต็มคำจะกลายเป็นรอยเทาพร่ามัว ขณะที่ตัวอักษรหรือสัญลักษณ์หนา ๆ ตัวเดียวยังคงชัด ก่อนแปลง ให้ย่อภาพต้นฉบับเหลือ 16 px ในโปรแกรมดูรูปใดก็ได้ แล้วถามตัวเองว่าจะจำได้ไหมเมื่ออยู่ในแถวแท็บที่เปิดอยู่ 30 แท็บ
คอนทราสต์สำคัญพอ ๆ กับรูปทรง แท็บอยู่บนธีมเบราว์เซอร์ทั้งแบบสว่างและมืด โลโก้สีดำบนพื้นโปร่งใสจึงอาจหายไปในโหมดมืด เส้นขอบสีอ่อนบาง ๆ หรือสี่เหลี่ยมมุมมนทึบด้านหลังสัญลักษณ์ช่วยให้มองเห็นได้ทั้งสองโหมด สำหรับแอปบน macOS ต้องใช้ ICNS แทน PNG to ICNS สร้างไฟล์นั้นจากงานภาพเดียวกันได้
คำถามเกี่ยวกับการแปลงรูปเป็น ICO
แปลงรูปเป็น ICO ในหน้านี้ได้จากฟอร์แมตใดบ้าง
รูปภาพใดก็ได้ที่ตัวแปลงอ่านได้ เช่น PNG, JPG, SVG, WebP, AVIF, HEIC, GIF, BMP, TIFF, PSD และไฟล์ RAW จากกล้อง PNG แบบโปร่งใสหรือ SVG ให้ขอบภาพคมชัดที่สุด ส่วน JPG ใช้ได้ แต่จะมีพื้นหลังสี่เหลี่ยมติดมาด้วย
ใช้แค่ favicon.ico พอไหม หรือต้องมีไฟล์ไอคอนอื่นด้วย
.ico ใช้ได้กับแท็บและบุ๊กมาร์กของเบราว์เซอร์ทุกตัว ส่วน iPhone และ iPad จะมองหา PNG ขนาด 180 × 180 px ที่ตั้งชื่อว่า apple-touch-icon และ Chrome จะเสนอให้ติดตั้งเว็บไซต์เป็นแอปก็ต่อเมื่อ web manifest ระบุไอคอน PNG ขนาด 192 และ 512 px
Windows ต้องมีภาพขนาด 48 px อยู่ในไฟล์ ICO หรือไม่
มุมมองไอคอนขนาดกลางของ File Explorer แสดงไอคอนที่ 48 px เมื่อไฟล์ไม่มีรูปขนาด 48 px Windows จะย่อรูปขนาดถัดไปที่ใหญ่กว่า ในที่นี้คือ 64 px ซึ่งมักดูดีสำหรับงานภาพที่เส้นหนา แต่ลายเส้นละเอียดอาจดูพร่าเลือน
ไฟล์ ICO ไฟล์เดียวแสดงภาพต่างกันที่ 16 px และ 256 px ได้หรือไม่
ฟอร์แมตรองรับได้ และไอคอนระบบมักใช้ภาพที่ปรับให้เรียบง่ายสำหรับขนาดเล็กที่สุด แต่ตัวแปลงนี้ย่อรูปเดียวไปทุกขนาด หากเวอร์ชัน 16 px ต้องการภาพวาดของตัวเอง ให้ส่งออกงานภาพนั้นแยกต่างหาก แล้วแปลงโดยตั้ง ขนาดไอคอน เป็น 16 px
จะตรวจได้อย่างไรว่าไอคอนยังอ่านออกที่ 16 px ก่อนแปลง
ย่อรูปเหลือ 16 px ในโปรแกรมแก้ไขรูปใดก็ได้ แล้วดูที่ 100% ถ้ามองไม่ออกว่าเป็นรูปอะไร ให้ลดรายละเอียด เช่น ตัดสโลแกนออก เหลือเพียงตัวอักษรย่อหรือสัญลักษณ์ และทำเส้นบางให้หนาขึ้น
ควรอัปโหลด favicon.ico ไว้ที่ใดในเว็บไซต์
วางไว้ที่รูทของเว็บไซต์ เพื่อให้เข้าถึงได้ที่ /favicon.ico เพราะเบราว์เซอร์จะร้องขอที่อยู่นี้แม้ไม่มีแท็กชี้ไป หากใช้แท็ก link ที่มี rel="icon" ในส่วน head ของหน้า ก็วางไว้ที่อื่นได้