คู่มือทำ favicon สำหรับ SaaS: React และ Next.js
Favicon คือไอคอนเล็กๆ ที่โผล่บนแท็บเบราว์เซอร์ บุ๊กมาร์ก และหน้าโฮมมือถือ ในแอป SaaS มันช่วยด้าน brand recognition และความน่าเชื่อถืออย่างมาก บทความนี้ครอบคลุมตั้งแต่การออกแบบ ไปจนถึงการตั้งค่าใน React/Next.js
Favicon คืออะไร สำคัญยังไง?
- แสดงบนแท็บ เบราว์เซอร์ บุ๊กมาร์ก ประวัติการเข้าเว็บ และ shortcut
- ทำให้ผู้ใช้หาแท็บคุณเจอเร็วขึ้น
- ป้องกัน error 404 เมื่อเบราว์เซอร์ขอ
favicon.ico - จำเป็นต่อ PWA และเพิ่มความรู้สึก “แอปจริง”
ขนาดและไฟล์ที่ควรมี
- ICO: 16×16, 32×32, 48×48 รวมไว้ใน
favicon.ico - PNG: 16×16, 32×32, 96×96, 180×180, 192×192, 512×512
- SVG: สเกลได้ไม่จำกัด (เบราว์เซอร์ใหม่รองรับ)
ตัวอย่าง tag สำหรับแต่ละแพลตฟอร์ม
iOS
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Android manifest
{
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}
Windows (browserconfig)
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>
ขั้นตอนออกแบบ
- ใช้ canvas 512×512 px พื้นหลังโปร่งใส
- เน้นรูปทรงง่าย อ่านได้แม้ 16px
- ใช้สีหลักของแบรนด์และมี contrast สูง
- Export เป็น PNG/SVG และสร้างไฟล์ ICO รวมหลายขนาด
- บีบอัดไฟล์ให้เล็กกว่า 5 KB ถ้าเป็นไปได้
นำไปใช้ใน React
โครงสร้างไฟล์ /public
favicon.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
mstile-150x150.png
favicon.svg
site.webmanifest
browserconfig.xml
เพิ่ม <link> และ <meta> ใน public/index.html หรือจัดการผ่าน React Helmet เช่น
import { Helmet } from 'react-helmet';
function App() {
return (
<Helmet>
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="alternate icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="theme-color" content="#0A0A0A" />
</Helmet>
);
}
นำไปใช้ใน Next.js
App Router (Next 13+)
export const metadata = {
icons: {
icon: [
{ url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
{ url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
{ url: "/favicon.ico" }
],
apple: [{ url: "/apple-touch-icon.png", sizes: "180x180" }],
other: [{ rel: "mask-icon", url: "/safari-pinned-tab.svg", color: "#0A0A0A" }]
},
manifest: "/site.webmanifest",
themeColor: "#ffffff"
};
Pages Router
เพิ่ม <Head> ใน _document.tsx ตามตัวอย่าง React
ตัวอย่าง site.webmanifest
{
"name": "SaaS ของคุณ",
"short_name": "SaaS",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
FAQ สั้นๆ
| อาการ | สาเหตุ | วิธีแก้ |
| --- | --- | --- |
| ไม่เห็น favicon | ไฟล์/พาธผิด | ตรวจว่ามีใน /public และล้าง cache |
| ไอคอนบน iOS แตก | ไม่มี Apple Touch Icon 180×180 | export PNG คุณภาพสูง |
| โหมดมืดแล้วมองไม่เห็น | สีใกล้กับพื้นหลัง | เพิ่มเส้นขอบหรือปรับสี |
| PWA ไม่มีไอคอน | manifest ขาด 192/512 px | เติม icons ตามตัวอย่าง |
อัตโนมัติและ workflow
- ใช้ AImageTools Favicon Generator
- ดาวน์โหลดชุดไฟล์ PNG/SVG/ICO + manifest
- วางใน
/public/ - ตั้ง script/CI ตรวจว่ามีไฟล์ครบก่อน deploy
- หลัง deploy เคลียร์ cache และทดสอบบนหลายอุปกรณ์
สรุป
Favicon อาจเล็ก แต่เป็น impression แรกของแบรนด์ ออกแบบให้ชัดเจน จัดเตรียมทุกขนาด และตั้งค่าให้ถูกต้องใน React/Next.js เพื่อให้ SaaS ของคุณดูมืออาชีพทุกแพลตฟอร์ม