أيقونة الموقع (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/og.

import { ImageResponse } from 'next/og'

// تكوين مقطع المسار
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/og'

// تكوين مقطع المسار
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 }) {
  // ...
}

المسار	الرابط	`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 هما معالجان متخصصان للمسارات (Route Handlers) يمكنهما استخدام نفس خيارات تكوين مقطع المسار مثل الصفحات والتخطيطات.

الخيار	النوع	الافتراضي
`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