Favicon para Next.js
O App Router do Next.js 14+ trata /app/icon.png e /app/favicon.ico como convenções — basta colocar os arquivos lá e o Next emite as tags corretas automaticamente.
Coloque favicon.ico dentro de /app e o Next o servirá em /favicon.ico, injetando a tag de link correspondente.
Para ícones multirresolução ou temáticos, use as convenções de arquivo: icon.png, icon.svg, apple-icon.png dentro de /app. O Next gera as tags <link> com base nos metadados dos arquivos.
Como funciona
- 1
Gere o favicon.ico
Multirresolução 16/32/48/64 a partir de uma imagem de 512×512.
- 2
Coloque em /app
/app/favicon.ico é servido automaticamente. Adicione icon.png para alta definição.
- 3
Verifique
Abra /favicon.ico no navegador — o Next o exibe sem nenhuma configuração extra.
Experimente agora
Gere um favicon pronto para Next.js
Gerador de FaviconPerguntas frequentes
Onde ficam os ícones no App Router do Next.js?+
No diretório /app. O nome do arquivo (icon, apple-icon, favicon) define sua função.
E no Pages Router?+
Coloque favicon.ico em /public e vincule-o em _document.tsx.
Ainda preciso de um .ico multirresolução?+
Recomendado para navegadores legados, especialmente Edge e atalhos em modo IE.
Ferramentas relacionadas
Gerador de Favicon
Gere um pacote completo de favicon (ICO + PNGs) para cada dispositivo e navegador.
Conversor de PNG para ICO
Conversor online gratuito de PNG para ICO para ícones do Windows, aplicativos e favicons de sites.
Conversor de SVG para PNG
Rasterize gráficos vetoriais SVG para PNG em qualquer resolução.