Guia de framework

Guia de Favicon para Next.js

Veja como configurar favicons corretamente em aplicações Next.js com as convenções atuais do framework.

Gere o favicon primeiro

Três maneiras de adicionar favicons

Configuração do roteador de aplicativos

Usando API de metadados e arquivos de aplicativos/ícones

Método 1

Configuração do roteador de páginas

Abordagem _document.js tradicional

Método 2

Arquivos estáticos

Servindo a partir do diretório público

Método 3

1. Roteador de aplicativos (Next.js 13+)

Opção A: usando icon.tsx (recomendado)

// app/icon.tsx
import { ImageResponse } from 'next/og'

export const size = { width: 32, height: 32 }
export const contentType = 'image/png'

export default function Icon() {
  return new ImageResponse(
    (
      <div style={{ background: '#000', width: '100%', height: '100%' }}>
        {/* Your icon content */}
      </div>
    ),
    { ...size }
  )
}

Opção B: usando API de metadados

// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
    ],
    apple: [
      { url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
    ],
  },
}

2. Roteador de páginas (Next.js 12 e inferior)

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

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

3. Arquivos estáticos no diretório público

Estrutura do arquivo:
public/
├── favicon.ico
├── favicon-16x16.png
├── favicon-32x32.png
├── apple-touch-icon.png
└── android-chrome-192x192.png
Next.js exibe automaticamente esses arquivos quando colocados em público/

Práticas recomendadas para favicon Next.js

📱 Use o App Router quando possível

O App Router fornece melhor manuseio de favicon com a API de metadados e otimização automática.

⚡ Otimize tamanhos de arquivo

Mantenha favicon.ico com menos de 1 KB e use compactação apropriada para arquivos PNG.

🔄 Teste em diferentes dispositivos

Verifique se seu favicon aparece corretamente em dispositivos móveis, tablets e navegadores de desktop.