Melhor Gerador de Favicon para Next.js
O Next.js não usa tags link que você escreve à mão. O App Router lê arquivos chamados icon, apple-icon e favicon no diretório app e injeta a marcação em tempo de build. O gerador certo te entrega exatamente esses arquivos.
O que realmente importa no Next.js
O App Router resolve ícones a partir de arquivos, não de tags. Um arquivo chamado icon, apple-icon ou favicon no diretório app é dimensionado e linkado automaticamente. Então a pergunta decisiva para um gerador é se a saída dele nomeia e posiciona os arquivos seguindo essa convenção, ou se te entrega PNGs soltos e um conjunto de tags link que o framework não quer.
O Pages Router é diferente: nele você coloca os arquivos em public e declara as tags em um Head customizado. Um gerador que sabe em qual dos dois você está te poupa do único erro que faz um favicon do Next.js silenciosamente não emitir nada.
Os critérios que importam no Next.js
| O que procurar | Por que importa no Next.js | Como o gerador daqui faz isso |
|---|---|---|
| Nomes de arquivo do App Router | Ícones resolvem a partir de app/icon, app/apple-icon, app/favicon.ico | Exporta arquivos nomeados e posicionados seguindo essa convenção |
| Sem tags escritas à mão | O framework injeta as tags link para você | Dispensa as tags redundantes que uma ferramenta genérica adicionaria |
| Manifest e Android | Instalações PWA precisam da faixa completa de tamanhos | Exporta manifest.json mais os ícones Android de 192 e 512 |
| Ciente do router | App e Pages resolvem ícones de formas diferentes | As orientações de instalação cobrem os dois routers, não só um |
Para onde vão os arquivos (App Router)
- app/
- favicon.icoaddServed at /favicon.ico, tag auto-injected
- icon.pngaddSized and linked at build
- apple-icon.pngadd180x180 home screen icon
- public/
- manifest.jsonaddPWA install metadata
- android-icon-192x192.pngadd
- android-icon-512x512.pngadd
Os arquivos marcados como adicionados são os que o gerador exporta. Todo o resto é um projeto Next.js comum.
O gerador vs só as convenções de arquivo do Next.js
Um gerador ciente do Next.js
Start hererecomendado
- A exportação segue a convenção do diretório app
- Produz favicon.ico, todos os tamanhos de PNG e apple-icon
- Inclui manifest.json e os tamanhos Android para instalações PWA
- Uma imagem de origem, cada tamanho renderizado corretamente
Soltar um único arquivo você mesmo
- app/favicon.ico sozinho cobre a aba e nada mais
- Sem ícone apple-touch, então as telas iniciais do iOS recorrem a um fallback
- Sem manifest, então as instalações no Android parecem inacabadas
- Redimensionar uma imagem na mão raramente fica legível a 16px
Preciso de tags link para um favicon no Next.js?
Não no App Router. Arquivos chamados favicon.ico, icon e apple-icon no diretório app são lidos, dimensionados e linkados automaticamente em tempo de build. Um gerador que também emite tags link escritas à mão está adicionando marcação que o framework já produz. O Pages Router é a exceção, onde você declara as tags em um Head customizado.
Quais tamanhos o gerador deve exportar para o Next.js?
favicon.ico para a aba, um apple-icon de 180x180 para as telas iniciais do iOS, e PNGs de 192 e 512 referenciados a partir do manifest.json para Android e instalações PWA. Projete a marca a 16px primeiro, já que é o tamanho que decide se ela fica legível.
The step-by-step for Next.js
You've picked the tool. Here's the exact install for Next.js.