Favicon ทำหน้าที่อะไร?
Favicon ย่อมาจาก “Favorite Icon” เป็นไอคอนขนาดเล็กที่ใช้แทนเว็บไซต์ของคุณในหลายตำแหน่งบนเบราว์เซอร์ ถึงแม้จะมีขนาดเพียงไม่กี่พิกเซล แต่ favicon มีบทบาทสำคัญในการสร้างแบรนด์และประสบการณ์ผู้ใช้งานเว็บไซต์
แสดงบน Tab ของเบราว์เซอร์
เมื่อคุณเปิดเว็บไซต์หลายแท็บพร้อมกัน favicon จะช่วยให้คุณแยกแยะแต่ละเว็บไซต์ได้อย่างรวดเร็ว แทนที่จะต้องอ่านชื่อเว็บไซต์ทีละแท็บ คุณสามารถมองหาไอคอนที่คุณจำได้ทันที
แสดงบน Bookmark Bar
เมื่อผู้ใช้บันทึกเว็บไซต์ของคุณไว้ใน bookmark หรือ favorites bar ไอคอน favicon จะแสดงข้างชื่อเว็บไซต์ ทำให้ดูเป็นระเบียบและจดจำได้ง่ายกว่าการแสดงแค่ข้อความ
แสดงบนผลการค้นหา Google
Google นำเสนอ favicon ขนาดเล็ก (48×48) ข้างชื่อเว็บไซต์ในผลการค้นหา ทำให้ผู้ใช้สามารถระบุตำแหน่งเว็บไซต์ที่ต้องการได้อย่างรวดเร็วในกรณีที่มีหลายผลลัพธ์ที่เกี่ยวข้อง
—
Favicon ขนาดที่แนะนำใน 2026
การเลือกขนาด favicon ที่ถูกต้องเป็นสิ่งสำคัญเพื่อให้แสดงผลได้ดีบนอุปกรณ์ทุกประเภท ปัจจุบันมีหลายรูปแบบไฟล์ที่ควรใช้งาน
PNG (16×16, 32×32, 48×48)
- 16×16 พิกเซล — ขนาดมาตรฐานสำหรับ tab ของเบราว์เซอร์ส่วนใหญ่
- 32×32 พิกเซล — ใช้บน tab ของเบราว์เซอร์บางตัวและ address bar
- 48×48 พิกเซล — ขนาดที่ Google ใช้แสดงในผลการค้นหา
- รูปแบบ PNG รองรับความโปร่งใส (transparency) และให้คุณภาพภาพที่ดี
SVG (Vector, Scale ได้ไม่จำกัด)
- ไฟล์ SVG เป็น vector format ที่ขยาย-ลดขนาดได้โดยไม่สูญเสียคุณภาพ
- เหมาะสำหรับอุปกรณ์ที่มีความละเอียดสูง (Retina display)
- ขนาดไฟล์เล็กและรองรับการแสดงผลบนจอความละเอียดสูง
- กำลังเป็นมาตรฐานใหม่สำหรับ modern web
ICO (Legacy Support)
- รูปแบบ .ico เป็นรูปแบบดั้งเดิมที่ Microsoft สร้างขึ้น
- สามารถบรรจุหลายขนาดไว้ในไฟล์เดียว
- ยังคงจำเป็นสำหรับ Internet Explorer รุ่นเก่า
- แนะนำให้มีไฟล์ ICO ไว้เพื่อความเข้ากันได้กับเบราว์เซอร์รุ่นเก่า
วิธีสร้าง Favicon ง่ายๆ
การสร้าง favicon ไม่จำเป็นต้องมีทักษะด้านการออกแบบระดับสูง คุณสามารถสร้างได้ด้วยเครื่องมือที่มีอยู่แล้ว
- ออกแบบใน Photoshop หรือ Figma
- แปลงเป็น .ico หรือ .png
วิธีเปลี่ยน Favicon บน WordPress
หากคุณใช้ WordPress การเปลี่ยน favicon สามารถทำได้หลายวิธี ตั้งแต่วิธีที่ง่ายที่สุดไปจนถึงวิธีที่ต้องแก้ไขโค้ด
ผ่าน Theme Customizer
แก้ไข Theme Code
สำหรับการควบคุมที่มากกว่า คุณสามารถเพิ่มโค้ดในไฟล์ header.php ของธีม:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">หมายเหตุ: หากคุณใช้ รับทำเว็บไซต์ WordPress จากทีมงานมืออาชีพ การตั้งค่า favicon จะรวมอยู่ในบริการแล้ว
Favicon กับ SEO — มีผลต่อการจัดอันดับหรือไม่?
หลายคนสงสัยว่า favicon ส่งผลต่อการจัดอันดับ Google หรือไม่ คำตอบคือ ไม่โดยตรง แต่มีผลทางอ้อมที่สำคัญ
Favicon กับ SEO — มีผลต่อการจัดอันดับหรือไม่?
ผลกระทบทางอ้อมต่อ SEO
- อัตราการคลิก (CTR) — เว็บไซต์ที่มี favicon ดึงดูดใจในผลการค้นหามักได้รับการคลิกมากกว่า
- การจดจำแบรนด์ — Favicon ที่สอดคล้องกับแบรนด์ช่วยสร้างความจดจำและความน่าเชื่อถือ
- ประสบการณ์ผู้ใช้ — เว็บไซต์ที่ดูเป็นมืออาชีพมีโอกาสที่ผู้ใช้จะอยู่นานกว่า ซึ่งส่งผลบวกต่อ ranking signals
สิ่งที่ Google แนะนำ
Google ระบุแนวทางปฏิบัติสำหรับ favicon ในผลการค้นหาดังนี้:
- ขนาดอย่างน้อย 48×48 พิกเซล
- เป็นไฟล์ .ico, .png, .svg, .gif หรือ .webp
- URL ของ favicon ต้องเป็น URL ที่ crawl ได้และไม่ถูก block โดย robots.txt
- Favicon ควรเป็นสีเดียวกับแบรนด์หรือมีพื้นหลังโปร่งใส
สิ่งที่ไม่มีผลโดยตรง
Favicon ไม่ใช่ปัจจัย ranking โดยตรงของ Google การมีหรือไม่มี favicon จะไม่ทำให้เว็บไซต์ของคุณถูกลดอันดับ แต่การมี favicon ที่ดีเป็นส่วนหนึ่งของ ออกแบบเว็บไซต์ ที่ดี ซึ่งส่งผลต่อประสบการณ์ผู้ใช้โดยรวม
สรุป
Favicon อาจเป็นองค์ประกอบเล็กๆ บนเว็บไซต์ แต่มีบทบาทสำคัญในการสร้างแบรนด์และประสบการณ์ผู้ใช้ที่ดี ไอคอนขนาดเล็กนี้ช่วยให้ผู้เยี่ยมชมจดจำเว็บไซต์ของคุณได้ง่ายขึ้น ไม่ว่าจะเป็นบน tab เบราว์เซอร์, bookmark bar หรือผลการค้นหา Google
สิ่งสำคัญที่ต้องจำ:
- ใช้ขนาด PNG 16×16, 32×32 และ 48×48 พิกเซล
- พิจารณาใช้ SVG สำหรับอุปกรณ์ความละเอียดสูง
- ออกแบบให้เรียบง่ายและจดจำได้ง่าย
- บน WordPress สามารถเปลี่ยน favicon ได้ง่ายผ่าน Theme Customizer
- ไม่มีผลโดยตรงต่อ ranking แต่มีผลต่อ CTR และ brand recognition
การลงทุนเวลาสักครู่เพื่อสร้าง favicon ที่ดีจะคุ้มค่าในระยะยาว เพราะมันเป็นส่วนหนึ่งของการสร้างความประทับใจแรกพบที่ดีให้กับผู้ใช้เว็บไซต์ของคุณ
คำถามที่พบบ่อย
Favicon ต้องมีขนาดเท่าไหร่?
ขนาดมาตรฐานที่แนะนำคือ 16×16, 32×32 และ 48×48 พิกเซล สำหรับ PNG และควรมีขนาด 48×48 ขึ้นไปสำหรับ Google search results
Favicon กับ App Icon ต่างกันอย่างไร?
Favicon ใช้สำหรับเบราว์เซอร์และเว็บไซต์ มีขนาดเล็ก (16-48 พิกเซล) ส่วน App Icon ใช้สำหรับแอปบนมือถือ มีขนาดใหญ่กว่า (180×180 สำหรับ iOS)
เปลี่ยน favicon บน WordPress ไม่ได้ต้องทำอย่างไร?
ตรวจสอบว่าธีมรองรับ Site Icon feature หรือไม่ หากไม่รองรับ ให้เพิ่มโค้ดในไฟล์ header.php ของธีมลูก (child theme)
สามารถใช้รูปภาพปกติเป็น favicon ได้ไหม?
ได้ แต่ควร resize ให้มีขนาดที่เหมาะสม (16-48 พิกเซล) และอาจต้องแปลงเป็นรูปแบบ .ico หรือ .png สำหรับความเข้ากันได้กับเบราว์เซอร์
Favicon มีผลต่อความเร็วโหลดเว็บไซต์ไหม?
ไฟล์ favicon มีขนาดเล็กมาก (เพียงไม่กี่ KB) จึงไม่มีผลกระทบต่อความเร็วโหลดเว็บไซต์อย่างมีนัยสำคัญ
