Favicon untuk Next.js
Next.js 14+ App Router memperkenalkan konvensi ikon berbasis file: letakkan favicon.ico atau icon.png di dalam direktori /app dan Next.js mengeluarkan tag `<link>` yang benar secara otomatis — tidak diperlukan komponen Head manual. Untuk proyek Pages Router, tempatkan favicon.ico di /public dan tautkan dari _document.tsx. favicon generator menghasilkan kumpulan file lengkap dari satu gambar sumber, dan best favicon size guide mencakup ukuran yang penting untuk setiap konteks.
Next.js 13+ dengan App Router memperlakukan nama file khusus di direktori /app sebagai konvensi metadata. File bernama favicon.ico, icon.png, icon.svg, dan apple-icon.png secara otomatis dikenali oleh sistem metadata Next.js dan disajikan dengan header respons dan tag `<link>` yang benar, tanpa konfigurasi apa pun di layout.tsx atau ekspor metadata.
Untuk menggunakan konvensi file, tempatkan favicon.ico Anda di dalam direktori /app (bukan /public). Next.js menyajikannya di rute /favicon.ico dan memasukkan tag tautan ke setiap halaman yang berbagi tata letak tersebut. File ikon harus berada pada level yang sama dengan root layout.tsx Anda agar dapat diterapkan secara global.
Untuk ikon DPI tinggi menggunakan App Router, tempatkan icon.png di dalam /app. Next.js membaca dimensinya dan menghasilkan tag `<link rel='icon' sizes='...' href='...'>` yang sesuai. Untuk menyajikan berbagai ukuran, ekspor beberapa file ikon dengan akhiran numerik berbeda: icon.png (32×32), icon@2x.png (64×64), atau gunakan icon.svg untuk satu file dengan skala tak terbatas.
App Router juga mendukung file apple-icon.png khusus untuk ikon layar beranda iOS. Tempatkan apple-icon.png (180×180) di dalam /app dan Next.js secara otomatis mengeluarkan `<link rel='apple-touch-icon' href='...'>`. Ini adalah pendekatan paling bersih — tidak diperlukan ekspor metadata manual.
Jika Anda lebih suka mendeklarasikan favicon dalam kode daripada melalui konvensi file, ekspor objek metadata dari layout.tsx. Properti ikon menerima objek dengan pintasan, ikon, apel, dan bidang lainnya. Contoh: `ekspor metadata const: Metadata = { ikon: { ikon: '/favicon.ico', apel: '/apple-touch-icon.png' } }`. Metode ini berguna ketika Anda memerlukan jalur ikon dinamis berdasarkan lokal atau lingkungan.
Untuk proyek Pages Router (Next.js 12 ke bawah, atau proyek yang belum bermigrasi ke App Router), penanganan favicon bekerja secara berbeda. Tempatkan favicon.ico di direktori /public — Next.js menyajikan /public di URL root. Tambahkan tag link di halaman/_document.tsx di dalam komponen `<Head>`: `<link rel='icon' href='/favicon.ico' />`. `<Head>` ini adalah kepala tingkat dokumen, bukan impor per halaman berikutnya/kepala.
Komponen next/head (impor Head dari 'next/head') berfungsi untuk penggantian ikon per halaman di Pages Router. Jika Anda menginginkan favicon berbeda pada halaman tertentu, sertakan `<link rel='icon'>` di dalam `<Head>` pada komponen halaman tersebut. Tag per halaman menggantikan tag tingkat dokumen. Ini berguna untuk situs multi-merek yang dilayani dari satu penerapan Next.js.
Favicon SVG didukung penuh oleh konvensi Next.js App Router. Beri nama file icon.svg dan letakkan di /app. Next.js mengeluarkan `<link rel='icon' type='image/svg+xml' href='/_next/static/media/icon.svg...'>`. Karena Next.js melakukan hash pada nama file statis untuk menghilangkan cache, Anda tidak perlu khawatir tentang pembatalan cache favicon — mengubah file akan mengubah hash dan memaksa browser untuk mengambil ulang.
Manifes web di Next.js App Router dikonfigurasi melalui file manifest.ts di /app. Ekspor fungsi default yang mengembalikan objek MetadataRoute.Manifest yang menyertakan ukuran ikon Anda. Next.js merendernya sebagai application/manifest+json di /manifest.webmanifest. 192×192 dan 512×512 PNG yang direferensikan dalam manifes harus ditempatkan di /public.
Turbopack (bundel eksperimental di Next.js 14+) menangani aset statis di /public yang identik dengan webpack. File Favicon di /public disajikan tanpa bundling. Untuk file dalam /app (konvensi ikon), Turbopack memprosesnya sebagai aset metadata — tidak diperlukan perubahan konfigurasi saat beralih antara Turbopack dan webpack.
Next.js ISR (Regenerasi Statis Inkremental) dan penerapan edge tidak memengaruhi penyajian favicon. File Favicon adalah aset statis yang disajikan dari tepi CDN, bukan dari cache ISR. Ini berarti pembaruan favicon disebarkan segera setelah penerapan tanpa menunggu validasi ulang halaman.
Aplikasi multi-lokal Next.js sering kali memerlukan ikon yang peka terhadap lokal. Gunakan fungsi generateMetadata di layout.tsx untuk mengembalikan jalur ikon spesifik lokal berdasarkan objek params. Ini adalah fitur khusus App Router — situs Pages Router memerlukan logika _document.tsx khusus atau server khusus untuk mencapai favicon per lokal.
Setelah penerapan, verifikasi favicon Next.js Anda menggunakan favicon tester. Periksa apakah /favicon.ico, /icon.svg, dan /apple-touch-icon.png semuanya mengembalikan 200 respons dengan header tipe konten yang benar. Periksa juga `<head>` HTML dari situs yang Anda terapkan untuk mengonfirmasi Next.js memancarkan semua tag tautan yang diharapkan.
Cara kerjanya
- 1
Hasilkan paket favicon Anda
Unggah 512×512 PNG atau SVG ke [favicon generator](tool:favicon-generator). Unduh favicon.ico, icon.svg, apple-touch-icon.png (180×180), dan manifes PNGs.
- 2
Tempatkan favicon.ico di /app (App Router)
Salin favicon.ico ke direktori /app proyek Anda bersama layout.tsx. Next.js secara otomatis menyajikannya dan memasukkan tag tautan. Untuk Pages Router, letakkan di /public.
- 3
Tambahkan icon.svg untuk rendering yang tajam
Ganti nama SVG Anda menjadi icon.svg dan letakkan di /app (App Router). Next.js memancarkan tag tautan SVG secara otomatis. Untuk Pages Router, tempatkan di /public dan tambahkan tag link di _document.tsx.
- 4
Tambahkan apple-icon.png untuk pemasangan iOS
Ganti nama 180×180 PNG Anda menjadi apple-icon.png dan letakkan di /app (App Router). Untuk Pages Router, tempatkan apple-touch-icon.png di /public dan tambahkan tag link di _document.tsx.
- 5
Konfigurasikan manifes web
Untuk App Router, buat /app/manifest.ts dan ekspor metadata Manifest termasuk entri ikon 192×192 dan 512×512. Tempatkan PNG di /public. Untuk Pages Router, tempatkan site.webmanifest di /public dan tambahkan tag tautan manifes di _document.tsx.
- 6
Verifikasi pada produksi
Setelah penerapan, lihat sumber di URL aktif Anda dan konfirmasikan semua tag tautan ada. Gunakan [favicon tester](utility:favicon-tester) untuk memeriksa setiap URL ikon mengembalikan 200 dengan tipe konten yang benar.
Coba sekarang
Hasilkan favicon siap Next.js
Pembuat FaviconFAQ
Ke mana perginya favicon di Next.js App Router?+
Di dalam direktori /app. File bernama favicon.ico, icon.png, icon.svg, dan apple-icon.png secara otomatis dikenali dan ditautkan. Favicon global hadir dalam /app; yang khusus tata letak ada di subdirektori tata letak yang sesuai.
Kemana perginya favicon di Next.js Pages Router?+
Di direktori /public. Tambahkan tag tautan di halaman/_document.tsx di dalam komponen `<Head>`. Next.js menyajikan file /public di URL root — /public/favicon.ico dapat diakses di https://domainanda.com/favicon.ico.
Apakah saya perlu mengedit layout.tsx untuk menambahkan favicon di App Router?+
Tidak, jika Anda menggunakan konvensi file (favicon.ico di /app). Jika Anda lebih suka kode, ekspor objek metadata dengan properti ikon. Kedua pendekatan menghasilkan tag `<link>` yang identik dalam HTML yang dirender.
Apakah Next.js mendukung favicon SVG?+
Ya. Tempatkan icon.svg di /app untuk App Router, atau tambahkan `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` di _document.tsx untuk Pages Router. App Router secara otomatis mengeluarkan tag tautan SVG dari konvensi file.
Bagaimana cara menambahkan apple-touch-icon di Next.js?+
Untuk App Router: tempatkan apple-icon.png (180×180) di /app. Next.js memancarkan tag tautan apple-touch-icon secara otomatis. Untuk Pages Router: tempatkan apple-touch-icon.png di /public dan tambahkan tag link di _document.tsx.
Apakah favicon Next.js menghancurkan cache secara otomatis?+
Untuk file dalam /app, ya — Next.js menambahkan hash konten ke nama file yang disajikan, sehingga setiap perubahan file memicu pengambilan baru. Untuk file dalam /public, tidak ada penghilangan cache otomatis; tambahkan string kueri secara manual jika diperlukan.
Bisakah saya menggunakan favicon berbeda per halaman di Next.js?+
Ya. Di App Router, ekspor fungsi generateMetadata di page.tsx rute tertentu dengan nilai ikon khusus. Di Pages Router, tambahkan `<link rel='icon'>` di dalam komponen `<Head>` per halaman — ini akan menggantikan default tingkat dokumen.