Favicon Generator ฟรี — สร้าง favicon จากรูปของคุณ
สร้าง favicon หลายขนาดจากโลโก้หรือรูปของคุณ พร้อมโค้ด HTML สำหรับวางในหน้าเว็บ ทำงานในเบราว์เซอร์ทั้งหมด
เหมาะกับ: คนทำเว็บเองที่อยากให้แท็บเบราว์เซอร์แสดงไอคอนของแบรนด์แทนไอคอนเปล่า
- ฟรี
- ไม่ต้องสมัคร
- ใช้ได้ทันที
ไอคอนที่ได้
กรอกข้อมูลด้านบนเพื่อดูผลลัพธ์
โลโก้ของคุณถูกย่อและแปลงเป็นไอคอนด้วย Canvas ในเบราว์เซอร์ ไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์และไม่ถูกเก็บไว้ที่ใด
Favicon Generator คืออะไร
Favicon Generator คือเครื่องมือแปลงรูปหรือโลโก้ให้กลายเป็นไอคอนขนาดเล็กที่เบราว์เซอร์แสดงบนแท็บและในรายการบุ๊กมาร์ก เครื่องมือนี้ย่อรูปของคุณเป็นหลายขนาดที่ต้องใช้จริง ทั้ง 16x16, 32x32, 48x48 และไอคอนสำหรับหน้าจอโฮมของมือถือ พร้อมสร้างโค้ด HTML ให้คัดลอกไปวางในส่วน head ของเว็บได้ทันที
วิธีใช้
อัปโหลดโลโก้หรือรูปที่จะใช้
เลือกรูปที่เป็นสี่เหลี่ยมจัตุรัสจะได้ผลดีที่สุด เพราะไอคอนทุกขนาดเป็นสัดส่วนจัตุรัส
ตรวจภาพตัวอย่างในแต่ละขนาด
ดูว่าที่ขนาดเล็กสุดยังพอดูออกว่าเป็นอะไร ถ้าอ่านไม่ออกให้กลับไปใช้รูปที่เรียบง่ายกว่า
ดาวน์โหลดไฟล์ไอคอน
บันทึกไฟล์แต่ละขนาดแล้วอัปโหลดไปไว้ที่โฟลเดอร์รากของเว็บไซต์
วางโค้ด HTML ในส่วน head
คัดลอกโค้ดที่เครื่องมือสร้างให้ไปวางในส่วน head ของทุกหน้าเพื่อให้เบราว์เซอร์รู้จักไอคอน
สิ่งที่เครื่องมือนี้ทำได้
- สร้างไอคอนขนาด 16x16, 32x32, 48x48 และขนาดสำหรับหน้าจอโฮมของมือถือ
- แสดงภาพตัวอย่างทุกขนาดให้ตรวจก่อนดาวน์โหลด
- สร้างโค้ด HTML สำหรับวางในส่วน head พร้อมคัดลอกได้ทันที
- รองรับไฟล์ต้นทางเป็น PNG JPG และ WebP
- เลือกสีพื้นหลังได้สำหรับโลโก้ที่มีพื้นโปร่งใส
- ประมวลผลด้วย Canvas ในเบราว์เซอร์ ไม่ต้องอัปโหลดโลโก้ขึ้นเซิร์ฟเวอร์
ใช้ตอนไหนได้บ้าง
เว็บใหม่ที่ยังแสดงไอคอนเปล่าบนแท็บ
แท็บที่ไม่มีไอคอนทำให้เว็บดูยังไม่เสร็จ และหาไม่เจอเมื่อผู้ใช้เปิดหลายแท็บพร้อมกัน
เปลี่ยนโลโก้ใหม่แล้วต้องอัปเดตไอคอนตาม
สร้างชุดไอคอนใหม่จากโลโก้ล่าสุดครั้งเดียวได้ครบทุกขนาดที่ต้องใช้
ทำ landing page ให้ดูน่าเชื่อถือ
รายละเอียดเล็ก ๆ อย่างไอคอนบนแท็บช่วยให้หน้าที่ใช้รับลูกค้าดูเป็นธุรกิจจริงมากขึ้น
ตัวอย่าง
โลโก้ตัวอักษรย่อ
- กรอก
- ไฟล์ PNG จัตุรัส 512×512 พื้นหลังโปร่งใส
- ได้ผลลัพธ์
- ได้ไอคอนครบทุกขนาดพร้อมโค้ด HTML ที่ชี้ไปยังไฟล์แต่ละขนาด
โลโก้แนวนอนที่มีข้อความยาว
- กรอก
- ไฟล์โลโก้สัดส่วนกว้างมาก
- ได้ผลลัพธ์
- ที่ขนาด 16x16 ข้อความจะอ่านไม่ออก ควรตัดเหลือเฉพาะสัญลักษณ์หรือตัวอักษรย่อก่อนนำมาใช้
ความเป็นส่วนตัว
โลโก้ของคุณถูกย่อและแปลงเป็นไอคอนด้วย Canvas ในเบราว์เซอร์ ไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์และไม่ถูกเก็บไว้ที่ใดทั้งสิ้น
ข้อผิดพลาดที่เจอบ่อย
- ใช้โลโก้แนวนอนที่มีข้อความยาว ทำให้ที่ขนาด 16 พิกเซลมองไม่ออกว่าเป็นอะไร
- อัปโหลดไฟล์ไอคอนแล้วลืมวางโค้ดในส่วน head เบราว์เซอร์จึงยังไม่แสดงไอคอน
- วางไฟล์ผิดตำแหน่งจนลิงก์ในโค้ดชี้ไปยังไฟล์ที่ไม่มีอยู่
- เปลี่ยนไอคอนแล้วคิดว่าไม่ขึ้น ทั้งที่เบราว์เซอร์ยังแสดงไอคอนเก่าจากแคช
- ใช้รูปถ่ายที่มีรายละเอียดเยอะเป็นไอคอน ซึ่งพอย่อเล็กแล้วกลายเป็นจุดสีมั่ว
คำถามที่พบบ่อย
favicon ควรมีขนาดเท่าไรบ้าง
ขนาดที่ใช้จริงบ่อยที่สุดคือ 16x16 สำหรับแท็บเบราว์เซอร์ 32x32 สำหรับหน้าจอความละเอียดสูงและบุ๊กมาร์ก และ 180x180 สำหรับไอคอนบนหน้าจอโฮมของ iOS การมีครบทั้งสามขนาดครอบคลุมการใช้งานส่วนใหญ่แล้ว
ทำไมเปลี่ยน favicon แล้วยังเห็นอันเดิม
เบราว์เซอร์เก็บ favicon ไว้ในแคชค่อนข้างนาน วิธีตรวจคือเปิดลิงก์ไฟล์ไอคอนตรง ๆ ดูว่าเป็นไฟล์ใหม่แล้วหรือยัง ถ้าใช่ให้ล้างแคชหรือเปิดในหน้าต่างส่วนตัวเพื่อดูผลจริง
ต้องใช้ไฟล์ .ico ไหม
เบราว์เซอร์ปัจจุบันรองรับ favicon ที่เป็น PNG ได้ทั้งหมดแล้ว การใช้ PNG หลายขนาดพร้อมระบุใน HTML จึงเพียงพอสำหรับเว็บทั่วไป ไฟล์ .ico จำเป็นเฉพาะกรณีที่ต้องรองรับเบราว์เซอร์รุ่นเก่ามากเท่านั้น
โลโก้พื้นโปร่งใสใช้ได้ไหม
ใช้ได้ และจะแสดงผลดีบนแท็บที่พื้นหลังสีอ่อน แต่ถ้าโลโก้เป็นสีเข้มล้วนอาจกลืนกับธีมมืด เครื่องมือนี้จึงให้เลือกใส่สีพื้นหลังทึบได้เพื่อให้ไอคอนเห็นชัดในทุกธีม
เครื่องมืออื่นที่ใช้ต่อกันได้
- Image Resizer — ย่อขยายขนาดรูปในเบราว์เซอร์ กำหนดความกว้างสูงเองหรือเลือกขนาดสำเร็จรูปสำหรับโซเชียลและเว็บ เลือกไฟล์ปลายทางเป็น JPG PNG หรือ WebP
- Image Compressor — บีบอัดรูปให้ไฟล์เล็กลงโดยคงขนาดภาพเดิม ปรับระดับคุณภาพได้ เห็นขนาดก่อนและหลังพร้อมเปอร์เซ็นต์ที่ประหยัดได้
- Website Audit Lite — Checklist ตรวจเว็บ 20 ข้อ ครอบคลุม SEO, UX, CTA และ Tracking พร้อมจัด priority
อยากให้ช่วยตีความผลลัพธ์กับธุรกิจของคุณ?
ส่งผลลัพธ์จากเครื่องมือนี้พร้อมบริบทธุรกิจมาให้ช่วยดูเบื้องต้นได้