الرمز المفضل لـ Vue.js
تقوم تطبيقات Vue بشحن الأصول الثابتة من /public (Vite) أو /public (Vue CLI). ضع favicon.ico هناك وقم بالإشارة إليه في index.html - يخدمه خادم التطوير وبناء الإنتاج في جذر الموقع.
فيت: ضع favicon.ico في /public/favicon.ico. أضف <link rel="icon" href="/favicon.ico"> في index.html داخل <head>.
بالنسبة للإصدارات المجزأة، لا يحصل /favicon.ico على مستوى الجذر على تجزئة المحتوى - وهو مثالي لطلبات المتصفح الثابتة.
يستخدم Vue CLI نفس الاتفاقية العامة/. استبدل public/favicon.ico الافتراضي بملفك متعدد الأحجام.
أضف PNG وروابط apple-touch-icon للجوال. احتفظ بالمسارات مطلقة (/apple-touch-icon.png) حتى لا يؤدي وضع سجل جهاز التوجيه vue إلى قطع المسارات المتداخلة.
عند النشر إلى Netlify أو Vercel، تأكد من تضمين ملفات الأيقونة المفضلة في مخرجات التوزيع - يتم نسخها من الجمهور/ تلقائيًا.
بالنسبة إلى vite-plugin-pwa، قم بتعريف الرموز في قسم البيان لإدخالات vite.config.ts — 192×192 و512×512 PNG.
كيف يعمل
- 1
نسخ الرموز للعامة/
favicon.ico، apple-touch-icon.png، اختياري favicon.svg.
- 2
تحرير index.html
قم بإضافة علامات <link rel="icon"> وعلامات apple-touch-icon.
- 3
بناء ونشر
تأكيد إرجاع /favicon.ico 200 عند الإنتاج.
جربه الآن
قم بإنشاء أصول Vue المفضلة
مولد Faviconالأسئلة الشائعة
لماذا يعرض خادم التطوير Vue شعار Vite؟+
استبدل public/favicon.ico وأعد تشغيل خادم التطوير.
أين تذهب أيقونات SVG المفضلة في Vue؟+
public/favicon.svg plus <link rel="icon" type="image/svg+xml" href="/favicon.svg"> في index.html.
هل يؤثر جهاز vue-router على مسارات الأيقونة المفضلة؟+
فقط إذا كنت تستخدم hrefs النسبية — استخدم دائمًا المسارات النسبية/الجذرية.