Favicon لـ Next.js
في Next.js 14+ مع App Router، يُعامَل /app/icon.png و/app/favicon.ico كاصطلاحات مدمجة — ضعهما في المجلد وسيُصدر Next الوسوم الصحيحة تلقائيًا.
ضع favicon.ico داخل /app وسيُقدّمه Next على المسار /favicon.ico ويُدرج وسم الربط دون أي إعداد إضافي.
للأيقونات متعددة الأحجام أو المتكيّفة مع السمات، استخدم اصطلاحات الملفات: icon.png، icon.svg، apple-icon.png داخل /app. يولّد Next وسوم <link> من البيانات الوصفية للملف.
كيف يعمل
- 1
أنشئ favicon.ico
متعدد الأحجام (16/32/48/64) من مصدر بدقة 512×512.
- 2
ضعه في /app
/app/favicon.ico يُقدَّم تلقائيًا. أضف icon.png للعرض عالي الدقة.
- 3
تحقّق من النتيجة
افتح /favicon.ico في المتصفح — Next يعرضه دون أي إعداد.
جربه الآن
أنشئ favicon جاهزًا لـ Next.js
مولد Faviconالأسئلة الشائعة
أين توضع الأيقونات في Next.js App Router؟+
داخل مجلد /app. اسم الملف (icon، apple-icon، favicon) يُحدّد وظيفته.
ماذا عن Pages Router؟+
ضع favicon.ico في /public واربطه من _document.tsx.
هل لا يزال ملف .ico متعدد الأحجام ضروريًا؟+
يُنصح به لدعم المتصفحات القديمة، خاصة اختصارات Edge ووضع IE.