Melhor Gerador de Favicon para React
Um app React puro (Vite ou Create React App) não tem convenção de ícones embutida. Você coloca os arquivos na pasta public e escreve as tags link no index.html você mesmo. O gerador certo te entrega os dois, então nada fica no chute.
O que realmente importa no React
O React em si não renderiza nada no head do documento para você. O ícone fica na pasta public e é declarado no index.html, então o gerador precisa produzir tanto os arquivos quanto as tags exatas para colar. Uma ferramenta que te dá imagens mas nenhuma marcação deixa de fora justamente a metade que quebra.
A falha comum é um único favicon.ico e nada mais, que cobre a aba do desktop mas deixa o iOS e o Android nos seus fallbacks. Um conjunto completo mais as tags correspondentes é o que faz o ícone aparecer em todo lugar onde deveria.
Os critérios que importam no React
| O que procurar | Por que importa no React | Como o gerador daqui faz isso |
|---|---|---|
| Arquivos mais tags | O React não declara nada no head para você | Exporta os arquivos da pasta public e as tags para colar no index.html |
| Conjunto completo de tamanhos | Um único ICO deixa o mobile nos fallbacks | favicon.ico, todos os PNGs, apple-touch e os tamanhos Android |
| Manifest incluído | Instalações PWA leem os ícones a partir do manifest | Entrega manifest.json conectado aos tamanhos exportados |
| Vite ou CRA | Ambos servem os assets de public da mesma forma | As orientações funcionam para Vite e Create React App do mesmo jeito |
O gerador vs um único favicon.ico
Um conjunto completo mais as tags
Start hererecomendado
- Todos os tamanhos, da aba de 16px ao ícone de instalação de 512
- As tags link e de manifest exatas para colar
- Ícone apple-touch, então as telas iniciais do iOS ficam cobertas
- manifest.json conectado para Android e instalações PWA
Só soltar um favicon.ico
- Cobre a aba do desktop e nada mais
- O iOS recorre a uma captura de tela na tela inicial
- Instalações no Android mostram um ícone genérico
- Sem manifest, então o prompt de PWA parece inacabado
Onde ficam os arquivos de favicon em um app React?
Na pasta public, referenciados por tags link no index.html. Nem o Vite nem o Create React App injetam a marcação de ícone para você, então o gerador precisa te dar os arquivos e as tags juntos. Arquivos em public são servidos a partir da raiz do site, então uma tag como /favicon.ico resolve diretamente.
The step-by-step for React
You've picked the tool. Here's the exact install for React.