แปลง WebP เป็น ICO
มีโลโก้เป็นไฟล์ WebP ที่บันทึกจากเว็บไซต์ของคุณเองหรือส่งออกจากงานออกแบบเท่านั้นใช่ไหม แปลงให้เป็น favicon.ico ที่เบราว์เซอร์ บุ๊กมาร์ก และช็อตคัต Windows ใช้ได้ทันทีโดยไม่ต้องเพิ่มโค้ดใด ๆ
แปลงไฟล์รูปภาพ
หรือลากไฟล์ JPG, JPEG, JPE … มาวางที่นี่ ·
สูงสุด 95 MB ต่อไฟล์· ได้สูงสุด 20 ไฟล์· ลบหลังจาก 30 นาที
ไฟล์จะถูกประมวลผลบนเซิร์ฟเวอร์ของเราและถูกลบหลังจาก 30 นาที
ค่า 85 ทำให้ภาพถ่ายดูเหมือนต้นฉบับทุกประการ ควรลดค่านี้เฉพาะเมื่อต้องการไฟล์ที่เล็กลง
JPG, BMP และ EPS ไม่รองรับความโปร่งใส พิกเซลโปร่งใสจะถูกเติมด้วยสีนี้
รหัสสีแบบ Hex ที่ใช้แทนพิกเซลโปร่งใส เช่น #FFFFFF
รูปแบบนี้เก็บภาพได้เพียงภาพเดียว หากต้องการคงภาพเคลื่อนไหวไว้ ให้เลือกผลลัพธ์เป็น GIF หรือ WebP
ไอคอนหลายขนาดจะรวมความละเอียดหลายระดับไว้ในไฟล์เดียว เบราว์เซอร์และระบบปฏิบัติการจะเลือกขนาดที่ต้องใช้เอง
คงขนาดภาพเดิมไว้ หรือกำหนดด้านใดด้านหนึ่ง โดยระบบจะคงอัตราส่วนภาพไว้
จำนวนพิกเซลของด้านที่เลือกไว้ด้านบน
เปอร์เซ็นต์ของขนาดภาพต้นฉบับ
sRGB เหมาะสำหรับหน้าจอและเว็บไซต์ ควรคงค่าเดิมไว้สำหรับงานพิมพ์ ส่วนระดับสีเทาจะตัดสีออกทั้งหมด
เป็นข้อมูลเมตาเท่านั้น ค่า 0 จะคงค่าเดิมไว้ เครื่องพิมพ์และบางเว็บไซต์จะอ่านค่านี้ แต่จะไม่เปลี่ยนขนาดภาพเป็นพิกเซล
วิธีใช้เครื่องมือนี้
- 1
อัปโหลดโลโก้ WebP
วางไฟล์ .webp หรือวางพร้อมกันได้สูงสุด 20 ไฟล์ ไฟล์ละไม่เกิน 95 MB โลโก้สี่เหลี่ยมจัตุรัสขนาดอย่างน้อย 256 × 256 px จะให้ผลดีที่สุด
- 2
คงไอคอนไว้ทุกขนาด
ขนาดไอคอน จะตั้งต้นที่ ทุกขนาด (16–256) ใน การตั้งค่าขั้นสูง ไฟล์ WebP แบบภาพเคลื่อนไหวจะใช้เฟรมแรก
- 3
แปลงแล้วอัปโหลดขึ้นเว็บไซต์
กด แปลงเป็น ICO แล้วเปลี่ยนชื่อไฟล์เป็น favicon.ico หากจำเป็น จากนั้นวางไว้ในโฟลเดอร์รากของเว็บไซต์
โลโก้ที่บันทึกจากเว็บไซต์ในปัจจุบันมักเป็น WebP การแปลงครั้งเดียวจะเปลี่ยนไฟล์นั้นเป็น favicon.ico หลายขนาด โดยคงพื้นหลังโปร่งใสไว้
ทำ favicon.ico จากโลโก้ WebP
WebP กลายเป็นฟอร์แมตรูปภาพมาตรฐานของเว็บส่วนใหญ่หลัง Google เปิดตัวในปี 2010 WordPress รองรับการอัปโหลด WebP ตั้งแต่เวอร์ชัน 5.8 ในปี 2021 และ CDN รูปภาพจำนวนมากแปลงทุก PNG ที่ให้บริการ ดังนั้นเมื่อคุณตามหาโลโก้ของตัวเอง ไฟล์ที่หาเจอจึงมักเป็น .webp ซึ่งตัวสร้าง favicon, Windows และแผงควบคุมโฮสติ้งบางแห่งไม่รับ
ฟอร์แมต ICO แก้ปัญหาคนละอย่างกับ WebP แทนที่จะเป็นภาพบีบอัดภาพเดียว ICO รวมบิตแมปสี่เหลี่ยมจัตุรัสหลายขนาดไว้ด้วยกัน แล้วเบราว์เซอร์หรือระบบปฏิบัติการจะเลือกขนาดที่ต้องการ: 16 px สำหรับแท็บ 32 px สำหรับแถบงานหรือแถบบุ๊กมาร์ก และขนาดใหญ่กว่าสำหรับช็อตคัตบนเดสก์ท็อปและหน้าจอความละเอียดสูง การแปลงจะสร้างทุกขนาดจาก WebP ของคุณในครั้งเดียว
เก็บไฟล์ WebP ไว้ใช้เป็นโลโก้ในส่วนหัวของหน้าเว็บ ไฟล์ทั้งสองใช้ในตำแหน่งต่างกัน และการแปลงไม่ได้เปลี่ยนไฟล์ต้นฉบับแต่อย่างใด
สิ่งที่ตัวแปลงใส่ไว้ในไฟล์ ICO
- ห้าขนาดในไฟล์ .ico เดียว
- 16–256 px
- ไฟล์ WebP ต่อครั้ง
- 20
- ขนาดสูงสุดต่อไฟล์
- 95 MB
- จากนั้นลบออกจากเซิร์ฟเวอร์
- 30 นาที
WEBP
ภาพ WebP
WebP เป็นรูปแบบภาพที่ Google เปิดตัวในปี 2010 เพื่อให้หน้าเว็บโหลดได้เร็วขึ้น รองรับทั้งการบีบอัดแบบสูญเสียข้อมูล (lossy) และแบบไม่สูญเสียข้อมูล (lossless) พื้นหลังโปร่งใสแบบ alpha และภาพเคลื่อนไหวในรูปแบบเดียว ไฟล์ WebP แบบ lossy มักเล็กกว่า JPEG ที่มีคุณภาพใกล้เคียงกัน 25–35% และ WebP แบบ lossless มักเล็กกว่า PNG เบราว์เซอร์ปัจจุบันทุกตัวรองรับ แต่ซอฟต์แวร์เดสก์ท็อปรุ่นเก่าบางตัว บริการพิมพ์ภาพ และแบบฟอร์มอัปโหลดบางแห่งยังไม่รับไฟล์นี้ Windows, macOS และโปรแกรมแต่งภาพสมัยใหม่ส่วนใหญ่เปิดไฟล์ WebP ได้
- การบีบอัด
- ได้ทั้งแบบสูญเสียและไม่สูญเสียข้อมูล
- พื้นหลังโปร่งใส
- ได้
- ภาพเคลื่อนไหว
- ได้
- เปิดตัว
- 2010 · Google
ICO
ไอคอน Windows
ICO คือรูปแบบไอคอนของ Microsoft ที่ใช้กับไอคอนโปรแกรมใน Windows และไอคอน favicon ของเว็บไซต์ ไฟล์ .ico หนึ่งไฟล์เก็บภาพได้หลายขนาด เช่น 16×16, 32×32, 48×48 และ 256×256 พิกเซล เพื่อให้ระบบเลือกขนาดที่เหมาะที่สุด แต่ละภาพเก็บเป็นบิตแมปหรือข้อมูล PNG ได้ และรองรับพื้นหลังโปร่งใสแบบ alpha เต็มรูปแบบ ICO ไม่ได้มีไว้สำหรับภาพถ่ายหรืองานภาพขนาดใหญ่ เบราว์เซอร์ Windows และโปรแกรมแก้ไขไอคอนส่วนใหญ่อ่านไฟล์นี้ได้
- การบีบอัด
- แบบไม่สูญเสียข้อมูล
- พื้นหลังโปร่งใส
- ได้
- ภาพเคลื่อนไหว
- ไม่ได้
- เปิดตัว
- Microsoft
โลโก้ WebP กลายเป็น ICO เมื่อต้นฉบับเดียวของเครื่องหมายแบรนด์คือไฟล์บีบอัดที่เว็บไซต์หรือ CMS ให้บริการ แต่เว็บไซต์ยังต้องมี favicon.ico ที่รากของเว็บ
เตรียมโลโก้ WebP ให้พร้อมสำหรับแท็บเบราว์เซอร์ขนาด 16 px
ครอปเฉพาะสัญลักษณ์
โลโก้ส่วนใหญ่มีลักษณะกว้าง ให้เก็บเฉพาะสัญลักษณ์หรืออักษรตัวแรก แล้วครอปเป็นสี่เหลี่ยมจัตุรัสโดยเว้นขอบเล็กน้อย
ตัดข้อความเล็กออก
สโลแกนและตัวอักษรชื่อแบรนด์จะกลายเป็นจุดสีเทาที่ 16 px รูปทรงหนาเพียงรูปเดียวยังอ่านออก แต่เส้นบางไม่รอด
ตรวจสีแท็บทั้งสองแบบ
ดูผลลัพธ์บนธีมเบราว์เซอร์สว่างและมืด โลโก้สีเข้มบนพื้นหลังโปร่งใสอาจมองไม่เห็นบนแท็บสีเข้ม
การเพิ่ม favicon ใหม่ลงในเว็บไซต์
วาง favicon.ico ไว้ในโฟลเดอร์รากเพื่อให้เรียกได้ที่ yoursite.com/favicon.ico การประกาศใน head ของหน้าด้วย <link rel="icon" href="/favicon.ico" sizes="any"> ทำให้ระบุชัดเจนขึ้น และ CMS อย่าง WordPress มีช่อง Site Icon ที่เขียนแท็กเหล่านี้ให้คุณ
ยังมีไอคอนอีกสองแบบที่ควรมี iPhone และ iPad ใช้ apple-touch-icon ซึ่งเป็น PNG ขนาด 180 × 180 px เมื่อมีคนเพิ่มเว็บไซต์ของคุณลงหน้าจอโฮม สร้างได้ด้วย WebP to PNG และคู่มือครอปรูป ของเรา ส่วน Google Search ต้องการ favicon สี่เหลี่ยมจัตุรัสที่มีขนาดเป็นพหุคูณของ 48 px ดังนั้น PNG ขนาด 96 หรือ 144 px ที่ลิงก์จากหน้าแรกจะรองรับผลการค้นหาด้วย เบราว์เซอร์แคช favicon ไว้นานมาก ให้เปิดหน้าเว็บในหน้าต่างส่วนตัวเพื่อดูไอคอนใหม่ทันที
คำถามเกี่ยวกับการแปลง WebP เป็น ICO
ทำไมต้องใช้ไฟล์ .ico ในเมื่อโลโก้เป็น WebP อยู่แล้ว
เมื่อหน้าเว็บไม่ได้ระบุไอคอนไว้ เบราว์เซอร์จะขอไฟล์ /favicon.ico จากรากของเว็บไซต์เอง อีกทั้งช็อตคัตบน Windows เบราว์เซอร์รุ่นเก่า และช่องใส่ favicon ของ CMS จำนวนมากก็ต้องการไฟล์ ICO หรือ PNG ไฟล์ .ico หนึ่งไฟล์ที่รากเว็บไซต์จึงรองรับทั้งหมดได้โดยไม่ต้องเขียนมาร์กอัปเพิ่ม
พื้นที่โปร่งใสรอบโลโก้ WebP จะยังโปร่งใสอยู่หรือไม่
ได้ WebP และ ICO รองรับช่องอัลฟาทั้งคู่ พื้นหลังโปร่งใสจึงถูกส่งต่อไปยังทุกขนาดในไอคอนโดยตรง และ favicon จะแสดงผลสวยงามบนแท็บเบราว์เซอร์ทั้งโทนสว่างและโทนมืด
ถ้าอัปโหลด WebP แบบภาพเคลื่อนไหวจะเกิดอะไรขึ้น
ICO เก็บได้เฉพาะภาพนิ่ง ตัวแปลงจึงใช้เฟรมแรก (ไฟล์ต้นฉบับแบบภาพเคลื่อนไหว ตั้งเป็น เฉพาะเฟรมแรก) หากเฟรมแรกว่างเปล่าหรืออยู่กลางการเปลี่ยนภาพ ให้เลือกไฟล์ต้นฉบับอื่น
การบีบอัดแบบสูญเสียคุณภาพของ WebP จะเห็นใน favicon หรือไม่
พบได้น้อยที่ขนาด 16 ถึง 64 px เพราะการย่อภาพจะเฉลี่ยตำหนิเล็ก ๆ ให้หายไป แต่ขอบฟุ้งจาง ๆ อาจยังเหลืออยู่ในชั้นขนาด 128 และ 256 px หากมีโลโก้แบบเวกเตอร์ด้วย SVG to ICO จะให้ขอบที่คมชัดที่สุด
โลโก้ WebP ต้องมีความละเอียดเท่าไรจึงจะได้ favicon ที่คมชัด
ควรมีขนาดอย่างน้อย 256 × 256 px และเป็นสี่เหลี่ยมจัตุรัส เพื่อให้ชั้นที่ใหญ่ที่สุดเกิดจากการย่อ ไม่ใช่การขยาย โลโก้ขนาด 120 px ที่บันทึกจากส่วนหัวของหน้าเว็บจะดูเบลอในขนาดที่ใหญ่ขึ้น