ใครที่กำลังต้องการทำไฟล์ favicon.ico อยู่ ผมมีคำแนะนำนสั้น ๆ เพียง 4 ขั้นตอน ในการสร้างไฟล์และตั้งค่าเว็บไซต์ให้แสดงไอคอนที่เว็บไซต์ โดยผมได้อ่านและสรุปข้อมูลจากเว็บต้นฉบับมาให้ด้วยแล้ว กับขั้นตอนที่ผมได้ทำเองจริงเป็นเนื้อหาเพิ่มเติมให้ด้วย
วิธีการสร้าง Favicon สำหรับเว็บไซต์มี ดังนี้
- สร้างไอคอนของเราที่ต้องการในขนาด 64x64 บันทึกเป็นไฟล์ .png สามารถใช้โปรแกรมแก้ไขภาพ เช่น Photoshop , GIMP , Canva เป็นต้น
- แปลงภาพของเราเป็น .ico โดยผมใช้เครื่องมือออนไลน์ เช่น iconifier.net โดยแค่อัพโหลดภาพ แล้วรอแปลงข้อมูลแล้วดาวน์โหลดไฟล์มาใช้งาน
- อัปโหลดไอคอนของเราไปยังเว็บไซต์ เก็บในโฟนเดอร์ที่ต้องการ เช่น images
- เพิ่มโค้ดเพื่อให้เว็บไซต์แสดงผลไอคอนของเรา ในส่วนของ <head>
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
📝 สรุปเนื้อหาโดยย่อ
แทนที่จะสร้าง favicon หลายสิบไฟล์สำหรับอุปกรณ์และเบราว์เซอร์ต่าง ๆ ผู้เขียนเสนอให้ใช้เพียง 3 ไฟล์ภาพหลัก และ 1 ไฟล์ JSON สำหรับ PWA:
✅ ไฟล์ที่จำเป็น
– สำหรับเบราว์เซอร์รุ่นเก่า (ขนาด 32×32)
– สำหรับเบราว์เซอร์สมัยใหม่ รองรับธีมมืด/สว่าง
– สำหรับ iOS (ขนาด 180×180)
– สำหรับ PWA บน Android รวมไอคอน:
(512×512, มี padding)
💡 แนวทางการสร้าง
ใช้ SVG เป็นหลักเพื่อลดขนาดไฟล์และรองรับการปรับขนาด
ใช้ media query ใน SVG เพื่อรองรับธีมมืด
ใช้เครื่องมืออย่าง GIMP, Inkscape, ImageMagick และ Squoosh เพื่อแปลงและบีบอัดไฟล์
เพิ่ม
<link>ที่เหมาะสมใน<head>ของ HTMLใช้ Webpack หรือ bundler เพื่อจัดการ cache busting และแยก favicon สำหรับ staging
🎯 ข้อดีของแนวทางนี้
ลดจำนวนไฟล์ favicon จาก 20+ เหลือเพียง 4–6 ไฟล์
รองรับเบราว์เซอร์และอุปกรณ์หลักทั้งหมด
ปรับปรุงประสิทธิภาพและลดภาระการจัดการไฟล์
รองรับ Progressive Web App (PWA) อย่างเต็มรูปแบบ
ความคิดเห็น
แสดงความคิดเห็น