Favicon do Next.js não aparece? Veja a correção
No App Router, o Next.js monta os links do ícone a partir de arquivos no diretório app. Erre o nome do arquivo e ele não emite nada. No Pages Router não existe convenção alguma. Descubra em qual dos dois você está e a correção fica óbvia.
Em qual router você está?
O App Router lê arquivos chamados favicon.ico, icon e apple-icon no diretório app, calcula o tamanho deles e injeta as tags de link em tempo de build. Se o arquivo estiver com o nome errado ou na pasta errada, nenhuma tag é emitida. Não há erro, apenas uma aba em branco.
O Pages Router não tem essa convenção. Nada aparece a menos que você coloque os arquivos em public e declare as tags de link você mesmo em um head customizado. Um projeto migrado pela metade entre os dois é o motivo clássico de um favicon funcionar em uma rota e não em outra.
Onde o arquivo precisa ficar
| Arquivo | Router | O que o Next.js faz |
|---|---|---|
| app/favicon.ico | App Router | Servido em /favicon.ico, tag injetada automaticamente |
| app/icon.png | App Router | Dimensionado e linkado automaticamente no build |
| public/favicon.ico | Pages Router | Só aparece se você adicionar a tag de link manualmente |
Confirme em trinta segundos
- 1
Abra a URL do ícone diretamente
Carregue /favicon.ico (ou /icon) em uma nova aba. Um 404 significa que o arquivo não está onde o Next espera: um problema de build, não de cache.
- 2
Veja o código-fonte e procure por rel="icon"
A ausência de um link de ícone no head significa que a convenção de arquivos nunca disparou. Verifique se o nome do arquivo bate exatamente: favicon.ico, icon.png, apple-icon.png.
- 3
Descarte o cache por último
Só depois que o arquivo resolver e a tag estiver presente é que você deve fazer um hard-refresh em uma janela anônima. Nove em cada dez vezes o problema estava antes do cache.
Favicon do Next.js não aparece: perguntas frequentes
Por que meu favicon do Next.js não aparece?
No App Router, porque o arquivo está com o nome errado ou não está no diretório app, então nenhuma tag de link é gerada. No Pages Router, porque não há convenção automática e você não adicionou as tags em um head customizado. Abra /favicon.ico diretamente. Um 404 confirma que é um problema de arquivo ou de localização.
Preciso de favicon.ico se eu já tenho app/icon.png?
Mantenha os dois. O icon.png cobre navegadores modernos com qualidade maior; o favicon.ico é o que navegadores antigos, leitores de feed e alguns crawlers de link-preview ainda pedem pelo caminho.
Por que o favicon aparece em uma página e não em outra?
Geralmente um projeto misturando App Router e Pages Router. A convenção do diretório app só cobre as rotas renderizadas por ele; rotas do Pages Router precisam das próprias tags de link em _document ou em um head customizado.