أيقونات favicon و icon و apple-icon

تتيح لك اتفاقيات ملفات favicon أو icon أو apple-icon تعيين أيقونات لتطبيقك.

هذه الأيقونات مفيدة لإضافة أيقونات التطبيق التي تظهر في أماكن مثل علامات تبويب متصفح الويب، وشاشات الهواتف الرئيسية، ونتائج محركات البحث.

هناك طريقتان لتعيين أيقونات التطبيق:

باستخدام ملفات الصور (.ico, .jpg, .png)
باستخدام الكود لإنشاء أيقونة (.js, .ts, .tsx)

ملفات الصور (.ico, .jpg, .png)

استخدم ملف صورة لتعيين أيقونة التطبيق عن طريق وضع ملف صورة favicon أو icon أو apple-icon داخل دليل /app الخاص بك. يمكن أن يكون ملف صورة favicon موجودًا فقط في المستوى الأعلى من app/.

سيقوم Next.js بتقييم الملف وإضافة الوسوم المناسبة تلقائيًا إلى عنصر <head> لتطبيقك.

اتفاقية الملف	أنواع الملفات المدعومة	المواقع الصالحة
`favicon`	`.ico`	`app/`
`icon`	`.ico`, `.jpg`, `.jpeg`, `.png`, `.svg`	`app/*/`
`apple-icon`	`.jpg`, `.jpeg`, `.png`	`app/*/`

`favicon`

أضف ملف صورة favicon.ico إلى مقطع المسار الجذري /app.

<head> output

<link rel="icon" href="/favicon.ico" sizes="any" />

`icon`

أضف ملف صورة icon.(ico|jpg|jpeg|png|svg).

<head> output

<link
  rel="icon"
  href="/icon?<generated>"
  type="image/<generated>"
  sizes="<generated>"
/>

`apple-icon`

أضف ملف صورة apple-icon.(jpg|jpeg|png).

<head> output

<link
  rel="apple-touch-icon"
  href="/apple-icon?<generated>"
  type="image/<generated>"
  sizes="<generated>"
/>

معلومة مفيدة:

يمكنك تعيين عدة أيقونات عن طريق إضافة لاحقة رقمية لاسم الملف. على سبيل المثال، icon1.png، icon2.png، إلخ. سيتم ترتيب الملفات المرقمة أبجديًا.

يمكن تعيين أيقونات favicon فقط في مقطع /app الجذري. إذا كنت بحاجة إلى مزيد من التفصيل، يمكنك استخدام icon.

يتم تحديد وسوم <link> والسمات المناسبة مثل rel و href و type و sizes بناءً على نوع الأيقونة وبيانات الملف الذي تم تقييمه.

على سبيل المثال، سيحتوي ملف .png بحجم 32 × 32 بكسل على سمات type="image/png" و sizes="32x32".

يتم إضافة sizes="any" إلى الأيقونات عندما يكون الامتداد .svg أو عندما لا يمكن تحديد حجم الصورة للملف. المزيد من التفاصيل في دليل favicon هذا.

إنشاء أيقونات باستخدام الكود (.js, .ts, .tsx)

بالإضافة إلى استخدام ملفات الصور المباشرة، يمكنك إنشاء أيقونات برمجيًا باستخدام الكود.

قم بإنشاء أيقونة تطبيق عن طريق إنشاء مسار icon أو apple-icon يقوم بتصدير دالة افتراضية.

اتفاقية الملف	أنواع الملفات المدعومة
`icon`	`.js`, `.ts`, `.tsx`
`apple-icon`	`.js`, `.ts`, `.tsx`

أسهل طريقة لإنشاء أيقونة هي استخدام واجهة برمجة التطبيقات ImageResponse من next/og.

import { ImageResponse } from 'next/og'

// بيانات الصورة
export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'

// إنشاء الصورة
export default function Icon() {
  return new ImageResponse(
    (
      // عنصر JSX لـ ImageResponse
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        A
      </div>
    ),
    // خيارات ImageResponse
    {
      // للراحة، يمكننا إعادة استخدام بيانات حجم الأيقونة المصدرة
      // للإعداد لتحديد عرض وارتفاع ImageResponse أيضًا.
      ...size,
    }
  )
}

import { ImageResponse } from 'next/og'

// بيانات الصورة
export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'

// إنشاء الصورة
export default function Icon() {
  return new ImageResponse(
    (
      // عنصر JSX لـ ImageResponse
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        A
      </div>
    ),
    // خيارات ImageResponse
    {
      // للراحة، يمكننا إعادة استخدام بيانات حجم الأيقونة المصدرة
      // للإعداد لتحديد عرض وارتفاع ImageResponse أيضًا.
      ...size,
    }
  )
}

<head> output

<link rel="icon" href="/icon?<generated>" type="image/png" sizes="32x32" />

معلومة مفيدة:

بشكل افتراضي، يتم تحسين الأيقونات المولدة بشكل ثابت (يتم إنشاؤها وقت البناء وتخزينها مؤقتًا) ما لم تستخدم واجهات برمجة التطبيقات الديناميكية أو بيانات غير مخزنة مؤقتًا.

يمكنك إنشاء عدة أيقونات في نفس الملف باستخدام generateImageMetadata.

لا يمكنك إنشاء أيقونة favicon. استخدم icon أو ملف favicon.ico بدلاً من ذلك.

أيقونات التطبيق هي معالجات مسار خاصة يتم تخزينها مؤقتًا بشكل افتراضي ما لم تستخدم واجهة برمجة التطبيقات الديناميكية أو خيار التكوين الديناميكي.

الخصائص

تستقبل الدالة الافتراضية التصدير الخصائص التالية:

`params` (اختياري)

كائن يحتوي على كائن معلمات المسار الديناميكي من المقطع الجذري وصولاً إلى المقطع الذي يوجد فيه icon أو apple-icon.

export default function Icon({ params }: { params: { slug: string } }) {
  // ...
}

export default function Icon({ params }) {
  // ...
}

المسار	URL	`params`
`app/shop/icon.js`	`/shop`	`undefined`
`app/shop/[slug]/icon.js`	`/shop/1`	`{ slug: '1' }`
`app/shop/[tag]/[item]/icon.js`	`/shop/1/2`	`{ tag: '1', item: '2' }`

القيم المُرجعة

معلومة مفيدة: ImageResponse تفي بهذا النوع من القيم المُرجعة.

تصديرات التكوين

يمكنك تكوين بيانات وصفية للأيقونة اختياريًا عن طريق تصدير المتغيرات size و contentType من مسار icon أو apple-icon.

الخيار	النوع
`size`	`{ width: number; height: number }`
`contentType`	`string` - نوع MIME للصورة

`size`

export const size = { width: 32, height: 32 }

export default function Icon() {}

export const size = { width: 32, height: 32 }

export default function Icon() {}

<head> output

<link rel="icon" sizes="32x32" />

`contentType`

export const contentType = 'image/png'

export default function Icon() {}

export const contentType = 'image/png'

export default function Icon() {}

<head> output

<link rel="icon" type="image/png" />

تكوين مقطع المسار

icon و apple-icon هي معالجات مسار متخصصة يمكنها استخدام نفس خيارات تكوين مقطع المسار مثل الصفحات والتخطيطات.

سجل الإصدارات

الإصدار	التغييرات
`v13.3.0`	تم تقديم `favicon` و `icon` و `apple-icon`

أيقونات favicon و icon و apple-icon

On this page