Configurar Favicons no Next.js

Os frameworks modernos exigem estratégias modernas de meta tags. Configure os ícones do seu browser corretamente no Next.js.

Método 1: App Router do Next.js (API de metadados)

No Next.js moderno (App Router versão 13+), pode colocar os seus ficheiros de ícones diretamente na raiz do diretório da sua aplicação:

  • app/favicon.ico (Mapeamento automático de fallback para versões antigas)
  • app/icon.png (Gera links de favicon dinamicamente)
  • app/apple-icon.png (Utilizado para os ícones do ecrã inicial da Apple)

Em alternativa, pode declarar ícones no seu ficheiro layout.js raiz utilizando a API de metadados:

export const metadata = {
  title: 'A Minha Aplicação',
  icons: {
    icon: '/favicon-32x32.png',
    shortcut: '/favicon.ico',
    apple: '/apple-touch-icon.png',
  },
};

Método 2: Router de Páginas ou links HTML

Se estiver a utilizar o Router de páginas, edite o ficheiro _document.js dentro do diretório pages e inclua a meta marcação padrão:

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="pt">
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}