Favicon עבור React
React אינו מעבד עבורך את ה-<head> - ה-favicon נמצא ב-index.html. שחרר את ה-favicon.ico שלך אל /public וקשר אותו; הגדרות מודרניות מספקות גם גרסת SVG ו-PNG.
Vite ו-CRA משרתים שניהם /public בבסיס, כך ש-/favicon.ico הוא נתיב הגילוי המוגדר כברירת מחדל. אין צורך בתצורת חבילה.
עבור צגי DPI גבוה והנחיות התקנה של PWA, הוסף 180×180 apple-touch-icon ו-512×512 PNG ל-/public וקשר אותם ב-index.html.
איך זה עובד
- 1
צור .ico בגדלים רבים
השתמש במחולל favicon שלנו עם מקור 512×512.
- 2
היכנס אל /ציבורי
מקם שם 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">.
נסה עכשיו
בנו סמל React מוכן
מחולל פביקוןשאלות נפוצות
לאן עובר ה-favicon באפליקציית Vite React?+
/public/favicon.ico (ו-/public/favicon.svg אם אתה רוצה וריאנט וקטור).
כיצד אוכל להוסיף סמל מצב כהה?+
השתמש ב-SVG יחיד עם בלוק <style>@media (prefers-color-scheme: כהה) {...}</style>.
למה ה-favicon שלי לא ייטען ב-dev?+
רענן קשה את הכרטיסייה. דפדפנים מאחסנים /favicon.ico למקור אפילו על פני טעינות מחדש.