Лучший генератор favicon для React
У обычного приложения на React (Vite или Create React App) нет встроенного соглашения об иконках. Вы кладёте файлы в папку public и сами пишете теги link в index.html. Правильный генератор выдаёт и то и другое, поэтому ничего не остаётся на догадки.
Что действительно важно в React
Сам React не отрисовывает ничего в head документа за вас. Иконка лежит в папке public и объявляется в index.html, поэтому генератор должен создать и файлы, и точные теги для вставки. Инструмент, который отдаёт изображения, но не разметку, оставляет ту половину, что как раз и ломается.
Типичный сбой — единственный favicon.ico и ничего больше, который покрывает вкладку на десктопе, но оставляет iOS и Android на их запасных вариантах. Полный набор плюс соответствующие теги — вот что заставляет иконку появляться везде, где должно.
Критерии, которые важны в React
| На что смотреть | Почему это важно в React | Как это делает генератор здесь |
|---|---|---|
| Файлы плюс теги | React ничего не объявляет в head за вас | Экспортирует файлы для папки public и теги для вставки в index.html |
| Полный набор размеров | Один ICO оставляет мобильные на запасных вариантах | favicon.ico, все PNG, apple-touch и размеры Android |
| Манифест включён | Установка PWA берёт иконки из манифеста | Поставляет manifest.json, связанный с экспортированными размерами |
| Vite или CRA | Оба отдают ассеты из public одинаково | Инструкция работает и для Vite, и для Create React App |
Генератор против единственного favicon.ico
Полный набор плюс теги
Start hereрекомендуется
- Каждый размер, от вкладки 16px до иконки установки 512
- Точные теги link и манифеста для вставки
- apple-touch, поэтому домашние экраны iOS покрыты
- manifest.json настроен для Android и установки PWA
Просто положить favicon.ico
- Покрывает вкладку на десктопе и ничего больше
- iOS откатывается на скриншот на домашнем экране
- Установка на Android показывает обезличенную иконку
- Нет манифеста, поэтому приглашение к установке PWA выглядит недоделанным
Куда кладут файлы favicon в приложении на React?
В папку public, откуда на них ссылаются теги link в index.html. Ни Vite, ни Create React App не вставляют разметку иконок за вас, поэтому генератор должен дать файлы и теги вместе. Файлы в public отдаются из корня сайта, поэтому тег вроде /favicon.ico разрешается напрямую.
The step-by-step for React
You've picked the tool. Here's the exact install for React.