Next.js'de Favicon'ları Yapılandırma

Modern çerçeveler, modern meta etiket stratejileri gerektirir. Next.js'de tarayıcı simgelerinizi doğru şekilde yapılandırın.

Yöntem 1: Next.js Uygulama Yönlendiricisi (meta veri API'si)

Modern Next.js'de (13+ sürüm Uygulama Yönlendiricisi), simge dosyalarınızı doğrudan uygulama dizininizin kök dizinine yerleştirebilirsiniz:

  • app/favicon.ico (Otomatik eski yedekleme eşlemesi)
  • app/icon.png (Favicon bağlantılarını dinamik olarak oluşturur)
  • app/apple-icon.png (Apple ana ekran simgeleri için kullanılır)

Alternatif olarak, meta veri API'sini kullanarak simgeleri kök layout.js dosyanızda tanımlayabilirsiniz:

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

Yöntem 2: Sayfa Yönlendirici veya HTML bağlantıları

Sayfa Yönlendirici kullanıyorsanız, pages dizinindeki _document.js dosyasını düzenleyin ve standart meta işaretlemesini ekleyin:

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

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