ไอคอน Fav สำหรับ Next.js
Next.js 14+ App Router แนะนำรูปแบบไอคอนแบบไฟล์: วาง favicon.ico หรือ icon.png ภายในไดเร็กทอรี /app และ Next.js ปล่อยแท็ก `<link>` ที่ถูกต้องโดยอัตโนมัติ — ไม่จำเป็นต้องใช้ส่วนประกอบ Head แบบกำหนดเอง สำหรับโปรเจ็กต์ Pages Router ให้วาง favicon.ico ใน /public และลิงก์จาก _document.tsx favicon generator จะสร้างชุดไฟล์ที่สมบูรณ์จากอิมเมจต้นฉบับเดียว และ best favicon size guide จะครอบคลุมว่าขนาดใดมีความสำคัญสำหรับแต่ละบริบท
Next.js 13+ ที่มี App Router ถือว่าชื่อไฟล์พิเศษในไดเรกทอรี /app เป็นแบบแผนข้อมูลเมตา ไฟล์ชื่อ favicon.ico, icon.png, icon.svg และ apple-icon.png ได้รับการยอมรับโดยอัตโนมัติจากระบบข้อมูลเมตา Next.js และให้บริการพร้อมกับส่วนหัวการตอบกลับที่ถูกต้องและแท็ก `<link>` โดยไม่มีการกำหนดค่าใดๆ ในlayout.tsx หรือการส่งออกข้อมูลเมตา
หากต้องการใช้รูปแบบไฟล์ ให้วาง favicon.ico ของคุณไว้ในไดเร็กทอรี /app (ไม่ใช่ /public) Next.js ให้บริการที่เส้นทาง /favicon.ico และแทรกแท็กลิงก์ลงในทุกเพจที่ใช้เค้าโครงนั้นร่วมกัน ไฟล์ไอคอนจะต้องอยู่ในระดับเดียวกับ rootlayout.tsx ของคุณจึงจะนำไปใช้ได้ทั่วโลก
สำหรับไอคอน DPI สูงที่ใช้ App Router ให้วาง icon.png ไว้ใน /app Next.js อ่านขนาดและสร้างแท็ก `<link rel='icon' sizes='...' href='...'>` ที่เหมาะสม หากต้องการให้บริการหลายขนาด ให้ส่งออกไฟล์ไอคอนหลายไฟล์ที่มีส่วนต่อท้ายตัวเลขต่างกัน: icon.png (32×32), icon@2x.png (64×64) หรือใช้ icon.svg สำหรับไฟล์เดียวที่ปรับขนาดได้อย่างไม่จำกัด
App Router ยังรองรับไฟล์ apple-icon.png เฉพาะสำหรับไอคอนหน้าจอหลัก iOS วาง apple-icon.png (180×180) ภายใน /app และ Next.js จะปล่อย `<link rel='apple-touch-icon' href='...'>` โดยอัตโนมัติ นี่เป็นแนวทางที่สะอาดที่สุด — ไม่จำเป็นต้องส่งออกข้อมูลเมตาด้วยตนเอง
หากคุณต้องการประกาศไอคอน Fav ในโค้ดแทนที่จะประกาศผ่านรูปแบบไฟล์ ให้ส่งออกออบเจ็กต์ข้อมูลเมตาจากlayout.tsx คุณสมบัติไอคอนยอมรับวัตถุที่มีทางลัด ไอคอน แอปเปิ้ล และช่องอื่นๆ ตัวอย่าง: `ส่งออกข้อมูลเมตา const: ข้อมูลเมตา = { ไอคอน: { ไอคอน: '/favicon.ico', apple: '/apple-touch-icon.png' } }` วิธีการนี้มีประโยชน์เมื่อคุณต้องการเส้นทางไอคอนแบบไดนามิกตามสถานที่หรือสภาพแวดล้อม
สำหรับโปรเจ็กต์ Pages Router (Next.js 12 และต่ำกว่า หรือโปรเจ็กต์ที่ยังไม่ได้ย้ายไปยัง App Router) การจัดการ favicon จะทำงานแตกต่างออกไป วาง favicon.ico ในไดเรกทอรี /public — Next.js ให้บริการ /public ที่ URL ราก เพิ่มแท็กลิงก์ใน Pages/_document.tsx ภายในองค์ประกอบ `<Head>`: `<link rel='icon' href='/favicon.ico' />` `<Head>` นี้เป็นส่วนหัวระดับเอกสาร ไม่ใช่การนำเข้าถัดไป/ส่วนหัวต่อหน้า
ส่วนประกอบถัดไป/ส่วนหัว (นำเข้าส่วนหัวจาก 'ถัดไป/ส่วนหัว') ใช้งานได้กับการแทนที่ไอคอนต่อหน้าใน Pages Router หากคุณต้องการไอคอน Fav อื่นในหน้าใดหน้าหนึ่ง ให้รวม `<link rel='icon'>` ไว้ใน `<Head>` ในองค์ประกอบของหน้านั้น แท็กต่อหน้าจะแทนที่แท็กระดับเอกสาร สิ่งนี้มีประโยชน์สำหรับไซต์ที่มีหลายแบรนด์ที่ให้บริการจากการปรับใช้ Next.js เพียงครั้งเดียว
ไอคอน Favic ของ SVG ได้รับการสนับสนุนโดยสมบูรณ์ตามแบบแผน Next.js App Router ตั้งชื่อไฟล์ icon.svg และวางไว้ใน /app Next.js ส่งเสียง `<link rel='icon' type='image/svg+xml' href='/_next/static/media/icon.svg...'>` เนื่องจาก Next.js แฮชชื่อไฟล์แบบคงที่สำหรับการป้องกันแคช คุณจึงไม่ต้องกังวลเกี่ยวกับการทำให้แคช favicon ใช้งานไม่ได้ การเปลี่ยนไฟล์จะเปลี่ยนแฮชและบังคับให้เบราว์เซอร์ดึงข้อมูลใหม่
รายการเว็บใน Next.js App Router ได้รับการกำหนดค่าผ่านไฟล์ manifest.ts ใน /app ส่งออกฟังก์ชันเริ่มต้นที่ส่งคืนวัตถุ MetadataRoute.Manifest ที่รวมขนาดไอคอนของคุณ Next.js แสดงผลเป็น application/manifest+json ที่ /manifest.webmanifest ขนาด 192×192 และ 512×512 PNG ที่อ้างอิงในไฟล์ Manifest ควรอยู่ใน /public
Turbopack (ชุดรวมรุ่นทดลองใน Next.js 14+) จัดการสินทรัพย์คงที่ใน /public เหมือนกับ webpack ไฟล์ Favicon ใน /public ให้บริการโดยไม่ต้องรวมกลุ่ม สำหรับไฟล์ใน /app (รูปแบบไอคอน) Turbopack จะประมวลผลไฟล์เหล่านี้เป็นสินทรัพย์ข้อมูลเมตา โดยไม่จำเป็นต้องเปลี่ยนการกำหนดค่าเมื่อสลับระหว่าง Turbopack และ webpack
Next.js ISR (การสร้างแบบคงที่แบบเพิ่มหน่วย) และการปรับใช้ Edge ไม่ส่งผลต่อการให้บริการ favicon ไฟล์ Favicon เป็นเนื้อหาคงที่ที่ให้บริการจาก CDN Edge ไม่ใช่จากแคช ISR ซึ่งหมายความว่าการอัปเดต favicon จะเผยแพร่ทันทีหลังจากการปรับใช้โดยไม่ต้องรอการตรวจสอบความถูกต้องของเพจอีกครั้ง
แอป Next.js หลายสถานที่มักจะต้องมีไอคอนการรับรู้สถานที่ ใช้ฟังก์ชัน GenerateMetadata ในlayout.tsx เพื่อส่งคืนเส้นทางไอคอนเฉพาะสถานที่โดยอิงตามอ็อบเจ็กต์ Params นี่เป็นคุณลักษณะเฉพาะของ App Router เท่านั้น — ไซต์ Pages Router ต้องใช้ตรรกะ _document.tsx แบบกำหนดเองหรือเซิร์ฟเวอร์แบบกำหนดเองเพื่อให้ได้ไอคอน Fav สำหรับแต่ละสถานที่
หลังจากการปรับใช้ ให้ตรวจสอบไอคอน Fav Next.js ของคุณโดยใช้ favicon tester ตรวจสอบว่า /favicon.ico, /icon.svg และ /apple-touch-icon.png ทั้งหมดส่งคืนการตอบกลับ 200 รายการพร้อมส่วนหัวประเภทเนื้อหาที่ถูกต้อง นอกจากนี้ ให้ตรวจสอบ `<head>` HTML ของไซต์ที่ใช้งานของคุณเพื่อยืนยันว่า Next.js ได้ปล่อยแท็กลิงก์ที่คาดไว้ทั้งหมดแล้ว
วิธีการทำงาน
- 1
สร้างแพ็คเกจ favicon ของคุณ
อัปโหลด 512×512 PNG หรือ SVG ไปยัง [favicon generator](tool:favicon-generator) ดาวน์โหลด favicon.ico, icon.svg, apple-touch-icon.png (180×180) และไฟล์ Manifest PNG
- 2
วาง favicon.ico ใน /app (App Router)
คัดลอก favicon.ico ไปยังไดเร็กทอรี /app ของโปรเจ็กต์ของคุณควบคู่ไปกับlayout.tsx Next.js จะให้บริการโดยอัตโนมัติและแทรกแท็กลิงก์ สำหรับ Pages Router ให้วางไว้ใน /public แทน
- 3
เพิ่ม icon.svg เพื่อการเรนเดอร์ที่คมชัด
เปลี่ยนชื่อ SVG ของคุณเป็น icon.svg และวางไว้ใน /app (App Router) Next.js ปล่อยแท็กลิงก์ SVG โดยอัตโนมัติ สำหรับ Pages Router ให้วางใน /public และเพิ่มแท็กลิงก์ใน _document.tsx
- 4
เพิ่ม apple-icon.png สำหรับการติดตั้ง iOS
เปลี่ยนชื่อ 180×180 PNG ของคุณเป็น apple-icon.png และวางไว้ใน /app (App Router) สำหรับ Pages Router ให้วาง apple-touch-icon.png ใน /public และเพิ่มแท็กลิงก์ใน _document.tsx
- 5
กำหนดค่ารายการเว็บ
สำหรับ App Router ให้สร้าง /app/manifest.ts และส่งออกข้อมูลเมตา Manifest รวมถึงรายการไอคอน 192×192 และ 512×512 วาง PNGs ลงใน /public สำหรับ Pages Router ให้วาง site.webmanifest ใน /public และเพิ่มแท็กลิงก์รายการใน _document.tsx
- 6
ตรวจสอบในการผลิต
หลังจากการปรับใช้ ให้ดูแหล่งที่มาบน URL ที่เผยแพร่อยู่ของคุณและยืนยันว่ามีแท็กลิงก์ทั้งหมดอยู่ ใช้ [favicon tester](utility:favicon-tester) เพื่อตรวจสอบทุกไอคอน URL ส่งคืน 200 พร้อมประเภทเนื้อหาที่ถูกต้อง
ลองเลย
สร้าง favicon ที่พร้อมใช้งาน Next.js
เครื่องมือสร้าง Faviconคำถามที่พบบ่อย
favicons อยู่ที่ไหนใน Next.js App Router+
ภายในไดเร็กทอรี /app ไฟล์ชื่อ favicon.ico, icon.png, icon.svg และ apple-icon.png จะถูกจดจำและเชื่อมโยงโดยอัตโนมัติ favicon ทั่วโลกอยู่ใน /app; รูปแบบเฉพาะจะอยู่ในไดเร็กทอรีย่อยเค้าโครงที่เกี่ยวข้อง
Favicons อยู่ที่ไหนใน Next.js Pages Router?+
ในไดเรกทอรี /public เพิ่มแท็กลิงก์ในเพจ/_document.tsx ภายในคอมโพเนนต์ `<Head>` Next.js ให้บริการไฟล์ /public ที่ URL ราก — /public/favicon.ico สามารถเข้าถึงได้ที่ https://yourdomain.com/favicon.ico
ฉันจำเป็นต้องแก้ไขlayout.tsxเพื่อเพิ่ม favicon ใน App Router หรือไม่+
ไม่ หากคุณใช้รูปแบบไฟล์ (favicon.ico ใน /app) หากคุณต้องการโค้ด ให้ส่งออกออบเจ็กต์ข้อมูลเมตาที่มีคุณสมบัติไอคอน ทั้งสองวิธีสร้างแท็ก `<link>` ที่เหมือนกันใน HTML ที่แสดงผล
Next.js รองรับไอคอน Fav ของ SVG หรือไม่+
ใช่. วาง icon.svg ใน /app สำหรับ App Router หรือเพิ่ม `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` ใน _document.tsx สำหรับ Pages Router App Router ปล่อยแท็กลิงก์ SVG จากรูปแบบไฟล์โดยอัตโนมัติ
ฉันจะเพิ่ม apple-touch-icon ใน Next.js ได้อย่างไร+
สำหรับ App Router: วาง apple-icon.png (180×180) ใน /app Next.js ปล่อยแท็กลิงก์ apple-touch-icon โดยอัตโนมัติ สำหรับ Pages Router: วาง apple-touch-icon.png ใน /public และเพิ่มแท็กลิงก์ใน _document.tsx
favicons แคช Next.js โดยอัตโนมัติหรือไม่+
ใช่ สำหรับไฟล์ใน /app — Next.js จะเพิ่มแฮชเนื้อหาให้กับชื่อไฟล์ที่ให้บริการ ดังนั้นการเปลี่ยนแปลงทุกไฟล์จะทำให้เกิดการดึงข้อมูลใหม่ สำหรับไฟล์ใน /public จะไม่มีระบบป้องกันแคชอัตโนมัติ ผนวกสตริงการสืบค้นด้วยตนเองหากจำเป็น
ฉันสามารถใช้ favicon อื่นต่อหน้าใน Next.js ได้หรือไม่+
ใช่. ใน App Router ให้ส่งออกฟังก์ชัน GenerateMetadata ใน page.tsx ของเส้นทางที่ระบุด้วยค่าไอคอนที่กำหนดเอง ใน Pages Router ให้เพิ่ม `<link rel='icon'>` ภายในคอมโพเนนต์ `<Head>` ต่อหน้า ซึ่งจะแทนที่ค่าเริ่มต้นระดับเอกสาร