الرمز المفضل لـ Nuxt
يقدم Nuxt ملفات ثابتة من /public في جذر موقعك، لذا يصبح /publicX/favicon.ico /favicon.ico تلقائيًا. بالنسبة للأيقونات متعددة الأحجام أو SVG، قم بإضافة علامات الارتباط عبر nuxt.config.ts أو useHead() في app.vue.
إجابة سريعة
لإضافة favicon في Nuxt 3، ضع favicon.ico في /public، وأضف وسوم link في app.head داخل nuxt.config.ts عند الحاجة، ثم انشر وتحقق باستخدام فاحص Favicon — استخدم المولد لإنشاء ملفات الأيقونة.
تحقق من أيقونات أي موقع
ثبّت إضافة FetchFavicon لمتصفح Chrome لاستخراج الأيقونات ومعاينتها والتحقق منها فورًا.
أنشئ حزمة الأيقونات المفضلة لديك باستخدام Favicon Generator — قم بتصدير favicon.ico وfavicon.svg وapple-touch-icon.png من مصدر بحجم 512×512. قم بإسقاطها في مجلد /public الخاص بمشروعك Nuxt.
يقدم Nuxt 3 كل شيء في /public في جذر المجال دون أي تكوين إضافي. تطلب المتصفحات /favicon.ico بشكل افتراضي، لذا فإن وضع الملف هناك يغطي الحالة الأكثر شيوعًا.
للتحكم الصريح في كل متغير رمز، أضف علامات الارتباط في nuxt.config.ts ضمن app.head.link - أو اتصل بـ useHead({ link: [...] }) في app.vue. يقوم كلا الأسلوبين بإدخال العلامات في <head> بكل صفحة.
بعد النشر، افتح عنوان URL للإنتاج في نافذة خاصة وقم بتشغيل Favicon Checker لتأكيد /favicon.ico وسترجع مسارات <link rel="icon"> 200. تعد رموز التطوير المخزنة مؤقتًا سببًا شائعًا لعدم ظهور أيقونة Nuxt المفضلة بعد النشر.
إذا كان رمز علامة التبويب يعمل ولكن Google Search لا يزال يعرض رمزًا مفضلاً فارغًا، فتأكد من أن صفحتك الرئيسية المباشرة تربط رمزًا مربعًا بحجم 48 × 48 على الأقل. راجع دليل متطلبات Google المفضلة للتعرف على قواعد الزحف والحجم.
لا يقوم Nuxt بإنشاء ملفات .ico متعددة الحجم تلقائيًا - يجب عليك توفيرها. استخدم العناصر الاحتياطية PNG المرتبطة في app.head لمطالبات تثبيت PWA وعلامات التبويب ذات النقاط العالية لكل بوصة.
كيف يعمل
- 1
Generate favicon files
Use the Favicon Generator to export favicon.ico and PNG variants from a 512×512 logo.
- 2
أضف إلى /public
انسخ favicon.ico (و favicon.svg، apple-touch-icon.png الاختياري) إلى المجلد Nuxt /public.
- 3
التكوين والتحقق
قم بإضافة إدخالات app.head.link في nuxt.config.ts إذا لزم الأمر، وقم بالنشر، ثم قم بتشغيل Favicon Checker على عنوان URL المباشر الخاص بك.
جربه الآن
Generate a Nuxt-ready favicon
مولد Faviconالأسئلة الشائعة
كيف أقوم بإضافة رمز مفضل في Nuxt 3؟+
ضع favicon.ico في /public، ثم أضف علامات <link rel="icon"> اختياريًا في nuxt.config.ts ضمن app.head.link أو عبر useHead() في app.vue.
أين يذهب الرمز المفضل في مشروع Nuxt؟+
الدليل /public. يتم تقديم الملفات هناك من جذر النطاق الخاص بك — /public/favicon.ico متاح على /favicon.ico.
لماذا لا يظهر رمز Nuxt المفضل لدي؟+
الأسباب الشائعة: الملف ليس في /public، أو المسار الخاطئ في app.head، أو ذاكرة التخزين المؤقت للمتصفح من المطور، أو التحقق من المضيف المحلي بدلاً من عنوان URL الذي تم نشره. اختبار في نافذة التصفح المتخفي.
هل يجب أن أستخدم nuxt.config.ts أو useHead() للأيقونات المفضلة؟+
إما يعمل. nuxt.config.ts هو الأفضل للأيقونات الثابتة على مستوى الموقع؛ useHead() في app.vue إذا كانت الرموز تعتمد على حالة وقت التشغيل أو منطق كل مسار.
هل يمكنني استخدام الأيقونة المفضلة SVG في Nuxt؟+
نعم — ضع favicon.svg في /public وأضف { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' } إلى app.head.link.