Favicon คืออะไร ทำไมสำคัญ
Favicon (Favorite Icon) คือไอคอนเล็กๆ ที่แสดงบนแท็บเบราว์เซอร์ Bookmark และผลการค้นหาบนมือถือ แม้จะเล็กแต่มีผลต่อภาพลักษณ์มาก เว็บที่ไม่มี Favicon จะขึ้นไอคอนเอกสารเปล่าๆ ดูไม่น่าเชื่อถือ ส่วนเว็บที่มีจะช่วยให้ผู้ใช้จำแบรนด์และหาแท็บเจอง่ายเมื่อเปิดหลายแท็บ
สร้างไฟล์ Favicon ที่ถูกต้อง
เริ่มจากโลโก้หรือสัญลักษณ์แบรนด์เป็นรูปสี่เหลี่ยมจัตุรัส แล้วสร้างหลายขนาดเพื่อรองรับทุกอุปกรณ์
- favicon.ico — 16×16 และ 32×32 (เบราว์เซอร์รุ่นเก่า)
- 32×32 / 96×96 PNG — เบราว์เซอร์ทั่วไป
- 180×180 PNG — Apple Touch Icon (iPhone/iPad)
- 192×192 และ 512×512 PNG — Android / PWA
- SVG — ไอคอนแบบ Vector คมชัดทุกขนาด (เบราว์เซอร์ใหม่)
ติดตั้ง Favicon บน WordPress (ง่ายสุด)
- เข้า Appearance → Customize → Site Identity
- ที่หัวข้อ "Site Icon" กด "Select site icon"
- อัปโหลดรูปขนาดอย่างน้อย 512×512px แล้ว Crop เป็นสี่เหลี่ยมจัตุรัส
- กด Publish — WordPress จะสร้างทุกขนาดและใส่ Tag ให้อัตโนมัติ
วิธีนี้ครอบคลุมทั้ง Favicon, Apple Touch Icon และ PWA Icon ในขั้นตอนเดียว เหมาะกับมือใหม่ที่สุด
ติดตั้ง Favicon บนเว็บ HTML
อัปโหลดไฟล์ไอคอนไปไว้ใน Root ของเว็บ (เช่นเดียวกับ index.html) แล้วเพิ่ม Tag เหล่านี้ใน <head>
<!-- พื้นฐาน -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Apple (iPhone/iPad) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android / PWA (ใน manifest) -->
<link rel="manifest" href="/site.webmanifest">ตัวอย่างไฟล์ site.webmanifest สำหรับ Android/PWA
{
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}อัปโหลดผ่าน cPanel File Manager
เปิด cPanel → File Manager → เข้าโฟลเดอร์ public_html → กด Upload แล้วอัปโหลดไฟล์ favicon ทุกขนาดไว้ที่ Root ตรวจว่าชื่อไฟล์ตรงกับที่อ้างใน Tag ทุกตัว ดูวิธีใช้ File Manager เพิ่มที่ จัดการไฟล์ด้วย File Manager
ตรวจสอบว่า Favicon แสดงถูกต้อง
# 1. ตรวจว่าไฟล์เข้าถึงได้ (ควรได้ HTTP 200)
curl -I https://yourdomain.com/favicon.ico
curl -I https://yourdomain.com/apple-touch-icon.png
# 2. ตรวจ Tag ใน HTML
curl -s https://yourdomain.com | grep -i 'rel="icon"\|apple-touch-icon\|manifest'
# 3. ทดสอบบนเบราว์เซอร์
- เปิดเว็บใน Incognito เพื่อเลี่ยง Cache
- ดูแท็บ ว่ามีไอคอนขึ้น
- Add to Home Screen บนมือถือ ดู Apple/Android Iconแก้ปัญหาที่พบบ่อย
Favicon ไม่ขึ้นเลยทั้งที่อัปโหลดแล้ว
ตรวจว่าไฟล์อยู่ที่ Root จริงและเข้าถึงได้ผ่าน URL ตรง (ได้ 200 ไม่ใช่ 404) และตรวจว่าชื่อไฟล์ใน Tag สะกดตรงกับไฟล์จริง รวมถึงตัวพิมพ์เล็ก-ใหญ่บน Linux Server
เปลี่ยน Favicon แล้วยังเห็นอันเก่า
เป็นเรื่อง Cache ล้วนๆ เคลียร์ Cache เบราว์เซอร์, Cache Plugin และ CDN (Cloudflare → Purge) แล้วเพิ่ม query string เช่น favicon.ico?v=2 เพื่อบังคับโหลดใหม่
Favicon ขึ้นบนคอมแต่ไม่ขึ้นบน iPhone
iPhone ใช้ apple-touch-icon แยก ตรวจว่ามีไฟล์ 180×180 และ Tag rel="apple-touch-icon" ครบ และอัปโหลดไว้ที่ Root
ไอคอนเบลอหรือแตกเมื่อย่อเล็ก
เกิดจากต้นฉบับความละเอียดต่ำหรือดีไซน์ซับซ้อนเกินไป ใช้ภาพต้นฉบับ 512px ขึ้นไป ออกแบบเรียบง่าย และ Export PNG ที่ขอบคมชัด
คำถามที่พบบ่อย
Q: Favicon มีผลต่อ SEO ไหม?
A: มีทางอ้อม Google แสดง Favicon ข้างผลการค้นหาบนมือถือ เว็บที่มีไอคอนชัดเจนดูน่าเชื่อถือและเพิ่มอัตราการคลิก (CTR) แต่ไม่ใช่ปัจจัยอันดับโดยตรง
Q: ใช้ไฟล์ .ico หรือ .png ดีกว่ากัน?
A: ใช้ทั้งคู่เพื่อความเข้ากันได้สูงสุด — .ico สำหรับเบราว์เซอร์เก่า, PNG/SVG สำหรับเบราว์เซอร์ใหม่ เครื่องมือสร้าง Favicon ออนไลน์มักสร้างให้ครบทุกฟอร์แมตในครั้งเดียว
Q: ต้องทำ Favicon ใหม่ทุกครั้งที่เปลี่ยนธีมไหม?
A: ไม่ Favicon ผูกกับเว็บไม่ใช่ธีม บน WordPress ตั้งใน Site Identity จะคงอยู่แม้เปลี่ยนธีม ตรวจสอบความพร้อมก่อนเปิดเว็บได้จาก เช็กลิสต์ก่อนเปิดเว็บ
หลังตั้ง Favicon และเตรียมเว็บพร้อมแล้ว หากกำลังมองหา Hosting ที่จัดการง่ายผ่าน DirectAdmin และมี Server โซนเอเชีย ผู้ให้บริการอย่าง AsiaGB เป็นอีกตัวเลือก และก่อนเปิดเว็บจริงควรตรวจ DNS กับ Header ความปลอดภัยด้วยเครื่องมือฟรี Analyze.in.th เพื่อให้แน่ใจว่าทุกอย่างพร้อมรับผู้เข้าชม