Favicon لـ React
React لا يُدير وسم <head> نيابةً عنك — ملف favicon يوضع في index.html. ضع favicon.ico في مجلد /public واربطه؛ الإعدادات الحديثة تضيف أيضًا نسخة SVG ونسخة PNG.
تحقق من أيقونات أي موقع
ثبّت إضافة FetchFavicon لمتصفح Chrome لاستخراج الأيقونات ومعاينتها والتحقق منها فورًا.
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 مؤقتًا لكل نطاق حتى مع إعادة التحميل.