Favicon لـ React
React لا يُدير وسم <head> نيابةً عنك — ملف favicon يوضع في index.html. ضع favicon.ico في مجلد /public واربطه؛ الإعدادات الحديثة تضيف أيضًا نسخة SVG ونسخة PNG.
Vite وCRA كلاهما يُقدّمان محتوى /public من الجذر، لذا يكون /favicon.ico هو مسار الاكتشاف التلقائي. لا حاجة لأي إعداد في أداة التجميع (Bundler).
لدعم الشاشات عالية الكثافة وعرض تثبيت PWA، أضف apple-touch-icon بمقاس 180×180 وPNG بمقاس 512×512 إلى /public واربطهما في index.html.
كيف يعمل
- 1
أنشئ ملف .ico متعدد الأحجام
استخدم مولّد FetchFavicon مع مصدر بدقة 512×512.
- 2
ضعه في /public
انقل favicon.ico وfavicon.svg وapple-touch-icon.png إلى هذا المجلد.
- 3
اربطه في index.html
أضف <link rel="icon" href="/favicon.ico"> و<link rel="icon" type="image/svg+xml" href="/favicon.svg">.
جربه الآن
أنشئ favicon جاهزًا لـ React
مولد Faviconالأسئلة الشائعة
أين أضع ملف favicon في تطبيق Vite + React؟+
/public/favicon.ico (و/public/favicon.svg إن أردت نسخة متجهية).
كيف أضيف favicon يتكيّف مع الوضع الداكن؟+
استخدم ملف SVG واحد يحتوي على كتلة <style>@media (prefers-color-scheme: dark) {...}</style>.
لماذا لا يظهر الـ favicon أثناء التطوير؟+
جرّب التحديث القسري للتبويب. المتصفحات تُخزّن /favicon.ico مؤقتًا لكل نطاق حتى مع إعادة التحميل.