Favicon עבור 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 ומחדיר את תג הקישור לכל דף שחולק את הפריסה הזו. קובץ האייקונים חייב להיות באותה רמה כמו ה-root layout.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='...'>`. זוהי הגישה הנקייה ביותר - אין צורך לייצא מטא נתונים ידני.
אם אתה מעדיף להכריז על favicons בקוד ולא באמצעות מוסכמות קבצים, ייצא אובייקט מטא נתונים מ-layout.tsx. המאפיין icons מקבל אובייקט עם קיצור דרך, אייקון, תפוח ושדות אחרים. דוגמה: `export const metadata: Metadata = { icons: { icon: '/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>` זה הוא הכותרת ברמת המסמך, לא הייבוא הבא/ראש לכל עמוד.
הרכיב הבא/ראש (יבא Head מ-'next/head') פועל לעקיפות סמלים לכל עמוד ב-Pages Router. אם אתה רוצה סמל אחר בדף מסוים, כלול '<link rel='icon'>' בתוך `<Head>` ברכיב הדף הזה. התג לכל עמוד עוקף את התג ברמת המסמך. זה שימושי עבור אתרים מרובי מותגים המוגשים מפריסה אחת של Next.js.
SVG favicons נתמכים באופן מלא על ידי מוסכמות 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 - שינוי הקובץ משנה את ה-hash ומאלץ את הדפדפנים לבצע אחזור מחדש.
מניפסט האינטרנט ב-Next.js App Router מוגדר באמצעות הקובץ manifest.ts ב-/app. ייצא פונקציית ברירת מחדל המחזירה אובייקט MetadataRoute.Manifest הכולל את גדלי הסמלים שלך. Next.js מעבד אותו בתור application/manifest+json ב-/manifest.webmanifest. יש למקם את ה-192×192 ו-512×512 PNG המוזכרים במניפסט ב-/public.
Turbopack (הצרור הניסיוני ב-Next.js 14+) מטפל בנכסים סטטיים ב-/public באופן זהה ל-webpack. קובצי Favicon ב-/public מוגשים ללא חבילה. עבור קבצים ב-/app (מוסכמות הסמלים), Turbopack מעבד אותם כנכסי מטא נתונים - אין צורך בשינוי תצורה בעת מעבר בין Turbopack ל-webpack.
Next.js ISR (Regeneration Static Incremental Static Regeneration) ופריסות קצה אינן משפיעות על הגשת Favicon. קבצי Favicon הם נכסים סטטיים המוגשים מקצה CDN, לא ממטמון ISR. המשמעות היא שעדכוני favicon מתפשטים מיד לאחר הפריסה מבלי להמתין לאימות מחדש של העמוד.
אפליקציות Next.js מרובות מקומות זקוקות לרוב לסמלים מודעים למיקום. השתמש בפונקציה generMetadata ב-layout.tsx כדי להחזיר נתיבי סמלים ספציפיים לאזור המבוססים על אובייקט params. זוהי תכונה של App Router בלבד - אתרי Pages Router זקוקים להיגיון _document.tsx מותאם אישית או שרת מותאם אישית כדי להשיג פייקונומים לפי אזור.
לאחר הפריסה, אמת את הסמלים של Next.js שלך באמצעות favicon tester. בדוק ש-/favicon.ico, /icon.svg ו-/apple-touch-icon.png מחזירות כולן 200 תגובות עם הכותרות הנכונות מסוג תוכן. בדוק גם את '<head>' HTML של האתר שנפרס כדי לוודא ש-Next.js פלט את כל תגי הקישור הצפויים.
איך זה עובד
- 1
צור את חבילת ה-favicon שלך
העלה 512×512 XXH16XX או SVG ל-[favicon generator](tool:favicon-generator). הורד את favicon.ico, icon.svg, apple-touch-icon.png (180×180) ואת המניפסט PNGs.
- 2
מקם XXH0XX ב-/app (App Router)
העתק את favicon.ico לספריית /app של הפרויקט שלך לצד layout.tsx. Next.js משרת אותו באופן אוטומטי ומחדיר את תג הקישור. עבור Pages Router, מקם אותו ב-/public במקום זאת.
- 3
הוסף את icon.svg לעיבוד חד
שנה את שם ה-SVG שלך ל-ikon.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 סמלים. מקם את ה-XXH14XXs ב-XXH9XX. עבור Pages Router, מקם את site.webmanifest ב-/public והוסף את תג קישור המניפסט ב-_document.tsx.
- 6
ודא בהפקה
לאחר הפריסה, הצג את המקור בכתובת האתר החיה שלך ואשר שכל תגי הקישור קיימים. השתמש ב-[favicon tester](utility:favicon-tester) כדי לבדוק שכל כתובת אתר של סמל מחזירה 200 עם סוג התוכן הנכון.
נסה עכשיו
צור Favicon מוכן ל-Next.js
מחולל פביקוןשאלות נפוצות
לאן הולכים הפייביקונים ב-Next.js App Router?+
בתוך ספריית /app. קבצים בשם favicon.ico, icon.png, icon.svg ו-apple-icon.png מזוהים ומקושרים אוטומטית. סמל גלובלי נכנס ל-/app; פריסה ספציפית נכנסת לתת ספריית הפריסה המתאימה.
לאן הולכים הפייביקונים ב-Next.js Pages Router?+
בספרייה /public. הוסף את תג הקישור בדפים/_document.tsx בתוך רכיב `<Head>`. Next.js מגיש /public קבצים בכתובת השורש - /public/favicon.ico נגיש בכתובת https://yourdomain.com/favicon.ico.
האם עלי לערוך את layout.tsx כדי להוסיף סמל favicon ב-App Router?+
לא, אם אתה משתמש במוסכמות הקבצים (favicon.ico ב-/app). אם אתה מעדיף קוד, ייצא אובייקט מטא נתונים עם מאפיין סמלים. שתי הגישות מייצרות תגיות `<link>` זהות ב-HTML המעובד.
האם Next.js תומך ב-SVG favicons?+
כֵּן. מקם את 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.
האם Next.js מבטל קבצי קבצים באופן אוטומטי?+
עבור קבצים ב-/app, כן - Next.js מוסיף hash של תוכן לשם הקובץ המוגש, כך שכל שינוי קובץ מפעיל אחזור חדש. עבור קבצים ב-/public, אין פריצת מטמון אוטומטית; הוסף מחרוזת שאילתה באופן ידני במידת הצורך.
האם אוכל להשתמש ב-favicon שונה לכל עמוד ב-Next.js?+
כֵּן. ב-App Router, ייצא פונקציית generMetadata ב-page.tsx של המסלול הספציפי עם ערך אייקונים מותאמים אישית. ב-Pages Router, הוסף '<link rel='icon'>' בתוך רכיב `<Head>` לכל עמוד - הוא עוקף את ברירת המחדל ברמת המסמך.