ไอคอนจิ๋วที่มีผลกระทบเกินขนาด
ไอคอน Fav คือไอคอนขนาดเล็กที่แสดงในแท็บเบราว์เซอร์ รายการบุ๊กมาร์ก ประวัติเบราว์เซอร์ และ — ตั้งแต่ปี 2019 — ในผลการค้นหาบนมือถือของ Google รูปภาพเล็กๆ เหล่านี้มีน้ำหนักแบรนด์ที่ไม่สมส่วน การวิจัยแสดงให้เห็นว่าผู้ใช้แยกแยะระหว่างแท็บที่เปิดอยู่โดยใช้การจดจำไอคอน Fav เป็นหลัก ไม่ใช่ข้อความของแท็บ ไอคอน Fav ที่หายไปหรือทั่วไปทำให้การค้นหาเว็บไซต์ของคุณยากขึ้นจากแท็บที่เปิดอยู่หลายแท็บ
ขนาดและรูปแบบ Favicon
| รูปแบบ | ขนาด | จำเป็นสำหรับ |
|---|---|---|
| ไอซีโอ | 16×16, 32×32 | รองรับแท็บเบราว์เซอร์รุ่นเก่า |
| PNG | 192×192 | ไอคอนหน้าจอหลักของ Android, PWA |
| PNG | 512×512 | หน้าจอสแปลช PWA, จอแสดงผล DPI สูง |
| ไอคอนแอปเปิ้ลทัช | 180×180 | iOS "เพิ่มไปที่หน้าจอหลัก" |
| SVG | ปรับขนาดได้ | เบราว์เซอร์สมัยใหม่ — คมชัดทุกขนาด |
การเชื่อมต่อการค้นหาของ Google
ตั้งแต่ปี 2019 Google จะแสดงไอคอนเว็บไซต์ข้าง URL ในผลการค้นหาบนมือถือ ไอคอน Fav ที่หายไปจะแสดงไอคอนลูกโลกทั่วไป ไอคอน Fav ที่เป็นพิกเซลหรือคุณภาพต่ำจะส่งสัญญาณไปยังผู้ใช้ และอาจส่งสัญญาณถึงคุณภาพของ Google ว่าไซต์อาจได้รับการดูแลไม่ดี การรักษา favicon ของคุณให้คมชัดและเป็นปัจจุบันถือเป็นการพิจารณา SEO เพียงเล็กน้อย แต่แท้จริง
วิธีเพิ่ม Favicon ในเว็บไซต์ของคุณ
- สร้าง favicon ของคุณเป็น PNG ขนาด 512×512 ก่อน
- สร้าง ICO (หลายขนาด: 16, 32, 48) โดยใช้ตัวแปลง
- สถานที่
favicon.icoในไดเรกทอรีรากของเว็บไซต์ของคุณ - เพิ่มลงใน HTML ของคุณ
<หัว>:<link rel="icon" href="/favicon.ico"> - เพิ่มไอคอน Apple Touch:
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> - อ้างอิงไอคอน 192px และ 512px ในของคุณ
รายการ.jsonเพื่อสนับสนุน กปภ
เหตุใดบางไซต์จึงแสดง favicon ที่เสียหาย
สาเหตุที่พบบ่อยที่สุด: เส้นทางไฟล์ไม่ถูกต้องใน HTML, เซิร์ฟเวอร์ส่งคืน 404 สำหรับ favicon.ico หรือข้อจำกัด CORS ที่บล็อกคำขอไอคอน Fav ข้ามโดเมน เบราว์เซอร์ส่วนใหญ่แคชคำขอ favicon อย่างรุนแรง — ล้างแคชของเบราว์เซอร์ของคุณหลังจากทำการเปลี่ยนแปลง favicon