Фавикон для React
React не отображает <head> за вас — значок находится в index.html. Поместите свой favicon.ico в /public и свяжите его; современные установки также поставляются в вариантах SVG и PNG.
Vite и CRA обслуживают /public в корне, поэтому /favicon.ico — это путь обнаружения по умолчанию. Конфигурация упаковщика не требуется.
Для дисплеев с высоким разрешением и приглашений на установку PWA добавьте apple-touch-icon 180×180 и PNG 512×512 в /public и свяжите их в index.html.
Как это работает
- 1
Создать многоразмерный .ico
Используйте наш генератор фавиконов с исходным кодом 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">.
Попробовать сейчас
Создайте готовый к React значок.
Генератор фавиконовЧастые вопросы
Где находится значок в приложении Vite React?+
/public/favicon.ico (и /public/favicon.svg, если вам нужен векторный вариант).
Как добавить значок темного режима?+
Используйте один SVG с блоком <style>@media (prefers-color-scheme: dark) {...</style>.
Почему мой значок не загружается в dev?+
Принудительно обновите вкладку. Браузеры кэшируют /favicon.ico для каждого источника даже при перезагрузках.