Favicon para React

Tanto no Vite quanto no Create React App (CRA), os arquivos estáticos colocados no diretório /public são servidos diretamente do URL raiz sem qualquer processamento do bundler. Isso significa que /public/favicon.ico está acessível em https://seudominio.com/favicon.ico, que é exatamente o caminho que os navegadores tentam primeiro para um favicon. Nenhum carregador de webpack, plug-in Vite ou configuração de compilação é necessário para a configuração básica do .ico.

Quando você cria um novo projeto Vite React com `npm create vite@latest`, o scaffold já coloca um favicon.svg em /public e faz referência a ele em index.html. Este é um bom ponto de partida, mas o SVG padrão é um ícone genérico do Vite. Substitua-o pelo seu próprio SVG e adicione um substituto .ico de vários tamanhos para navegadores que não suportam favicons SVG.

Criar scaffolds de aplicativos React incluem favicon.ico em /public por padrão. Para substituí-lo, basta substituir o arquivo pelo seu próprio .ico de vários tamanhos. CRA também inclui manifest.json em /public — atualize as entradas da matriz `icons` para apontar para seus próprios arquivos PNG (192×192 e 512×512). O index.html em /public já possui a tag do link do manifesto inserida pelo CRA.

O .ico de vários tamanhos ainda é o arquivo mais importante. Navegadores que não suportam favicons SVG – versões mais antigas do Safari, algumas ferramentas de incorporação e criação de atalhos Windows – voltam para /favicon.ico automaticamente. Um único arquivo .ico agrupa quadros de 16x16, 32x32, 48x48 e 64x64 para que o navegador escolha a resolução correta sem tags de link extras.

Para telas de alto DPI (Retina), adicione uma tag de link PNG explícita além do .ico. `<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` diz ao navegador para usar PNG em telas retina onde um ícone 2x é renderizado com mais nitidez do que o quadro .ico de mesma resolução. Coloque o .ico e o PNG em /public.

Os favicons SVG oferecem a melhor solução preparada para o futuro para aplicativos React. Um único arquivo SVG é renderizado com nitidez em qualquer tamanho de guia e pode adaptar suas cores ao esquema de cores do usuário. Adicione `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` em index.html. Os navegadores que suportam favicons SVG preferem-no ao .ico; navegadores que não simplesmente pulam para a próxima tag de link.

Os favicons SVG de modo escuro são poderosos em aplicativos React porque o público-alvo geralmente usa ferramentas de desenvolvedor e desktops de modo escuro. Incorpore um bloco `<style>` dentro do seu SVG com `@media (prefers-color-scheme: dark) { :root { fill: white; } }` (ajustado à estrutura do seu ícone). Este único arquivo serve temas claros e escuros sem JavaScript ou tags extras.

O apple-touch-icon é necessário se algum usuário móvel salvar seu aplicativo React na tela inicial. Coloque apple-touch-icon.png (180×180) em /public e adicione `<link rel='apple-touch-icon' tamanhos='180x180' href='/apple-touch-icon.png'>` a index.html. Sem isso, iOS mostra uma captura de tela de baixa resolução do aplicativo em vez do ícone da sua marca na tela inicial.

Para aplicativos React implantados como PWAs, seu /public/manifest.json (ou site.webmanifest) deve incluir entradas de ícone em 192×192 e 512×512. Esses tamanhos orientam o prompt de instalação da tela inicial do Android e a caixa de diálogo de instalação do Chrome PWA. O favicon generator gera PNGs e um modelo de manifesto pré-preenchido que você pode colocar diretamente em /public.

O roteamento é importante para favicons em implantações de SPA React. O caminho /favicon.ico deve ser servido diretamente pelo seu host, não interceptado pelo roteador React. Vercel, Netlify e GitHub Pages fornecem conteúdo /public na raiz antes de passar para o SPA. Se você hospedar em um servidor personalizado, confirme se o middleware de arquivo estático é executado antes da rota pega-tudo que atende index.html.

Durante o desenvolvimento com `npm run dev`, o Vite recarrega a maioria das alterações automaticamente, mas as alterações no favicon às vezes exigem uma atualização manual do navegador. Os navegadores armazenam em cache /favicon.ico por origem, mesmo durante recarregamentos do servidor de desenvolvimento. Para forçar uma atualização durante o desenvolvimento, faça uma atualização forçada (Ctrl+Shift+R) ou anexe uma string de consulta como `/favicon.svg?v=2` em sua tag de link temporariamente.

Em configurações de renderização do lado do servidor (React com um servidor Express personalizado, por exemplo), você deve confirmar se o middleware express.static() atende /public antes do manipulador SSR React. Se o manipulador SSR capturar todas as solicitações primeiro, /favicon.ico será renderizado por React e retornará HTML em vez do arquivo binário ICO, quebrando totalmente o favicon.

As configurações do Monorepo com vários aplicativos React precisam de um gerenciamento cuidadoso de favicons. A pasta /public de cada aplicativo possui seu próprio favicon. Se você compartilha ícones entre aplicativos, considere manter um único diretório de ícones de fonte verdadeira na raiz do monorepo e copiar os arquivos em cada /public durante a etapa de construção. Ferramentas como `cp` no script de construção ou um plugin dedicado de sincronização de ativos os mantêm sincronizados.

Após a implantação, use favicon tester para verificar se todas as variantes do favicon estão acessíveis publicamente. Insira seu URL de produção e verifique se favicon.ico, favicon.svg, apple-touch-icon.png e seu manifesto PNGs são resolvidos corretamente. Isso exclui servidores de arquivos estáticos mal configurados ou caminhos que funcionam no desenvolvimento, mas interrompem a produção.