إعداد أيقونة الموقع في Next.js: إنشاء favicon.ico من SVG

قد يكفي ملف favicon.ico واحد في البداية، لكن إذا كنت تريد ظهورًا متسقًا في تبويبات المتصفح وشاشة iOS الرئيسية وتثبيتات PWA ونتائج بحث Google، فمن الأفضل تجهيز حزمة أيقونات كاملة.

في هذا الدليل ستسير بخطوات عملية واضحة: تحدد الأصول المطلوبة، وتولّدها من SVG، ثم تدمجها داخل Next.js بطريقة مناسبة للإنتاج.

ما هي ملفات الأيقونات التي تحتاجها فعلاً

يتضمن الإعداد الجيد كحد أدنى هذه الأصول:

favicon.ico (التوافق الاحتياطي)
icon.svg أو icon.png (المتصفحات الحديثة)
apple-icon.png (أيقونة شاشة iOS)
manifest (بيانات PWA)
icon-192.png (حجم manifest)
icon-512.png (حجم manifest)

سير عمل عملي: من SVG إلى مجموعة أيقونات

1. ابدأ بـ SVG يبقى قابلاً للقراءة عند الأحجام الصغيرة

غالبًا ما تُعرض أيقونات الموقع بأحجام مثل 16x16 و32x32، لذلك احرص على أن يكون المصدر واضحًا عند هذه المقاسات:

حافظ على الشكل الأساسي وأزل التفاصيل الصغيرة.
استخدم تبايناً عالياً.
تجنب الخطوط الرفيعة جداً.

معاينة سريعة في عارض SVG.

2. أنشئ `favicon.ico`

استخدم SVG إلى ICO لتحويل SVG إلى ICO متعدد الأحجام.

3. أنشئ Apple Icon وملفات PNG

استخدم SVG إلى PNG بـ:

apple-icon.png بـ 180×180 للشاشة الرئيسية في iOS
icon-192.png وicon-512.png لملف manifest

4. أنشئ manifest.json

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

5. أضف إلى Next.js

في app/layout.tsx:

<link rel="apple-touch-icon" href="/apple-icon.png" />
<link rel="icon" href="/favicon.ico" />
<link rel="manifest" href="/manifest.json" />

الملخص

هذا سير عمل بسيط ومتسق لإنشاء جميع أيقونات الموقع انطلاقًا من ملف SVG واحد، بينما يتولى Next.js بقية الدمج داخل التطبيق.

إعداد أيقونة الموقع في Next.js: إنشاء favicon.ico من SVG