Favicon คืออะไร และสำคัญต่อเว็บไซต์ของคุณอย่างไร?

Favicon (ย่อมาจาก "favorite icon" หรือไอคอนโปรด) คือภาพสี่เหลี่ยมจัตุรัสขนาดเล็กที่เป็นตัวแทนของเว็บไซต์บนแท็บเบราว์เซอร์ บุ๊กมาร์ก รายการประวัติการเข้าชม ผลการค้นหาของ Google หน้าจอโฮมของสมาร์ตโฟน และเว็บแอปที่ติดตั้งไว้ Favicon สำคัญเพราะช่วยให้เว็บไซต์ของคุณมีหน้าตาที่จดจำได้ในพริบตา ช่วยให้หาเว็บเจอได้ง่ายขึ้นเมื่อเปิดหลายแท็บ บ่งบอกว่าเว็บไซต์ดูเป็นมืออาชีพและน่าเชื่อถือ และปัจจุบัน Google ยังแสดงไอคอนนี้ถัดจากชื่อเว็บไซต์ของคุณในผลการค้นหาด้วย หากไม่มี Favicon ผู้เข้าชมจะเห็นไอคอนรูปลูกโลกหรือหน้ากระดาษเปล่าแบบทั่วไป และเซิร์ฟเวอร์ของคุณจะมีข้อผิดพลาด 404 เต็มบันทึก log คุณสามารถสร้างชุด Favicon ครบถ้วนได้ฟรีด้วย เครื่องมือสร้าง Favicon ของ MakeFav

Favicon คืออะไร?

Favicon คือกราฟิกแบรนด์ขนาดเล็ก ซึ่งมักเป็นโลโก้เวอร์ชันที่ทำให้เรียบง่ายขึ้น หรือเป็นตัวอักษรหรือสัญลักษณ์เพียงตัวเดียว ที่เบราว์เซอร์และซอฟต์แวร์อื่น ๆ ดึงมาจากเว็บไซต์ของคุณเพื่อแสดงเป็นเครื่องหมายระบุตัวตนแบบกะทัดรัดในทุกที่ที่ต้องการ บนเบราว์เซอร์เดสก์ท็อปมักแสดงที่ขนาด 16 x 16 CSS พิกเซล แต่ตัวไฟล์ควรมีขนาดใหญ่กว่านั้นเพื่อให้คมชัดบนหน้าจอความละเอียดสูง

ในทางเทคนิค Favicon เป็นเพียงไฟล์ภาพที่อ้างอิงจาก HTML ของคุณ (หรือพบได้ในตำแหน่งเริ่มต้น) ซึ่ง user agent จะดาวน์โหลดแยกจากเนื้อหาของหน้า ทุกวันนี้ "Favicon" แทบไม่เคยเป็นไฟล์เดียว เว็บไซต์สมัยใหม่มักมีไอคอนเดียวกันหลายเวอร์ชัน เพื่อให้เบราว์เซอร์ เสิร์ชเอนจิน iOS และ Android ได้รูปแบบและขนาดที่เหมาะกับตัวเอง

ประวัติโดยย่อของ Favicon

Favicon มีจุดเริ่มต้นในเดือนมีนาคม 1999 เมื่อ Microsoft เปิดตัว Internet Explorer 5 เบราว์เซอร์นี้ให้ผู้ใช้บันทึกหน้าเว็บลงในรายการ "Favorites" และยังมองหาไฟล์ไอคอนเล็ก ๆ ชื่อ favicon.ico ที่รากของเว็บไซต์เพื่อแสดงข้างรายการที่บันทึกไว้ แนวคิดนั้นเรียบง่าย: ถ้าเว็บไซต์มี /favicon.ico ไอคอนก็จะปรากฏข้างบุ๊กมาร์ก

ไม่นานเบราว์เซอร์อื่นก็นำฟีเจอร์นี้ไปใช้ และการท่องเว็บแบบแท็บทำให้มีประโยชน์ยิ่งขึ้นมาก เมื่อแท็บกลายเป็นวิธีหลักในการเปิดหน้าเว็บ Favicon ก็เปลี่ยนจากเครื่องประดับบุ๊กมาร์กมาเป็นตัวช่วยนำทางหลัก แนวทางนี้พัฒนามาตลอดหลายปี:

• ต้นยุค 2000: องค์ประกอบ <link rel="icon"> ทำให้เว็บไซต์ชี้ไปยังไอคอนที่ URL ใดก็ได้ ไม่จำกัดแค่ที่ราก และเบราว์เซอร์ที่ไม่ใช่ IE เริ่มรองรับไฟล์ PNG และ GIF
• ยุค 2010: Apple เปิดตัว apple-touch-icon สำหรับหน้าจอโฮมของ iOS ส่วน Android และ Windows ก็เพิ่มข้อกำหนดของตัวเอง เช่น ไอคอนใน manifest และภาพไทล์
• ปัจจุบัน: Favicon แบบ SVG, web app manifest, ไอคอนที่รองรับโหมดมืด และข้อกำหนด Favicon สำหรับผลการค้นหาของ Google ทำให้ Favicon เป็นส่วนเล็ก ๆ แต่สำคัญของการตั้งค่าทางเทคนิคของเว็บไซต์

Favicon ปรากฏที่ไหนบ้างในปัจจุบัน

Favicon ของคุณแสดงในหลายที่มากกว่าแค่แท็บเบราว์เซอร์ ที่หลัก ๆ ได้แก่:

• แท็บเบราว์เซอร์: จุดที่เห็นได้ชัดที่สุด ซึ่งเมื่อเปิดหลายแท็บ ไอคอนมักเป็นสิ่งเดียวที่คุณมองเห็น
• บุ๊กมาร์กและรายการโปรด: ไอคอนอยู่ข้างชื่อหน้าในแถบบุ๊กมาร์กและเมนู
• ประวัติและหน้าที่เข้าบ่อย: เบราว์เซอร์แสดง Favicon ในรายการประวัติและหน้าแท็บใหม่
• ผลการค้นหาของ Google: ทั้งบนมือถือและเดสก์ท็อป Google แสดง Favicon ของเว็บไซต์ถัดจากชื่อเว็บไซต์และ URL
• หน้าจอโฮม: เมื่อผู้เข้าชมเพิ่มเว็บไซต์ของคุณลงหน้าจอโฮมบน iOS หรือ Android ไอคอน touch หรือไอคอนใน manifest จะกลายเป็นทางลัดแบบแอป
• PWA ที่ติดตั้งแล้ว: Progressive Web App ใช้ไอคอนใน web app manifest สำหรับไอคอนตัวเปิดแอป หน้าจอ splash และตัวสลับงาน
• Windows tile และเว็บไซต์ที่ปักหมุด: Windows และ Edge รุ่นเก่าใช้ภาพไทล์ที่กำหนดไว้สำหรับเว็บไซต์ที่ปักหมุด รุ่นใหม่ส่วนใหญ่ใช้ไอคอนมาตรฐานของคุณซ้ำ
• ตัวอย่างลิงก์ในบางแอป: เครื่องมือแชตและเครื่องมือเพิ่มประสิทธิภาพการทำงานบางตัว (Slack เป็นตัวอย่างที่รู้จักกันดี) แสดง Favicon ของเว็บไซต์ข้างลิงก์ที่ขยายตัวอย่าง ตัวอย่างลิงก์ส่วนใหญ่อาศัยภาพ Open Graph เป็นหลัก แต่ Favicon มักใช้เป็นเครื่องหมายแบรนด์ขนาดเล็ก

ทำไม Favicon จึงสำคัญต่อเว็บไซต์ของคุณ

การจดจำแบรนด์

คนจดจำสีและรูปทรงได้เร็วกว่าอ่านข้อความ ไอคอนที่สม่ำเสมอซึ่งปรากฏซ้ำในแท็บ บุ๊กมาร์ก และผลการค้นหา จะสร้างความคุ้นเคยทุกครั้งที่มีคนเห็น ซึ่งเป็นการเผยแพร่แบรนด์ฟรีในทุกการเข้าชม

ความไว้วางใจและความน่าเชื่อถือ

เว็บไซต์ที่ไม่มี Favicon ดูเหมือนยังทำไม่เสร็จ ไอคอนที่สะอาดและแสดงผลถูกต้องเป็นสัญญาณเล็ก ๆ ว่ามีคนใส่ใจในรายละเอียด ซึ่งช่วยให้เว็บไซต์ดูถูกต้องน่าเชื่อถือ แม้จะไม่ใช่ฟีเจอร์ด้านความปลอดภัย และเว็บไซต์ฟิชชิงก็คัดลอกไอคอนได้ แต่ไอคอนเริ่มต้นที่ว่างเปล่าแทบไม่ช่วยให้ธุรกิจดูมั่นคง

อัตราการคลิกในผลการค้นหา

เนื่องจาก Google แสดง Favicon ข้างรายการของคุณ มันจึงเป็นส่วนหนึ่งของหน้าตาผลการค้นหาของคุณเมื่อเทียบกับคู่แข่ง Google ไม่ได้ประกาศว่า Favicon มีผลต่ออันดับ และคุณไม่ควรคาดหวังว่าอันดับจะดีขึ้น ประโยชน์อยู่ที่การจดจำด้วยภาพ: ผู้ใช้ที่รู้จักไอคอนของคุณมีแนวโน้มจะสังเกตเห็นและเลือกผลการค้นหาของคุณมากขึ้น โดยเฉพาะบนมือถือที่ผลการค้นหาแสดงอย่างกะทัดรัด

การใช้งานเมื่อเปิดหลายแท็บ

เมื่อเบราว์เซอร์เปิดอยู่ยี่สิบแท็บ ชื่อหน้าจะถูกตัดจนไม่เหลือ และ Favicon คือสิ่งเดียวที่เหลืออยู่ ไอคอนที่โดดเด่นช่วยให้ผู้คนหาแท็บของคุณเจอทันทีและกลับมาที่แท็บนั้น แทนที่จะเปิดซ้ำหรือลืมไปเลย

ความประทับใจแบบมืออาชีพ

Favicon ที่ออกแบบมาอย่างดีแสดงถึงความใส่ใจในรายละเอียดเท่ากับส่วนอื่น ๆ ของเว็บไซต์ ไม่ว่าจะเป็นหน้าสินค้า เอกสารประกอบ บล็อก หรือเว็บแอป มันเป็นหนึ่งในสิ่งที่เพิ่มความเนี้ยบได้ถูกที่สุด

การช่วยให้หาแท็บได้ง่าย

ไอคอนช่วยผู้ใช้ที่กวาดตามองมากกว่าอ่าน รวมถึงผู้ที่มีภาวะดิสเล็กเซียหรือความแตกต่างทางการรับรู้ และทุกคนที่สลับงานอย่างรวดเร็ว ไอคอนที่มีคอนทราสต์สูงและรูปทรงเรียบง่ายจะมองเห็นได้ง่ายกว่า อย่างไรก็ตาม โปรดจำไว้ว่า Favicon เป็นส่วนเสริมเท่านั้น ไม่สามารถแทนที่ชื่อหน้าที่ชัดเจนได้ ซึ่งโปรแกรมอ่านหน้าจอและเทคโนโลยีช่วยเหลือต้องพึ่งพา

จะเกิดอะไรขึ้นถ้าไม่มี Favicon

เบราว์เซอร์จะร้องขอ /favicon.ico จากรากของโดเมนคุณโดยอัตโนมัติ แม้ HTML ของคุณจะไม่ได้ระบุไว้ ถ้าไม่มีไฟล์นี้ จะเกิดหลายอย่างตามมา:

• ไอคอนทั่วไป: ผู้เข้าชมเห็นไอคอนลูกโลก เอกสาร หรือหน้าว่างเริ่มต้นบนแท็บและบุ๊กมาร์ก ซึ่งดูไร้ตัวตน
• ข้อผิดพลาด 404 ใน log: เบราว์เซอร์ทุกตัวที่ขอไฟล์จะสร้างคำขอที่ล้มเหลว บนเว็บไซต์ที่มีผู้เข้าชมมาก สิ่งนี้เพิ่มสัญญาณรบกวนใน access log ระบบตรวจสอบข้อผิดพลาด และการวิเคราะห์ข้อมูล และอาจซ่อนปัญหาจริงไว้
• ไม่มีไอคอนในผลการค้นหาของ Google: หากไม่มี Favicon ที่ถูกต้องและครอว์ลได้ Google จะแสดงไอคอนตัวแทนเริ่มต้นข้างรายการของคุณ
• คำขอที่สูญเปล่า: เบราว์เซอร์อาจลองซ้ำ ทำให้เซิร์ฟเวอร์ของคุณมีภาระเพิ่มเล็กน้อยโดยไร้ประโยชน์

ไอคอนที่เรียบง่ายมากก็ยังดีกว่าไม่มีเลย เพราะช่วยกำจัด 404 และให้สิ่งที่จดจำได้แก่ผู้ใช้

อธิบายรูปแบบไฟล์ Favicon

ไม่มีรูปแบบเดียวที่ครอบคลุมทุกแพลตฟอร์ม เว็บไซต์ส่วนใหญ่จึงใช้ไฟล์ชุดเล็ก ๆ

ภาพ Windows tile รุ่นเก่า (กำหนดค่าผ่าน browserconfig.xml) จำเป็นสำหรับ Internet Explorer 11 และ Edge รุ่นเก่า ปัจจุบันแทบไม่จำเป็นแล้ว เว้นแต่คุณต้องรองรับสภาพแวดล้อมเหล่านั้น

แนวทางของ Google สำหรับ Favicon ในผลการค้นหา

หากต้องการให้ไอคอนของคุณแสดงใน Google Search ให้ปฏิบัติตามข้อกำหนดที่ Google เผยแพร่:

• ขนาด: ภาพต้องเป็นสี่เหลี่ยมจัตุรัส (1:1) และมีขนาดเป็นพหุคูณของ 48 พิกเซล เช่น 48x48, 96x96 หรือ 144x144 จากนั้น Google จะย่อเป็น 16x16 เพื่อแสดงผล ขนาดขั้นต่ำที่รองรับคือ 8x8 แต่แนะนำ 48x48 ขึ้นไป
• รูปแบบ: รูปแบบใดก็ตามที่เบราว์เซอร์รองรับใช้ได้ รวมถึง ICO, PNG และ SVG
• URL ที่คงที่: อย่าเปลี่ยน URL ของ Favicon บ่อย ๆ ที่อยู่ที่คงที่ช่วยให้ Google อัปเดตไอคอนของคุณได้ทันสมัยอยู่เสมอ
• ครอว์ลได้: ทั้งไฟล์ Favicon และหน้าแรกของคุณต้องให้ Googlebot เข้าถึงได้ อย่าบล็อกไว้ใน robots.txt หรือไว้หลังหน้าล็อกอิน
• ประกาศหนึ่งครั้งต่อเว็บไซต์: ไอคอนผูกกับหน้าแรกของเว็บไซต์ ดังนั้นให้ใส่แท็ก <link> ไว้ใน head ของหน้าแรก
• เป็นตัวแทนและเหมาะสม: ไอคอนควรสะท้อนแบรนด์ของคุณ และ Google อาจแทนที่ไอคอนที่ไม่เหมาะสมหรือชวนเข้าใจผิดด้วยไอคอนเริ่มต้นของตน

หลังจากเผยแพร่หรือเปลี่ยน Favicon แล้ว Google อาจใช้เวลาหลายวันถึงหลายสัปดาห์ในการครอว์ลใหม่และอัปเดต จึงไม่ควรคาดหวังว่าจะเปลี่ยนทันที

วิธีสร้าง Favicon อย่างรวดเร็วด้วย MakeFav

คุณไม่ต้องใช้ซอฟต์แวร์ออกแบบหรือบรรทัดคำสั่ง เครื่องมือสร้างของ MakeFav จะเปลี่ยนภาพต้นฉบับภาพเดียวให้เป็นไฟล์ต่าง ๆ ตามที่อธิบายข้างต้น

1. เตรียมงานภาพของคุณ ใช้โลโก้หรือสัญลักษณ์สี่เหลี่ยมจัตุรัสขนาด 512 x 512 px ขึ้นไป รูปทรงเรียบง่ายให้ผลดีที่สุด เพราะไอคอนจะถูกมองที่ขนาด 16 px
2. อัปโหลดที่หน้าแรกของ MakeFav หรือเปิดตัวแก้ไขเพื่อปรับภาพ พื้นหลัง และระยะขอบก่อนส่งออก
3. ดูตัวอย่างผลลัพธ์ที่ขนาดเล็กและบนพื้นหลังสว่างและมืด เพื่อให้แน่ใจว่ายังอ่านได้ชัดเจน
4. ดาวน์โหลดแพ็กเกจ ซึ่งประกอบด้วย ICO, PNG ขนาดต่าง ๆ, Apple touch icon, ไอคอน manifest และโค้ด HTML สำหรับวาง
5. อัปโหลดไฟล์ไปที่รากของเว็บไซต์ เพื่อให้เข้าถึงได้ตามพาธ เช่น /favicon.ico
6. เพิ่ม HTMLลงใน <head> ของทุกหน้า หรือในเลย์เอาต์หรือเทมเพลตที่ใช้ร่วมกัน
7. ตรวจสอบด้วยเครื่องมือตรวจสอบ Favicon จากนั้นล้างแคชเบราว์เซอร์แล้วโหลดหน้าใหม่เพื่อดูไอคอนใหม่

ตัวอย่างโค้ด HTML

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

แอตทริบิวต์ sizes="48x48" บนลิงก์ ICO ช่วยให้เบราว์เซอร์เลือกใช้ SVG เมื่อรองรับ โดยยังคงมี ICO เป็นตัวสำรอง ส่วน PNG ขนาด 96 px ตรงตามกฎพหุคูณของ 48 ของ Google

ตัวอย่าง web app manifest

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

หากคุณทำงานกับ build pipeline หรืออยากทำการสร้างไอคอนให้เป็นอัตโนมัติ ดูได้ที่แหล่งข้อมูลสำหรับนักพัฒนา

เคล็ดลับการออกแบบ Favicon ที่ใช้งานได้ดี

• ทำให้เรียบง่าย รูปทรงเดียว ตัวอักษรเดียว หรือโมโนแกรมตัวหนา ดีกว่าโลโก้ที่มีรายละเอียดมากจนกลายเป็นก้อนเบลอที่ 16 px
• ใช้คอนทราสต์ที่ชัดเจน ตรวจสอบว่าไอคอนมองเห็นได้ทั้งบนธีมเบราว์เซอร์สว่างและมืด พื้นหลังสีช่วยได้
• หลีกเลี่ยงข้อความ อักษรตัวแรกเพียงตัวเดียวใช้ได้ แต่คำทั้งคำอ่านไม่ออกที่ขนาดนี้
• เว้นระยะขอบเล็กน้อยสำหรับไอคอน maskable และมุมโค้งมน เพื่อไม่ให้ส่วนสำคัญถูกตัดออก
• คงความสอดคล้องกับโลโก้และสีแบรนด์ของคุณ เพื่อให้ Favicon ช่วยเสริมการจดจำ
• ทดสอบบนอุปกรณ์จริงและตรวจดูว่าแสดงผลอย่างไรในแท็บ บุ๊กมาร์ก และผลการค้นหาของ Google

ปัญหา Favicon ที่พบบ่อย

หากไอคอนของคุณไม่แสดง สาเหตุที่พบบ่อยคือแคช พาธที่ผิด และไฟล์ที่ถูกบล็อก เบราว์เซอร์แคช Favicon ไว้อย่างเหนียวแน่น ดังนั้นการรีเฟรชแบบเต็ม (hard refresh) หรือเปิดหน้าต่างส่วนตัวใหม่มักเพียงพอที่จะเห็นการเปลี่ยนแปลง ตรวจสอบว่า URL ของไฟล์ตอบกลับสถานะ 200 และประเภทเนื้อหาถูกต้อง และแท็ก <link> อยู่ใน <head> สำหรับการค้นหา ตรวจสอบว่า robots.txt ไม่ได้บล็อกไอคอนหรือหน้าแรก เครื่องมือตรวจสอบของ MakeFav ช่วยให้คุณพบปัญหาเหล่านี้ได้อย่างรวดเร็ว

คำถามที่พบบ่อย

Favicon ย่อมาจากอะไร?

Favicon ย่อมาจาก "favorite icon" ชื่อนี้มาจาก Internet Explorer 5 ซึ่งในปี 1999 เป็นเบราว์เซอร์แรกที่ใช้ไฟล์ไอคอนเล็ก ๆ ตกแต่งรายการในรายการ Favorites ของเบราว์เซอร์ คำนี้ติดปากมาจนถึงทุกวันนี้ แม้ไอคอนจะปรากฏในอีกหลายที่แล้วก็ตาม

Favicon ช่วยเรื่อง SEO ไหม?

Favicon ไม่ใช่ปัจจัยจัดอันดับโดยตรง แต่มันปรากฏข้างชื่อเว็บไซต์ของคุณในผลการค้นหาของ Google ทั้งบนมือถือและเดสก์ท็อป จึงช่วยเพิ่มการจดจำแบรนด์และความน่าสนใจทางสายตาของรายการของคุณ ซึ่งอาจช่วยเรื่องการคลิกทางอ้อม การปฏิบัติตามแนวทางของ Google คือสิ่งที่ทำให้ไอคอนมีสิทธิ์แสดง

Favicon ควรมีขนาดเท่าไหร่?

สำหรับ Google Search ให้ใช้ภาพสี่เหลี่ยมจัตุรัสที่มีขนาดเป็นพหุคูณของ 48 พิกเซล เช่น 48x48 หรือ 96x96 เพื่อให้ครอบคลุมกว้างขึ้น ควรมีไฟล์ ICO, Apple touch icon ขนาด 180x180 และไอคอน manifest ขนาด 192x192 และ 512x512 ด้วย SVG เป็นส่วนเสริมที่ดีเพื่อการปรับขนาดได้

ถ้าใช้ PNG หรือ SVG แล้ว ยังต้องมี favicon.ico ไหม?

ยังควรมีอยู่ เบราว์เซอร์และเครื่องมือบางตัวร้องขอ /favicon.ico โดยค่าเริ่มต้น และซอฟต์แวร์รุ่นเก่าพึ่งพาไฟล์นี้ การมีไฟล์ ICO ที่รากเว็บไซต์ช่วยป้องกันข้อผิดพลาด 404 และเป็นตัวสำรองที่ปลอดภัยเมื่อไม่รองรับ SVG หรือ PNG

ทำไม Favicon ของฉันไม่อัปเดต?

เบราว์เซอร์และเสิร์ชเอนจินแคช Favicon ไว้เป็นเวลานาน ลองรีเฟรชแบบเต็ม เปิดหน้าต่างส่วนตัว หรือล้างแคช ตรวจสอบให้แน่ใจว่าพาธของไฟล์ถูกต้องและไฟล์ใหม่ถูกให้บริการอยู่ ใน Google Search ไอคอนที่เปลี่ยนอาจใช้เวลาหลายวันหรือหลายสัปดาห์กว่าจะถูกครอว์ลและอัปเดต