เครื่องมือสร้าง Favicon
สร้าง Favicon ทุกแบบที่เว็บไซต์ของคุณต้องการจากรูปภาพเดียว
แจ้งปัญหาเกี่ยวกับเครื่องมือนี้
วิธีใช้งาน สร้าง Favicon
เพิ่มโลโก้หรือรูปภาพ
ลากไฟล์ PNG, JPG, WebP, GIF หรือ SVG มาวางบนหน้า ภาพสี่เหลี่ยมจัตุรัสที่มีรูปทรงเรียบง่ายจะได้ผลดีที่สุด
ปรับหน้าตา
ครอบตัดเป็นสี่เหลี่ยมจัตุรัสหรือใส่ทั้งภาพ เลือกพื้นหลังโปร่งใสหรือมีสี เพิ่มระยะขอบ และทำมุมมน ตัวอย่างจะแสดงทุกขนาดและแท็บเบราว์เซอร์
ดาวน์โหลดและเพิ่มโค้ด
ดาวน์โหลด ZIP อัปโหลดไฟล์ไปที่โฟลเดอร์รากของเว็บไซต์ แล้ววางบรรทัด HTML ในส่วน head ของหน้าเว็บ
ทำไมต้องใช้ Utils365
ครบทั้งชุด
favicon.ico ที่มีขนาด 16, 32 และ 48 px, Favicon แบบ PNG, Apple touch icon, ไอคอน Android และ site.webmanifest ตั้งชื่อตามที่เบราว์เซอร์คาดหวังทั้งหมด
ดูก่อนดาวน์โหลด
ตรวจดูว่าไอคอนเป็นอย่างไรในขนาดจริง และในแท็บเบราว์เซอร์แบบสว่างและมืด รายละเอียดเล็กๆ จึงไม่หายไป
เป็นส่วนตัวตั้งแต่การออกแบบ
ทุกอย่างเกิดขึ้นในเบราว์เซอร์ของคุณ โลโก้จึงไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์
คำถามที่พบบ่อย
ต้องใช้ Favicon ขนาดใดบ้าง
favicon.ico (16, 32 และ 48 px) ครอบคลุมแท็บเบราว์เซอร์และบุ๊กมาร์ก Apple touch icon ขนาด 180 px ครอบคลุมหน้าจอโฮมของ iPhone และ iPad และ PNG ขนาด 192 และ 512 px ครอบคลุม Android และเว็บแอปที่ติดตั้ง เครื่องมือนี้สร้างทั้งหมดจากรูปภาพเดียว
ICO, PNG หรือ SVG ควรใช้ Favicon แบบไหน
ใช้ทั้งสามแบบ favicon.ico ใช้ได้ทุกที่ รวมถึงเบราว์เซอร์รุ่นเก่าและเครื่องมือที่ค้นหาไฟล์นี้อัตโนมัติ Favicon แบบ PNG คมชัดในขนาดที่กำหนด ส่วน Favicon แบบ SVG คมชัดทุกขนาด และคุณจะได้เมื่อเริ่มจากไฟล์ SVG
apple-touch-icon คืออะไร
ไอคอนที่ iPhone และ iPad ใช้เมื่อมีคนเพิ่มเว็บไซต์ของคุณไว้ที่หน้าจอโฮม มีขนาด 180 × 180 px และโปร่งใสไม่ได้ จึงบันทึกพร้อมพื้นหลังทึบ (สีขาวถ้าคุณเลือกโปร่งใส) iOS จะทำมุมมนให้เอง
ต้องวางไฟล์ Favicon ไว้ที่ไหน
แตกไฟล์ไว้ในโฟลเดอร์รากของเว็บไซต์ ข้างหน้าแรกของคุณ ให้ favicon.ico อยู่ที่ yoursite.com/favicon.ico แล้ววางบรรทัด HTML ที่แสดงในหน้านี้ลงในส่วน head ของทุกหน้า หรือในเทมเพลตของเว็บไซต์
ทำไม Favicon ใหม่ไม่แสดง
เบราว์เซอร์เก็บ Favicon ไว้นาน ลองเปิดที่อยู่ของ Favicon โดยตรง กดรีเฟรชแบบล้างแคช หรือเปิดหน้าต่างส่วนตัวเพื่อดู Favicon ใหม่