Фавикон для React

Как в приложении Vite, так и в приложении Create React (CRA) статические файлы, помещенные в каталог /public, обслуживаются непосредственно из корневого URL-адреса без какой-либо обработки упаковщиком. Это означает, что /public/favicon.ico доступен по адресу https://yourdomain.com/favicon.ico, а это именно тот путь, который браузеры сначала пробуют для значка. Для базовой настройки .ico не требуется загрузчик веб-пакетов, плагин Vite или конфигурация сборки.

Когда вы создаете новый проект Vite React с помощью `npm create vite@latest`, каркас уже помещает favicon.svg в /public и ссылается на него в index.html. Это хорошая отправная точка, но SVG по умолчанию — это обычный значок Vite. Замените его своим SVG и добавьте резервный файл .ico с несколькими размерами для браузеров, которые не поддерживают значки SVG.

Создание шаблонов приложений React по умолчанию включает favicon.ico в /public. Чтобы заменить его, просто перезапишите файл своим собственным многоразмерным .ico. CRA также включает файл Manifest.json в /public — обновите записи массива `icons`, чтобы они указывали на ваши собственные файлы PNG (192×192 и 512×512). index.html в /public уже содержит тег ссылки манифеста, вставленный CRA.

Файл .ico разного размера по-прежнему остается самым важным файлом. Браузеры, которые не поддерживают значки SVG (более старые версии Safari, некоторые инструменты для встраивания и создание ярлыков Windows), автоматически возвращаются к /favicon.ico. Один файл .ico объединяет кадры размером 16×16, 32×32, 48×48 и 64×64, поэтому браузер выбирает правильное разрешение без каких-либо дополнительных тегов ссылок.

Для дисплеев с высоким разрешением (Retina) добавьте явный тег ссылки PNG в дополнение к .ico. <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'> сообщает браузеру использовать PNG на экранах Retina, где значок 2x отображается более четко, чем кадр .ico с тем же разрешением. Поместите .ico и PNG в /public.

Значки SVG предлагают лучшее перспективное решение для приложений React. Один файл SVG четко отображается при любом размере вкладок и может адаптировать свои цвета к цветовой схеме пользователя. Добавьте `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` в index.html. Браузеры, поддерживающие значки SVG, предпочитают его .ico; браузеры, которые не просто переходят к следующему тегу ссылки.

Значки SVG в темном режиме очень эффективны в приложениях React, поскольку целевая аудитория часто использует инструменты разработчика и рабочие столы в темном режиме. Вставьте блок `<style>` в SVG с помощью `@media (prefers-color-scheme: dark) { :root { fill: white; } }` (с учетом структуры вашего значка). Этот единственный файл поддерживает как светлые, так и темные темы без JavaScript или дополнительных тегов.

apple-touch-icon требуется, если кто-либо из мобильных пользователей сохранит ваше приложение React на своем главном экране. Поместите apple-touch-icon.png (180×180) в /public и добавьте `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>` к index.html. Без этого iOS отображает снимок экрана приложения с низким разрешением вместо значка вашего бренда на главном экране.

Для приложений React, развернутых как PWA, ваш /public/manifest.json (или site.webmanifest) должен включать записи значков размером 192×192 и 512×512. Эти размеры управляют приглашением установки Android на главном экране и диалоговым окном установки Chrome PWA. favicon generator выводит как PNG, так и предварительно заполненный шаблон манифеста, который вы можете поместить непосредственно в /public.

Маршрутизация имеет значение для значков в развертываниях SPA React. Путь /favicon.ico должен обслуживаться непосредственно вашим хостом, а не перехватываться маршрутизатором React. Страницы Vercel, Netlify и GitHub обслуживают содержимое /public в корне перед передачей в SPA. Если вы размещаете сервер на собственном сервере, убедитесь, что промежуточное программное обеспечение для статических файлов запускается перед универсальным маршрутом, который обслуживает index.html.

Во время разработки с `npm run dev` Vite автоматически выполняет горячую перезагрузку большинства изменений, но изменения значков иногда требуют жесткого обновления браузера вручную. Браузеры кэшируют /favicon.ico для каждого источника даже при перезагрузке сервера разработки. Чтобы принудительно обновить во время разработки, либо выполните принудительное обновление (Ctrl+Shift+R), либо временно добавьте строку запроса типа `/favicon.svg?v=2` в тег ссылки.

В настройках рендеринга на стороне сервера (например, React с пользовательским сервером Express) необходимо убедиться, что промежуточное программное обеспечение express.static() обслуживает /public перед обработчиком SSR React. Если обработчик SSR сначала перехватывает все запросы, /favicon.ico будет обработан React и вернет HTML, а не двоичный файл ICO, что полностью нарушит работу значка.

При настройке монорепо с несколькими приложениями React требуется тщательное управление значками. Папка /public каждого приложения имеет собственный значок. Если вы используете значки в разных приложениях, рассмотрите возможность сохранения единого каталога значков с источником достоверности в корне монорепозитория и копирования файлов в каждый /public на этапе сборки. Такие инструменты, как `cp` в сценарии сборки или специальный плагин синхронизации ресурсов, обеспечивают их синхронизацию.

После развертывания используйте favicon tester, чтобы убедиться, что все варианты значков общедоступны. Введите рабочий URL-адрес и убедитесь, что favicon.ico, favicon.svg, apple-touch-icon.png и PNG вашего манифеста разрешаются правильно. Это исключает неправильно настроенную службу статических файлов или пути, которые работают в разработке, но не работают в рабочей среде.