ไอคอน Fav สำหรับ Nuxt
Nuxt ให้บริการไฟล์คงที่จาก /public ที่รูทไซต์ของคุณ ดังนั้น /public/favicon.ico จะกลายเป็น /favicon.ico โดยอัตโนมัติ สำหรับไอคอนหลายขนาดหรือ SVG ให้เพิ่มแท็กลิงก์ผ่าน nuxt.config.ts หรือ useHead() ใน app.vue
Quick answer
To add a favicon in Nuxt 3, place favicon.ico in /public (served at /favicon.ico), add link tags in nuxt.config.ts app.head if needed, deploy, and verify with the Favicon Checker — use the Favicon Generator to create the icon files first.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
สร้างแพ็ค favicon ของคุณด้วย Favicon Generator — ส่งออก favicon.ico, favicon.svg และ apple-touch-icon.png จากแหล่งขนาด 512×512 วางลงในโฟลเดอร์ /public ของโปรเจ็กต์ Nuxt
Nuxt 3 ให้บริการทุกอย่างใน /public ที่รูทโดเมนโดยไม่มีการกำหนดค่าเพิ่มเติม เบราว์เซอร์จะขอ /favicon.ico เป็นค่าเริ่มต้น ดังนั้นการวางไฟล์ไว้ที่นั่นจะครอบคลุมกรณีที่พบบ่อยที่สุด
เพื่อการควบคุมไอคอนทุกรูปแบบอย่างชัดเจน ให้เพิ่มแท็กลิงก์ใน nuxt.config.ts ใต้ app.head.link — หรือเรียก useHead({ link: [...] }) ใน app.vue ทั้งสองวิธีแทรกแท็กลงใน <head> ของทุกหน้า
หลังจากการปรับใช้ ให้เปิด URL ที่ใช้งานจริงของคุณในหน้าต่างส่วนตัว และเรียกใช้ Favicon Checker เพื่อยืนยัน /favicon.ico และพาธ <link rel="icon"> ของคุณส่งคืน 200 ไอคอนการพัฒนาที่แคชไว้เป็นสาเหตุทั่วไปที่ทำให้ไอคอน favicon ของ Nuxt ไม่แสดงหลังจากการปรับใช้
หากไอคอนแท็บใช้งานได้ แต่ Google Search ยังคงแสดงไอคอน favicon ว่าง ให้ตรวจสอบว่าลิงก์หน้าแรกที่ใช้งานอยู่ของคุณเป็นไอคอนสี่เหลี่ยมจัตุรัสขนาดอย่างน้อย 48×48 ดูคำแนะนำข้อกำหนดไอคอน Fav ของ Google สำหรับกฎการรวบรวมข้อมูลและขนาด
Nuxt จะไม่สร้างไฟล์ .ico หลายขนาดโดยอัตโนมัติ คุณต้องจัดหาไฟล์เหล่านั้น ใช้ลิงก์สำรอง PNG ใน app.head สำหรับข้อความแจ้งการติดตั้ง PWA และแท็บ DPI สูง
วิธีการทำงาน
- 1
Generate favicon files
Use the Favicon Generator to export favicon.ico and PNG variants from a 512×512 logo.
- 2
เพิ่มไปที่ /public
คัดลอก favicon.ico (และตัวเลือก favicon.svg, apple-touch-icon.png) ลงในโฟลเดอร์ Nuxt /public ของคุณ
- 3
กำหนดค่าและตรวจสอบ
เพิ่มรายการ app.head.link ใน nuxt.config.ts หากจำเป็น ปรับใช้ จากนั้นเรียกใช้ Favicon Checker บน URL ที่เผยแพร่อยู่ของคุณ
ลองเลย
Generate a Nuxt-ready favicon
เครื่องมือสร้าง Faviconคำถามที่พบบ่อย
ฉันจะเพิ่ม favicon ใน Nuxt 3 ได้อย่างไร+
วาง favicon.ico ใน /public จากนั้นเลือกเพิ่มแท็ก <link rel="icon"> ใน nuxt.config.ts ใต้ app.head.link หรือผ่าน useHead() ใน app.vue
favicon ไปที่ไหนในโปรเจ็กต์ Nuxt+
ไดเร็กทอรี /public ไฟล์ที่ให้บริการจากรูทโดเมนของคุณ — /public/favicon.ico มีให้บริการที่ /favicon.ico
เหตุใดไอคอน favicon ของฉัน Nuxt จึงไม่แสดง+
สาเหตุทั่วไป: ไฟล์ไม่อยู่ใน /public, พาธผิดใน app.head, แคชของเบราว์เซอร์จาก dev หรือตรวจสอบ localhost แทน URL ที่ปรับใช้ ทดสอบในหน้าต่างที่ไม่ระบุตัวตน
ฉันควรใช้ nuxt.config.ts หรือ useHead() สำหรับไอคอน Fav หรือไม่+
ไม่ว่าจะทำงาน. nuxt.config.ts เหมาะที่สุดสำหรับไอคอนคงที่ทั่วทั้งไซต์ useHead() ใน app.vue หากไอคอนขึ้นอยู่กับสถานะรันไทม์หรือตรรกะต่อเส้นทาง
ฉันสามารถใช้ favicon SVG ใน Nuxt ได้หรือไม่+
ใช่ — วาง favicon.svg ใน /public และเพิ่ม { rel: 'icon', พิมพ์: 'image/svg+xml', href: '/favicon.svg' } ไปที่ app.head.link