Mengonfigurasi Favicon di Next.js

Framework modern membutuhkan strategi meta tag modern. Konfigurasikan ikon browser Anda dengan benar di Next.js.

Metode 1: Next.js App Router (API metadata)

Di Next.js modern (versi 13+ App Router), Anda dapat menempatkan file ikon Anda langsung di dalam direktori root aplikasi Anda:

  • app/favicon.ico (Pemetaan fallback warisan otomatis)
  • app/icon.png (Menghasilkan tautan favicon secara dinamis)
  • app/apple-icon.png (Digunakan untuk ikon layar beranda Apple)

Sebagai alternatif, Anda dapat mendeklarasikan ikon di file layout.js root Anda menggunakan API metadata:

export const metadata = {
  title: 'My App',
  icons: {
    icon: '/favicon-32x32.png',
    shortcut: '/favicon.ico',
    apple: '/apple-touch-icon.png',
  },
};

Metode 2: Pages Router atau tautan HTML

Jika Anda menggunakan Pages Router, edit file _document.js Anda di dalam direktori pages dan sertakan markup meta standar:

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

export default function Document() {
  return (
    <Html lang="en">
      <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>
  )
}