Favikona dla React
React nie renderuje za Ciebie <head> — ikona ulubionych znajduje się w pliku Index.html. Wrzuć swój favicon.ico do /public i połącz go; nowoczesne konfiguracje są również dostarczane w wariantach SVG i PNG.
Zarówno Vite, jak i CRA obsługują katalog /public w katalogu głównym, więc /favicon.ico jest domyślną ścieżką wykrywania. Nie jest wymagana konfiguracja pakietu.
W przypadku wyświetlaczy o wysokiej rozdzielczości i monitów o instalację PWA dodaj 180×180 apple-touch-icon i 512×512 PNG do /public i połącz je w pliku Index.html.
Jak to działa
- 1
Wygeneruj plik .ico o wielu rozmiarach
Skorzystaj z naszego generatora favicon ze źródłem 512×512.
- 2
Wpadnij do /public
Umieść tam favicon.ico, favicon.svg i apple-touch-icon.png.
- 3
Link w pliku Index.html
Dodaj <link rel="icon" href="/favicon.ico"> i <link rel="icon" type="image/svg+xml" href="/favicon.svg">.
Wypróbuj teraz
Utwórz favikonę gotową do React
Generator FaviconFAQ
Gdzie znajduje się favikona w aplikacji Vite React?+
/public/favicon.ico (i /public/favicon.svg, jeśli chcesz wariant wektorowy).
Jak dodać favikonę trybu ciemnego?+
Użyj pojedynczego SVG z blokiem <style>@media (prefers-color-scheme: dark) {...</style>.
Dlaczego moja favikona nie ładuje się na platformie deweloperskiej?+
Twarde odświeżenie karty. Przeglądarki buforują /favicon.ico według źródła, nawet przy ponownym ładowaniu.
Powiązane narzędzia
Generator Favicon
Generuj kompletny pakiet favicon (ICO + PNG) dla każdego urządzenia i przeglądarki.
Konwerter PNG na ICO
Darmowy konwerter PNG na ICO online dla ikon Windows, aplikacji i favicon stron internetowych.
Konwerter SVG na PNG
Rasteryzuj grafikę wektorową SVG do formatu PNG w dowolnej rozdzielczości.