วิธีสร้าง favicon
ขนาด ฟอร์แมต และโค้ดที่ต้องใช้ เพื่อให้ favicon แสดงได้ทุกที่
favicon คือไอคอนเล็ก ๆ ในแท็บเบราว์เซอร์ ในบุ๊กมาร์ก และข้างชื่อเว็บไซต์ของคุณในผลการค้นหาของ Google บนมือถือ เว็บไซต์ที่ไม่มี favicon ดูเหมือนยังทำไม่เสร็จ และ favicon ที่เบลอยิ่งดูแย่กว่า การสร้าง favicon ที่ดีใช้เวลาเพียงไม่กี่นาที
เริ่มจากภาพต้นแบบที่ถูกต้อง
favicon แสดงผลเล็กได้ถึง 16 x 16 พิกเซล โลโก้เต็มที่มีชื่อแบรนด์จึงอ่านไม่ออก ให้ใช้สัญลักษณ์เรียบง่าย เช่น ตราสัญลักษณ์จากโลโก้ ตัวอักษรย่อตัวเดียว หรือรูปทรงหนา ๆ ในสีแบรนด์ ทดสอบโดยย่อให้เหลือหนึ่งในสี่ของขนาดบนหน้าจอ ถ้ายังดูออกว่าเป็นอะไร ก็ใช้ได้
เริ่มจากรูปสี่เหลี่ยมจัตุรัสขนาดอย่างน้อย 512 x 512 พิกเซล ควรเป็น PNG พื้นหลังโปร่งใส ถ้าโลโก้ไม่ใช่สี่เหลี่ยมจัตุรัส ให้ ครอป เป็นสี่เหลี่ยมจัตุรัสโดยล็อกอัตราส่วนไว้ที่ 1:1
ไฟล์ที่ต้องใช้
| ไฟล์ | ขนาด | ใช้โดย |
|---|---|---|
| favicon.ico | มีเวอร์ชัน 16, 32 และ 48 พิกเซลอยู่ข้างใน | เบราว์เซอร์ ระบบรุ่นเก่า และคำขอเริ่มต้นไปที่ /favicon.ico |
| ไอคอน PNG | 32 x 32 และ 192 x 192 | เบราว์เซอร์สมัยใหม่ หน้าจอโฮมของ Android |
| apple-touch-icon.png | 180 x 180 | บุ๊กมาร์กบนหน้าจอโฮมของ iPhone และ iPad |
Google Search ก็ใช้ favicon ของคุณในผลการค้นหาด้วย โดยต้องเป็นสี่เหลี่ยมจัตุรัสขนาดอย่างน้อย 48 x 48 พิกเซล และต้องให้ Google เข้ามาเก็บข้อมูลบนเว็บไซต์ของคุณได้
สร้างไฟล์ ICO
ลากไฟล์ PNG สี่เหลี่ยมจัตุรัสมาวางใน เครื่องมือแปลง PNG เป็น ICO จะได้ไฟล์ .ico ของจริงที่มีขนาดเล็ก ๆ ตามที่เบราว์เซอร์ต้องการ ส่วนเวอร์ชัน PNG ให้ ปรับขนาด รูปสี่เหลี่ยมจัตุรัสเดียวกันเป็น 180, 192 และ 32 พิกเซล
เพิ่มลงในเว็บไซต์
อัปโหลด favicon.ico ไว้ที่รากของเว็บไซต์ เพื่อให้เข้าถึงได้ที่ yoursite.com/favicon.ico แล้วเพิ่มบรรทัดเหล่านี้ไว้ใน head ของทุกหน้า
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/th/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/th/apple-touch-icon.png">
บน WordPress ไปที่ Appearance, Customize, Site Identity แล้วอัปโหลดรูปสี่เหลี่ยมจัตุรัสเป็น Site Icon WordPress จะสร้างขนาดต่าง ๆ ให้เอง ส่วน Shopify, Wix และ Squarespace ต่างก็มีการตั้งค่า favicon อยู่ในการตั้งค่าเว็บไซต์หรือธีม
เมื่อ favicon ใหม่ไม่แสดง
เบราว์เซอร์เก็บแคช favicon ไว้อย่างดื้อรั้น ให้เปิดเว็บไซต์ในหน้าต่างส่วนตัว หรือเข้าไปที่ yoursite.com/favicon.ico โดยตรงแล้วรีเฟรช Google อาจใช้เวลาหลายวันหรือหลายสัปดาห์ในการอัปเดตไอคอนในผลการค้นหา หลังจากเข้ามาเก็บข้อมูลหน้าแรกของคุณใหม่
ข้อผิดพลาดที่พบบ่อย
- ใช้โลโก้เต็มที่มีตัวอักษรเล็ก ๆ ซึ่งกลายเป็นรอยเปื้อนเมื่ออยู่ที่ 16 พิกเซล
- ไอคอนสีขาวบนพื้นหลังโปร่งใส ซึ่งหายไปบนแท็บเบราว์เซอร์สีอ่อน
- มีเพียงไฟล์เล็ก ๆ ขนาด 16 พิกเซล ซึ่งดูเบลอบนหน้าจอความละเอียดสูง
- ลืมวางไฟล์ไว้ที่ /favicon.ico ซึ่งเบราว์เซอร์และบอตบางตัวจะขอไฟล์นี้เสมอไม่ว่าหน้าเว็บจะระบุไว้อย่างไร