Favicon para React
O React não renderiza o <head> por você — o favicon fica em index.html. Coloque seu favicon.ico em /public e referencie-o; setups modernos também incluem uma variante SVG e PNG.
Tanto o Vite quanto o CRA servem /public na raiz, então /favicon.ico é o caminho de descoberta padrão. Nenhuma configuração de bundler é necessária.
Para telas de alta densidade e prompts de instalação PWA, adicione um apple-touch-icon de 180×180 e um PNG de 512×512 em /public e vincule-os no index.html.
Como funciona
- 1
Gere um .ico multirresolução
Use nosso gerador de favicon a partir de uma imagem de 512×512.
- 2
Coloque em /public
Salve favicon.ico, favicon.svg e apple-touch-icon.png nesse diretório.
- 3
Vincule no index.html
Adicione <link rel="icon" href="/favicon.ico"> e <link rel="icon" type="image/svg+xml" href="/favicon.svg">.
Experimente agora
Crie um favicon pronto para React
Gerador de FaviconPerguntas frequentes
Onde fica o favicon em um app React com Vite?+
/public/favicon.ico (e /public/favicon.svg se quiser uma variante vetorial).
Como adiciono um favicon com modo escuro?+
Use um único SVG com um bloco <style>@media (prefers-color-scheme: dark) {...}</style>.
Por que meu favicon não aparece em dev?+
Recarregue forçando (Ctrl+F5). O navegador faz cache de /favicon.ico por origem, mesmo entre reloads.
Ferramentas relacionadas
Gerador de Favicon
Gere um pacote completo de favicon (ICO + PNGs) para cada dispositivo e navegador.
Conversor de PNG para ICO
Conversor online gratuito de PNG para ICO para ícones do Windows, aplicativos e favicons de sites.
Conversor de SVG para PNG
Rasterize gráficos vetoriais SVG para PNG em qualquer resolução.