การแปลงไฟล์ภาพเป็นไอคอนสำหรับเว็บไซต์
เครื่องมือสร้าง Favicon ทำหน้าที่แปลงไฟล์ภาพเดี่ยวที่คุณอัปโหลด ให้กลายเป็นชุดไฟล์ไอคอนที่หลากหลายและเหมาะสมกับการใช้งานบนเว็บไซต์ ไม่ว่าจะเป็นไอคอนสำหรับแสดงบนแท็บเบราว์เซอร์, Apple touch icons สำหรับอุปกรณ์ iOS หรือไอคอนสำหรับ Progressive Web Apps (PWAs) โดยระบบจะทำการรวบรวมไฟล์ไอคอนทั้งหมดเข้าไว้ด้วยกันในรูปแบบไฟล์ ZIP สำหรับดาวน์โหลด พร้อมทั้งจัดเตรียมโค้ด HTML ที่จำเป็นสำหรับการนำไปวางในส่วน head (<head>) ของหน้าเว็บเพื่อเรียกใช้งานไอคอนเหล่านั้นได้อย่างถูกต้อง
การประมวลผลข้อมูลทั้งหมดเกิดขึ้นภายในเบราว์เซอร์ของคุณโดยตรง ไม่มีการอัปโหลดรูปภาพหรือข้อมูลใดๆ ไปยัง BroBroGo
ข้อกำหนดของไฟล์ภาพต้นฉบับ
เพื่อผลลัพธ์ที่สมบูรณ์ที่สุดในการสร้างชุดไอคอน ระบบมีข้อกำหนดและคำแนะนำสำหรับไฟล์ภาพต้นฉบับดังนี้:
- ประเภทไฟล์ที่รองรับ: รองรับเฉพาะรูปภาพประเภท PNG, JPG และ SVG เท่านั้น หากระบบตรวจพบไฟล์ประเภทอื่นจะแสดงข้อความแจ้งเตือน "รองรับเฉพาะรูปภาพประเภท PNG, JPG และ SVG เท่านั้น"
- ขนาดไฟล์สูงสุด: จำกัดขนาดไฟล์ไม่เกิน 50 MB หากไฟล์มีขนาดใหญ่เกินไป ระบบจะแสดงข้อความ "ไฟล์นี้มีขนาดเกิน 50 MB โปรดใช้รูปภาพต้นฉบับที่มีขนาดเล็กลง"
- ขนาดพิกเซลที่แนะนำ: สำหรับไฟล์ประเภท PNG หรือ JPG แนะนำให้ใช้ขนาดอย่างน้อย 512 × 512 พิกเซลขึ้นไป หากใช้ภาพที่มีขนาดเล็กกว่านั้น ระบบจะแสดงข้อความเตือน "รูปภาพต้นฉบับมีขนาดเล็ก (
{w}×{h}px): ไอคอนขนาดใหญ่อาจดูไม่คมชัด แนะนำให้ใช้ขนาด 512 × 512 ขึ้นไป หรือไฟล์ SVG เพื่อผลลัพธ์ที่ดีที่สุด" เนื่องจากภาพจะถูกขยายขนาดและทำให้สูญเสียความคมชัด - การใช้ไฟล์เวกเตอร์: หากเลือกใช้ไฟล์ต้นฉบับเป็น SVG ระบบจะรวมไฟล์เวกเตอร์นั้นเข้าไปในแพ็กไอคอนด้วย ซึ่งช่วยรับประกันความคมชัดในทุกๆ ขนาดการแสดงผล
การจัดการรูปทรงและพื้นหลังของไอคอน
เนื่องจากไอคอนสำหรับใช้งานบนระบบต่างๆ จะต้องเป็นรูปทรงสี่เหลี่ยมจัตุรัสเสมอ เครื่องมือจึงมีตัวเลือกในการจัดการกับรูปภาพต้นฉบับที่ไม่ใช่สี่เหลี่ยมจัตุรัส รวมถึงการจัดการพื้นหลังดังนี้:
การจัดวางภาพที่ไม่ใช่สี่เหลี่ยมจัตุรัส
- พอดี (เพิ่มระยะขอบ): รูปภาพทั้งหมดจะยังคงแสดงครบถ้วน โดยจัดให้อยู่ตรงกลางและมีระยะขอบรอบๆ
- เติมเต็ม (ครอบตัด): รูปภาพจะแสดงเต็มพื้นที่สี่เหลี่ยมจัตุรัส และขอบส่วนที่เกินจะถูกครอบตัดออก
การเลือกพื้นหลัง
- โปร่งใส: ไม่มีสีพื้นหลัง เหมาะสำหรับการแสดงผลบนแท็บของเบราว์เซอร์ทั่วไป
- สีพื้นหลัง: ผู้ใช้สามารถกำหนดสีพื้นหลังเองได้ การเลือกใส่สีพื้นหลังจะช่วยป้องกันปัญหาการแสดงผลบนหน้าจอโฮมของ iPhone และ iPad ซึ่งมักจะระบายสีพื้นที่โปร่งใสให้กลายเป็นสีดำ
รายละเอียดไฟล์ในแพ็กไอคอนที่สร้างขึ้น
เมื่อกระบวนการทำงานเสร็จสิ้น คุณจะได้รับไฟล์ ZIP ที่ประกอบไปด้วยไฟล์ไอคอนและเอกสารระบุตำแหน่งดังต่อไปนี้:
| ชื่อไฟล์ | รายละเอียดและขนาดพิกเซล | การใช้งานหลัก |
|---|---|---|
favicon.ico |
รวมขนาด 16, 32 และ 48 พิกเซลไว้ภายในไฟล์เดียว | ไอคอนแท็บแบบคลาสสิก |
| ไอคอน PNG | ขนาด 16 × 16 และ 32 × 32 พิกเซล | ไอคอนแท็บ (PNG) |
| ไอคอน PNG | ขนาด 180 × 180 พิกเซล | หน้าจอโฮมของ iPhone และ iPad |
| ไอคอน PNG | ขนาด 192 × 192 และ 512 × 512 พิกเซล | Android และเว็บแอปที่ติดตั้ง |
site.webmanifest |
ไฟล์ข้อความขนาดเล็กที่ระบุรายการไอคอนขนาดใหญ่ | ระบุตำแหน่งไอคอนสำหรับอุปกรณ์ต่างๆ |
วิธีการติดตั้งและใช้งานบนเว็บไซต์
หลังจากดาวน์โหลดไฟล์ ZIP และทำการแตกไฟล์เรียบร้อยแล้ว ให้ปฏิบัติตามขั้นตอนดังนี้เพื่อเปิดใช้งานไอคอนบนเว็บไซต์ของคุณ:
- นำไฟล์ทั้งหมดที่ได้จากแพ็กไอคอนไปอัปโหลดไว้ในโฟลเดอร์ราก (Root Folder) ของเว็บไซต์ เพื่อให้ระบบสามารถเข้าถึงไฟล์ผ่านพาธตรง เช่น
/favicon.icoได้ทันที - คัดลอกโค้ด HTML snippet ที่ระบบสร้างให้
- นำโค้ดดังกล่าวไปวางไว้ภายในแท็ก head (
<head>) ของทุกหน้าเว็บที่ต้องการให้แสดงผลไอคอน
คำถามที่พบบ่อย (FAQ)
มีไฟล์ใดบ้างรวมอยู่ในแพ็กไอคอน? : ในแพ็กจะประกอบด้วยไฟล์ favicon.ico ที่มีเวอร์ชันขนาด 16, 32 และ 48 พิกเซลอยู่ภายใน, ไอคอน PNG ขนาด 16, 32, 180, 192 และ 512 พิกเซล และไฟล์ site.webmanifest ที่ระบุรายการไอคอนขนาดใหญ่ หากคุณเริ่มสร้างจากไฟล์ SVG ระบบจะรวมไฟล์เวกเตอร์ต้นฉบับเข้าไปด้วย โดยทั้งหมดจะรวมอยู่ในไฟล์ ZIP ไฟล์เดียวครับ
รูปภาพต้นฉบับควรมีขนาดเท่าใด? : การใช้ไฟล์ SVG ถือเป็นทางเลือกที่ดีที่สุด เนื่องจากไอคอนทุกขนาดจะถูกวาดขึ้นจากเวกเตอร์ ทำให้ขนาดเล็กอย่าง 16 พิกเซลยังคงมีความคมชัด สำหรับไฟล์ PNG หรือ JPG แนะนำให้เริ่มจากขนาดอย่างน้อย 512 × 512 พิกเซลขึ้นไป เนื่องจากรูปภาพที่เล็กกว่านั้นจะถูกขยายขนาดขึ้นและอาจทำให้ภาพดูเบลอได้ครับ
พื้นหลังควรเป็นแบบโปร่งใสหรือแบบมีสีดี? : ไอคอนแท็บจะดูดีเมื่อใช้พื้นหลังแบบโปร่งใส อย่างไรก็ตาม หน้าจอโฮมของ iPhone และ iPad จะแสดงพื้นที่โปร่งใสเป็นสีดำ — หากผู้ใช้มีแนวโน้มที่จะเพิ่มเว็บไซต์ของคุณไปยังหน้าจอโฮม แนะนำให้เลือกสีพื้นหลังไว้จะดีกว่าครับ
จะเกิดอะไรขึ้นหากรูปภาพต้นฉบับไม่ใช่สี่เหลี่ยมจัตุรัส? : ไอคอนจะมีรูปทรงเป็นสี่เหลี่ยมจัตุรัส แต่รูปภาพของคุณจะไม่ถูกยืดออก โดยค่าเริ่มต้น รูปภาพจะถูกจัดให้อยู่ตรงกลางและมีระยะขอบรอบๆ หรือคุณสามารถเปลี่ยนเป็นตัวเลือก "เติมเต็ม (ครอบตัด)" เพื่อตัดขอบส่วนเกินออกแทนได้ครับ
ฉันต้องนำไฟล์เหล่านี้ไปไว้ที่ใดบนเว็บไซต์? : ให้อัปโหลดไฟล์ทั้งหมดไปยังโฟลเดอร์ราก (Root Folder) ของเว็บไซต์คุณ เพื่อให้สามารถเข้าถึง favicon.ico ได้ที่พาธ /favicon.ico จากนั้นนำโค้ดที่สร้างขึ้นไปวางในแท็ก ของหน้าเว็บของคุณ เบราว์เซอร์จะเลือกขนาดที่เหมาะสมไปใช้งานโดยอัตโนมัติครับ