วิธีใช้งาน
- เลือก “ข้อความ / อีโมจิ” แล้วพิมพ์อักขระ 1–3 ตัว หรือเลือก “รูปภาพ” แล้วอัปโหลดโลโก้ของคุณ (SVG หรือ PNG แบบสี่เหลี่ยมจัตุรัสขนาดอย่างน้อย 512 px จะให้ผลดีที่สุด)
- เลือกสีและรูปทรง — สี่เหลี่ยม มุมมน หรือวงกลม
- ดูตัวอย่างที่ขนาด 16, 32, 64 และ 128 px ขนาดเล็กจะแสดงให้เห็นว่างานออกแบบยังอ่านได้ชัดหรือไม่
- ดาวน์โหลดแพ็กเกจ (ZIP) อัปโหลดไฟล์ไปยังโฟลเดอร์รากของเว็บไซต์ แล้ววาง HTML ในส่วน head
คำอธิบายตัวเลือก
- favicon.ico
- มีเวอร์ชันขนาด 16, 32 และ 48 px สำหรับเบราว์เซอร์ บุ๊กมาร์ก และทางลัดของ Windows
- apple-touch-icon.png
- ขนาด 180 × 180 px พร้อมพื้นหลังทึบ ใช้เมื่อผู้ใช้เพิ่มเว็บไซต์ของคุณไว้ที่หน้าจอโฮมของ iPhone หรือ iPad
- icon-192.png / icon-512.png
- อ้างอิงจาก site.webmanifest สำหรับหน้าจอโฮมของ Android และเว็บแอปที่ติดตั้งได้
- icon.svg
- ไอคอนที่ปรับขนาดได้สำหรับเบราว์เซอร์สมัยใหม่ รวมไว้เมื่อแหล่งที่มาเป็นข้อความหรือไฟล์ SVG
HTML ที่ต้องเพิ่ม
หลังจากอัปโหลดไฟล์ไปยังโฟลเดอร์รากของเว็บไซต์แล้ว ให้เพิ่มโค้ดนี้ในส่วน head ของทุกหน้า:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">คำถามที่พบบ่อย
ไฟล์ใดที่จำเป็นจริง ๆ
favicon.ico ในโฟลเดอร์รากของเว็บไซต์รองรับเบราว์เซอร์ทั้งหมด เพิ่ม apple-touch-icon.png สำหรับ iOS และ manifest พร้อมไอคอน 192/512 หากต้องการไอคอนที่เหมาะสมเมื่อเว็บไซต์ถูกติดตั้งหรือปักหมุดบน Android
ทำไม favicon ของฉันจึงดูเบลอที่ขนาด 16 px
รายละเอียดเล็ก ๆ จะหายไปที่ขนาด 16 × 16 พิกเซล ใช้ตัวอักษรหนาหรือสัญลักษณ์โลโก้แบบเรียบง่ายแทนโลโก้เต็มที่มีข้อความ
ฉันอัปเดต favicon แล้ว แต่ยังเห็นอันเก่าอยู่
เบราว์เซอร์มักแคช favicon ไว้นาน ให้โหลดหน้าใหม่แบบไม่ใช้แคช หรือเพิ่มพารามิเตอร์เวอร์ชัน เช่น /favicon.ico?v=2 ในแท็กลิงก์
ใช้อีโมจิเป็น favicon ได้ไหม
ได้ อีโมจิจะแสดงด้วยฟอนต์อีโมจิของระบบ จึงได้ผลลัพธ์ตรงกับที่เห็นในตัวอย่าง
ความเป็นส่วนตัว
เครื่องมือนี้ทำงานในเบราว์เซอร์ของคุณทั้งหมด ไฟล์และข้อความของคุณได้รับการประมวลผลบนอุปกรณ์ของคุณ และจะไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ของเรา