ข้ามไปยังเนื้อหา
EVOA Toolbox

สร้าง Favicon

เปลี่ยนรูปภาพเดียวให้เป็นชุด favicon ครบถ้วน ทั้ง favicon.ico ไอคอน PNG หลายขนาด Apple touch icon ไอคอน Android เว็บแมนิเฟสต์ และแท็ก HTML

ประมวลผลในเบราว์เซอร์ของคุณ ไฟล์ของคุณไม่ถูกอัปโหลด

กำลังโหลดเครื่องมือ…

เครื่องมือนี้ทำอะไรได้

อัปโหลดโลโก้หรือไอคอน แล้วรับทุกอย่างที่เว็บไซต์สมัยใหม่ต้องใช้ในครั้งเดียว ได้แก่ favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, favicon.ico แบบหลายขนาดจริง, apple-touch-icon.png ขนาด 180x180, ไอคอน Android Chrome ขนาด 192x192 และ 512x512, site.webmanifest ที่พร้อมวาง และแท็ก link ของ HTML ที่ตรงกัน

คุณเพิ่มระยะขอบ เลือกรูปทรงสี่เหลี่ยม สี่เหลี่ยมมุมมน หรือวงกลม และเติมพื้นหลังด้วยสีหรือปล่อยให้โปร่งใสได้ ทุกขนาดถูกเรนเดอร์ด้วยการย่อทีละขั้น (ย่อครึ่งซ้ำ ๆ ก่อนวาดขั้นสุดท้าย) ซึ่งทำให้ไอคอนขนาดเล็กคมชัดกว่าการย่อครั้งเดียวจากภาพใหญ่ แต่ละขนาดมีตัวอย่างและปุ่มดาวน์โหลดของตัวเอง และไฟล์ ZIP รวมทุกไฟล์พร้อม snippet.txt ที่อธิบายว่าควรวางไฟล์ไว้ที่ใด

ไฟล์ ICO ถูกประกอบขึ้นในเบราว์เซอร์ของคุณโดยฝังรูป PNG ขนาด 16, 32 และ 48 พิกเซล ซึ่งเป็นรูปแบบที่เบราว์เซอร์ปัจจุบันและ Windows อ่านได้ ไม่มีการอัปโหลดใด ๆ เพราะรูปภาพถูกถอดรหัสและวาดบน canvas บนอุปกรณ์ของคุณ

วิธีใช้งาน

  1. 1เพิ่มรูปภาพ PNG, SVG, JPG หรือ WebP ภาพสี่เหลี่ยมจัตุรัสขนาด 512x512 px ขึ้นไปให้ผลลัพธ์ดีที่สุด
  2. 2เลือกรูปทรง ระยะขอบ และพื้นหลัง (โปร่งใสหรือสีทึบ) แล้วดูตัวอย่างที่อัปเดตในทุกขนาด
  3. 3ป้อนชื่อแอปและสีธีมสำหรับเว็บแมนิเฟสต์
  4. 4ดาวน์โหลดทีละไฟล์ หรือรับทั้งชุดเป็น ZIP
  5. 5คัดลอกไฟล์ไปไว้ที่รากของเว็บไซต์ แล้ววางโค้ด HTML ใน <head> ของหน้าเว็บ

รูปแบบที่รองรับ

อินพุต: PNG, SVG, JPG/JPEG และ WebP เอาต์พุต: PNG, ICO (16/32/48 px), site.webmanifest และ snippet ข้อความ รวมเป็น ZIP

ความเป็นส่วนตัว

เครื่องมือนี้ทำงานในเบราว์เซอร์ของคุณ ข้อมูลที่คุณป้อนจะถูกประมวลผลบนอุปกรณ์ของคุณและไม่ถูกส่งไปยังเซิร์ฟเวอร์ของเรา

ข้อจำกัด

  • ภาพที่ไม่เป็นสี่เหลี่ยมจัตุรัสจะถูกจัดให้พอดีภายในกรอบสี่เหลี่ยมโดยไม่ยืดภาพ ทำให้ไอคอนมีแถบว่าง ควรครอบตัดก่อนเพื่อผลลัพธ์ที่ดีกว่า
  • ภาพที่เล็กกว่า 512 px จะถูกขยายสำหรับไอคอนขนาดใหญ่ที่สุดและอาจดูไม่คมชัด อินพุต SVG ยังคงคมชัดเพราะถูกแปลงเป็นภาพแรสเตอร์ที่ความละเอียดสูงก่อน
  • ไอคอนขนาด 16 px เล็กมาก โลโก้ที่มีรายละเอียดมากมักต้องใช้เวอร์ชันที่เรียบง่ายขึ้นเพื่อให้ยังอ่านออก
  • เครื่องมือนี้ไม่สร้าง favicon.svg แบบเวกเตอร์ ไอคอนแบบ maskable (safe-zone) หรือภาพไทล์ของ Windows

คำถามที่พบบ่อย

ฉันต้องใช้ไฟล์ใดบ้างจริง ๆ

สำหรับเว็บไซต์ส่วนใหญ่ ได้แก่ favicon.ico ที่ราก PNG ขนาด 32x32 apple-touch-icon.png (180x180) และไอคอน Android 192/512 ที่อ้างอิงในเว็บแมนิเฟสต์ ชุดที่สร้างมีครบทั้งหมด

ทำไม favicon ไม่เปลี่ยนหลังจากที่ฉันเปลี่ยนไฟล์แล้ว

เบราว์เซอร์แคช favicon ค่อนข้างหนัก ให้รีเฟรชแบบ hard refresh ล้างข้อมูลเว็บไซต์ หรือเพิ่ม query string แสดงเวอร์ชัน เช่น /favicon.ico?v=2 ในแท็ก link

ไฟล์ ICO เป็นไอคอนหลายขนาดจริงหรือไม่

ใช่ ไฟล์มีรูป PNG แบบบีบอัดสามภาพ (16, 32 และ 48 px) ในคอนเทนเนอร์ ICO มาตรฐาน ทำให้แต่ละที่ที่แสดง favicon เลือกขนาดที่เหมาะที่สุดได้

ใช้รูปถ่ายหรือไฟล์ JPG ได้หรือไม่

ได้ แต่รูปถ่ายมักใช้ไม่ได้ผลที่ขนาด 16 px โลโก้และสัญลักษณ์เรียบง่ายที่มีเงาชัดเจนจะดูดีที่สุด JPG ไม่มีความโปร่งใส จึงควรเลือกสีพื้นหลังหรือยอมรับพื้นหลังเดิมของภาพ

เครื่องมือที่เกี่ยวข้อง