أيقونة الموقع (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، إلخ. سيتم ترتيب الملفات المرقمة أبجديًا.

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

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

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

تتم إضافة sizes="any" إلى إخراج favicon.ico لتجنب خلل في المتصفح حيث يتم تفضيل أيقونة .ico على .svg.

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

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

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

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

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

import { ImageResponse } from 'next/server'

// تكوين مقطع المسار
export const runtime = 'edge'

// بيانات الصورة
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/server'

// تكوين مقطع المسار
export const runtime = 'edge'

// بيانات الصورة
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 بدلاً من ذلك.

الخصائص (Props)

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

`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' }`
`app/shop/[...slug]/icon.js`	`/shop/1/2`	`{ slug: ['1', '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 هما معالجات مسار متخصصة يمكنهما استخدام نفس خيارات تكوين مقطع المسار مثل الصفحات والتخطيطات.

الخيار	النوع	الافتراضي
`dynamic`	`'auto' \| 'force-dynamic' \| 'error' \| 'force-static'`	`'auto'`
`revalidate`	`false \| 'force-cache' \| 0 \| number`	`false`
`runtime`	`'nodejs' \| 'edge'`	`'nodejs'`
`preferredRegion`	`'auto' \| 'global' \| 'home' \| string \| string[]`	`'auto'`

export const runtime = 'edge'

export default function Icon() {}

export const runtime = 'edge'

export default function Icon() {}

تاريخ الإصدارات

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

أيقونة الموقع (favicon)، الأيقونة (icon)، وأيقونة آبل (apple-icon)

On this page