เครื่องมือสร้าง Favicon
แปลงไฟล์ PNG, JPG หรือ SVG เพียงไฟล์เดียวให้เป็น favicon.ico และไอคอนทุกขนาดที่เว็บไซต์ของคุณต้องการ พร้อมรวมไฟล์ในรูปแบบ ZIP
รูปภาพทั้งหมดจะยังคงแสดงครบถ้วน โดยจัดให้อยู่ตรงกลางและมีระยะขอบรอบๆ
พื้นหลังแบบโปร่งใสจะเหมาะสำหรับแท็บเบราว์เซอร์ ส่วนไอคอนหน้าจอโฮมของ iPhone การเลือกสีพื้นหลังจะดูปลอดภัยและสวยงามกว่าครับ
Favicon และแพ็กไอคอนของคุณจะปรากฏที่นี่
นำไฟล์เหล่านี้ไปไว้ในโฟลเดอร์ราก (Root Folder) ของเว็บไซต์คุณ จากนั้นเพิ่มโค้ดบรรทัดเหล่านี้ลงในทุกหน้าเว็บ
รูปภาพของคุณจะถูกแปลงเป็นไอคอนภายในเบราว์เซอร์โดยตรง ไม่มีการอัปโหลดข้อมูลใดๆ ไปยัง BroBroGo
คำถามที่พบบ่อย
มีไฟล์ใดบ้างรวมอยู่ในแพ็กไอคอน?
ในแพ็กจะประกอบด้วยไฟล์ 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 จากนั้นนำโค้ดที่สร้างขึ้นไปวางในแท็ก <head> ของหน้าเว็บของคุณ เบราว์เซอร์จะเลือกขนาดที่เหมาะสมไปใช้งานโดยอัตโนมัติครับ