เครื่องมือสร้าง Favicon
สร้าง favicon ครบทุกขนาดจากรูปเดียว
ลากโลโก้มาวางที่นี่หรือคลิกเพื่อเลือก
PNG, SVG, JPG, WebP หรือ ICO โลโก้สี่เหลี่ยมจัตุรัสขนาด 512 × 512 px ขึ้นไปให้ผลดีที่สุด ไฟล์ถูกประมวลผลในเบราว์เซอร์และไม่ถูกอัปโหลด รูปจะอยู่ในเบราว์เซอร์นี้จนกว่าคุณจะนำออก
Ctrl+OเลือกCtrl+Vวาง
Favicon คือไอคอนเล็ก ๆ ที่เบราว์เซอร์แสดงบนแท็บและบุ๊กมาร์ก ส่วนโทรศัพท์ใช้เวอร์ชันที่ใหญ่กว่าเมื่อมีคนเพิ่มเว็บไซต์ของคุณไว้ที่หน้าจอโฮม วางโลโก้เพียงรูปเดียว เครื่องมือนี้จะสร้างทุกไฟล์ที่เว็บไซต์ต้องใช้ ได้แก่ favicon.ico, favicon แบบ PNG, ไอคอน Apple touch, ไอคอน Android และ web manifest พร้อมภาพตัวอย่างสดและโค้ด HTML สำหรับวางในหน้าเว็บ ทำงานในเบราว์เซอร์ โลโก้ของคุณจึงไม่ออกจากอุปกรณ์ ใช้ฟรีและไม่ต้องสมัครสมาชิก
วิธีสร้าง Favicon
- ลากโลโก้ (PNG, SVG, JPG หรือ WebP) มาวางที่ใดก็ได้บนหน้า วางด้วย Ctrl+V หรือคลิกเพื่อเลือก รูปที่เพิ่มไว้ในเครื่องมือรูปภาพอื่นจะอยู่ในรายการแล้วตามที่คุณทิ้งไว้ที่นั่น คลิกภาพย่อเพื่อใช้รูปนั้น โลโก้ตัวอย่างช่วยให้ลองใช้ได้โดยไม่ต้องมีไฟล์
- ระบบจะจัดกรอบโลโก้ให้ คือเลือกสัญลักษณ์ของโลโก้แบบกว้าง หรือโลโก้ที่ตัดขอบว่างออก ลากสี่เหลี่ยมบนโลโก้เพื่อเปลี่ยน หรือเลือก “ทั้งโลโก้” จากนั้นเลือกพื้นหลัง (สีของโลโก้เองแสดงก่อน) ระยะขอบ และรูปทรง ภาพตัวอย่างจะอัปเดตตามไปด้วย
- คลิก “ดาวน์โหลดทั้งหมด (ZIP)” วางไฟล์ในโฟลเดอร์รากของเว็บไซต์ แล้วคลิก “คัดลอก HTML” และวางแท็กใน <head> ของหน้าเว็บ
ความสามารถ
- favicon.ico ที่มีไอคอน 16, 32 และ 48 px พร้อม favicon แบบ PNG ขนาด 16 และ 32 px
- apple-touch-icon.png (180 px) และไอคอน Android Chrome (192 และ 512 px)
- site.webmanifest พร้อมชื่อแอปและสีธีมของคุณ และแท็ก HTML สำหรับ <head>
- ค้นหาสัญลักษณ์ของโลโก้แบบกว้างให้อัตโนมัติ ลากสี่เหลี่ยมเพื่อใช้ส่วนอื่น หรือใส่ทั้งโลโก้ให้พอดี
- พื้นหลัง: โปร่งใส สีของโลโก้เอง หรือสีใดก็ได้ ระยะขอบตั้งแต่ 0 ถึง 30% และรูปทรงสี่เหลี่ยม มุมมน หรือวงกลม
- ภาพตัวอย่างสดทุกขนาด ทั้งแท็บเบราว์เซอร์และหน้าจอโฮม ในโหมดสว่างและมืด
- เริ่มจาก PNG, SVG, JPG, WebP หรือ ICO และได้ทุกไฟล์ใน ZIP เดียว
เป็นส่วนตัวหรือไม่
ใช่ ไอคอนถูกสร้างในเบราว์เซอร์ของคุณโดยเอนจินรูปภาพ WebAssembly โลโก้และไฟล์ต่าง ๆ ไม่ออกจากอุปกรณ์ของคุณ และโลโก้จะอยู่ในเบราว์เซอร์นี้จนกว่าคุณจะนำออกจากรายการ
คำถามที่พบบ่อย
ต้องใช้ favicon ขนาดไหนบ้าง
สี่ไฟล์ครอบคลุมแทบทุกอย่าง: favicon.ico ขนาด 16, 32 และ 48 px สำหรับแท็บเบราว์เซอร์ บุ๊กมาร์ก และทางลัดของ Windows, apple-touch-icon.png ขนาด 180 px สำหรับหน้าจอโฮมของ iPhone และ iPad และ PNG ขนาด 192 และ 512 px ที่ระบุไว้ใน site.webmanifest สำหรับ Android และเว็บแอปที่ติดตั้งได้ ไฟล์ ZIP มีครบทั้งหมด รวมถึง PNG ขนาด 16 และ 32 px สำหรับเบราว์เซอร์ที่ใช้ PNG
จะเพิ่ม favicon ใน HTML ได้อย่างไร
วางไฟล์ไว้ในโฟลเดอร์รากของเว็บไซต์ ให้เปิด /favicon.ico ได้ จากนั้นคลิก “คัดลอก HTML” แล้ววางแท็กใน <head> ของทุกหน้า เบราว์เซอร์จะหา /favicon.ico เองแม้ไม่มีแท็ก ส่วนแท็กจะเพิ่มขนาด PNG ไอคอน Apple และ manifest
ทำไม apple-touch-icon.png จึงมีพื้นหลัง
เพราะ iPhone และ iPad แสดงพิกเซลโปร่งใสเป็นสีดำและทำมุมโค้งมนเอง ไอคอน Apple จึงเป็นสี่เหลี่ยมทึบเต็มเสมอ โดยใช้สีพื้นหลังของคุณ หรือสีขาวหากพื้นหลังโปร่งใส ไอคอนอื่นยังคงความโปร่งใสและรูปทรงไว้
ใช้โลโก้ SVG ได้ไหม
ได้ เบราว์เซอร์จะวาด SVG ตามขนาดของไฟล์เอง หรือที่ 1024 px หากเล็กกว่านั้น และทุกไอคอนสร้างจากภาพนั้น SVG ที่ลิงก์ไปยังไฟล์อื่น (รูปภาพ ฟอนต์ หรือ stylesheet) วาดเป็นภาพได้ไม่ครบ เครื่องมือจึงแจ้งให้ทราบแทนที่จะสร้างไอคอนที่ไม่สมบูรณ์ ให้ส่งออกเป็น PNG หรือฝังรูปภาพไว้ในไฟล์ก่อน
เปลี่ยน favicon แล้ว แต่เบราว์เซอร์ยังแสดงอันเก่า ทำไม
เพราะเบราว์เซอร์แคช favicon ไว้นาน โหลดหน้าใหม่ด้วย Ctrl+F5 (Cmd+Shift+R บน Mac) หรือเปิดเว็บไซต์ในหน้าต่างส่วนตัว เพื่อดูไอคอนใหม่