favicon สำหรับ Next.js
Next.js 14+ App Router ถือว่า /app/icon.png และ /app/favicon.ico เป็นแบบแผน — ใส่เข้าไปแล้ว Next จะส่งแท็กที่ถูกต้องโดยอัตโนมัติ
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
วาง favicon.ico ไว้ใน /app จากนั้น Next จะให้บริการที่ /favicon.ico และแทรกแท็กลิงก์
สำหรับไอคอนหลายขนาดหรือมีธีม ให้ใช้รูปแบบไฟล์: icon.png, icon.svg, apple-icon.png ภายใน /app ถัดไปสร้างแท็ก <link> จากข้อมูลเมตาของไฟล์
วิธีการทำงาน
- 1
สร้าง favicon.ico
หลายขนาด 16/32/48/64 จากแหล่ง 512×512
- 2
วางใน /app
/app/favicon.ico ให้บริการอัตโนมัติ เพิ่ม icon.png สำหรับ HD
- 3
ตรวจสอบ
เปิด /favicon.ico ในเบราว์เซอร์ของคุณ — Next ให้บริการโดยไม่มีการกำหนดค่าใดๆ
ลองเลย
สร้าง favicon ที่พร้อมใช้งาน Next.js
เครื่องมือสร้าง Faviconคำถามที่พบบ่อย
ไอคอนอยู่ที่ไหนใน Next.js App Router+
ภายในไดเร็กทอรี /app ชื่อไฟล์ (icon, apple-icon, favicon) จะกำหนดบทบาท
แล้วเราเตอร์ Pages ล่ะ?+
วาง favicon.ico ลงใน /public และลิงก์จาก _document.tsx
ฉันยังต้องใช้ .ico หลายขนาดหรือไม่+
แนะนำสำหรับการรองรับเบราว์เซอร์รุ่นเก่า โดยเฉพาะ Edge และทางลัดในโหมด IE