Favicon do React não aparece? Veja a correção
O React renderiza em um nó do DOM e nunca mexe no head, então o favicon vive em um arquivo HTML estático. Uma aba em branco significa que a tag de link desse arquivo está errada, ou que o ícone foi importado de src e não fica mais em um caminho fixo.
O head é um arquivo estático, não um componente
O navegador pede o favicon enquanto analisa o head, muito antes de o React montar. Então o link do ícone precisa estar no shell HTML: index.html na raiz do projeto no Vite, ou public/index.html no Create React App.
Duas coisas quebram isso. No Create React App, um href que pula o placeholder %PUBLIC_URL% funciona localmente e depois dá 404 fora da raiz do domínio. Em qualquer projeto React, importar o ícone de src o entrega ao bundler, que o renomeia com um hash de conteúdo, então nada mais responde em /favicon.ico.
Encontre a causa
- 1
Abra /favicon.ico diretamente
Um 404 significa que o arquivo não está sendo servido nesse caminho: um problema de build ou de caminho. Se carregar, o arquivo está bom e o problema é a tag de link ou o cache.
- 2
Leia o index.html gerado no build
Olhe na saída do build, não no seu código-fonte. Confirme que o href do ícone resolveu para um caminho real e, no CRA, que %PUBLIC_URL% foi substituído em vez de deixado literal.
- 3
Pare de importar o ícone de src
Arquivos em public/ mantêm os nomes e respondem em caminhos fixos; imports de src/ recebem hash. Um favicon precisa estar em public/.
Favicon do React não aparece: perguntas frequentes
Por que meu favicon do React não aparece?
Quase sempre a tag de link no index.html aponta para onde o arquivo não está, ou o ícone foi importado de src e ganhou um nome de arquivo com hash. Abra /favicon.ico diretamente para ver se o arquivo é sequer servido nesse caminho.
Por que meu favicon deu 404 depois que fiz deploy em um sub-caminho?
O href resolveu em relação à raiz do domínio em vez do seu subdiretório. No Vite, defina base no vite.config.js; no Create React App, defina o campo homepage e use %PUBLIC_URL% no template, depois confira o index.html gerado no build.
Preciso importar o favicon no meu código React?
Não. Arquivos em public/ são copiados para a saída do build como estão e não fazem parte do grafo de módulos. Importar um produz uma segunda cópia com hash e quebra o caminho fixo /favicon.ico.