O App Router pode produzir as etiquetas de ícones a partir de ficheiros convencionais ou do objeto metadata. As duas abordagens são válidas, mas misturá-las sem uma regra clara cria facilmente declarações concorrentes.
Escolher as convenções de ficheiros
Coloque favicon.ico na raiz de app. Os ficheiros icon com uma extensão suportada podem ficar num segmento de rota, enquanto apple-icon descreve o ícone destinado aos dispositivos Apple.
O Next.js deteta estes ficheiros, calcula os atributos necessários e adiciona os elementos link correspondentes ao head. Um ícone colocado num segmento aplica-se às rotas desse segmento.
| Ficheiro | Localização | Utilização |
|---|---|---|
| favicon.ico | app/ | Alternativa de recurso do site |
| icon.svg | segmento app/ | Ícone do navegador |
| apple-icon.png | segmento app/ | Ícone Apple |
| manifest.webmanifest | segmento app/ | Manifesto instalável |
Usar metadata para caminhos explícitos
Se os seus recursos estiverem em public ou num servidor de imagens, declare metadata.icons num layout ou numa página. Especifique icon, apple e, se necessário, shortcut com URL coerentes.
Os metadados de um segmento descendente podem substituir campos compostos herdados. Inspecione, por isso, o head final de várias rotas em vez de assumir que todas as entradas do segmento ascendente foram combinadas.
Para um ícone gerado a pedido, o Next.js também aceita icon.tsx ou icon.js. A função devolve dados de imagem com um tamanho e um tipo explícitos. Reserve esta abordagem para composições realmente dinâmicas: um ficheiro estático continua a ser mais simples de guardar em cache e inspecionar.
Ligar o manifesto aos seus ícones
Um ficheiro manifest estático ou uma função manifest.ts pode descrever o nome da aplicação, as cores e os ícones instaláveis. Os URL dos ícones do manifesto devem ser públicos e apontar para as dimensões declaradas.
Mantenha separadas as funções do manifesto e do favicon do separador: um ícone de 512×512 destinado à instalação não substitui automaticamente icon.svg ou favicon.ico.
Testar em produção
Execute uma compilação de produção, abra uma rota de cada segmento relevante e inspecione os elementos link. Verifique depois diretamente cada URL de recurso e confirme que não é intercetado por um middleware.
Se usar basePath ou uma CDN, teste os URL produzidos no ambiente publicado. O comportamento local nem sempre revela uma base pública ou uma regra de reescrita incorreta.
Fontes primárias
Perguntas frequentes
É preciso escrever as etiquetas link à mão?
Não. As convenções de ficheiros ou metadata.icons podem gerá-las. Escolha uma única fonte de definição clara.
Onde colocar favicon.ico?
Com o App Router, a convenção favicon.ico é suportada na raiz da pasta app.
Um manifest.ts substitui icon.svg?
Não. O manifesto descreve, entre outros elementos, os ícones instaláveis, enquanto icon.svg fornece diretamente o ícone do navegador.