App Router สร้างแท็กไอคอนจากไฟล์ตามข้อตกลงหรือออบเจ็กต์ metadata ได้ ทั้งสองวิธีใช้ได้ แต่หากผสมกันโดยไม่มีกฎชัดเจนอาจเกิดประกาศที่แข่งขันกัน
เลือกใช้ข้อตกลงไฟล์
วาง favicon.ico ที่รากของ app ไฟล์ icon ที่รองรับอยู่ในส่วนเส้นทางได้ ส่วน apple-icon อธิบายไอคอนสำหรับอุปกรณ์ Apple
Next.js ตรวจพบไฟล์เหล่านี้ กำหนดแอตทริบิวต์ที่เหมาะสม และเพิ่มแท็ก link ที่เกี่ยวข้องใน head ไอคอนในส่วนเส้นทางจะใช้กับเส้นทางภายในส่วนนั้น
| ไฟล์ | ตำแหน่ง | การใช้งาน |
|---|---|---|
| favicon.ico | app/ | ไอคอนสำรองของเว็บไซต์ |
| icon.svg | ส่วนเส้นทางใน app | ไอคอนเบราว์เซอร์ |
| apple-icon.png | ส่วนเส้นทางใน app | ไอคอน Apple |
| manifest.webmanifest | ส่วนเส้นทางใน app | แมนิเฟสต์สำหรับการติดตั้ง |
ใช้ metadata เมื่อกำหนดพาธเอง
หากไฟล์อยู่ใน public หรือโฮสต์ภาพ ให้ประกาศ metadata.icons ใน layout หรือ page ระบุ icon, apple และ shortcut เมื่อจำเป็น โดยใช้ URL ที่สอดคล้องกัน
Metadata ของส่วนลูกอาจแทนที่ฟิลด์ประกอบที่สืบทอดจากส่วนแม่ ตรวจ head สุดท้ายในหลายเส้นทาง แทนการสันนิษฐานว่าทุกรายการจากส่วนแม่ถูกผสานไว้
สำหรับไอคอนที่สร้างตามคำขอ Next.js รองรับ icon.tsx หรือ icon.js ด้วย ฟังก์ชันส่งข้อมูลภาพพร้อมขนาดและชนิดเนื้อหาที่ระบุชัด ใช้วิธีนี้เมื่อองค์ประกอบต้องเปลี่ยนแบบไดนามิกจริง ๆ เพราะไฟล์คงที่แคช ตรวจสอบ และให้บริการอย่างสม่ำเสมอในแต่ละการเผยแพร่ได้ง่ายกว่า
เชื่อมแมนิเฟสต์และไอคอน
ไฟล์แมนิเฟสต์คงที่หรือฟังก์ชัน manifest.ts อธิบายชื่อแอป สี และไอคอนสำหรับติดตั้งได้ URL ไอคอนในแมนิเฟสต์ต้องเปิดสาธารณะและชี้ไปยังไฟล์ที่มีขนาดตรงกับที่ประกาศ
แยกหน้าที่แมนิเฟสต์จากฟาวิคอนในแท็บ ไอคอนติดตั้ง 512×512 ไม่ได้แทน icon.svg หรือ favicon.ico โดยอัตโนมัติ
ทดสอบในระบบจริง
บิลด์สำหรับใช้งานจริง เปิดหนึ่งเส้นทางจากแต่ละส่วนที่ได้รับผลกระทบ แล้วตรวจแท็ก link จากนั้นเปิด URL ของทุกไฟล์โดยตรงและยืนยันว่า middleware ไม่ดักคำขอ
หากใช้ basePath หรือ CDN ให้ทดสอบ URL ที่สร้างในสภาพแวดล้อมที่เผยแพร่ การทำงานในเครื่องอาจไม่แสดงปัญหาฐาน URL สาธารณะหรือกฎเขียนพาธใหม่ที่ผิด
แหล่งข้อมูลต้นทาง
คำถามที่พบบ่อย
ต้องเขียนแท็ก link เองไหม?
ไม่ ข้อตกลงไฟล์หรือ metadata.icons สร้างให้ได้ เลือกแหล่งกำหนดหลักที่ชัดเจนเพียงทางเดียว
ควรวาง favicon.ico ที่ไหน?
เมื่อใช้ App Router ข้อตกลง favicon.ico รองรับที่รากของไดเรกทอรี app
manifest.ts แทน icon.svg ได้ไหม?
ไม่ได้ แมนิเฟสต์อธิบายไอคอนสำหรับติดตั้งและข้อมูลอื่น ส่วน icon.svg ให้ไอคอนแก่เบราว์เซอร์โดยตรง