App Router dapat menghasilkan elemen ikon dari berkas sesuai konvensi atau objek metadata. Keduanya valid, tetapi mencampurkannya tanpa aturan jelas dapat dengan mudah menghasilkan deklarasi yang saling bersaing.
Pilih konvensi berkas
Letakkan favicon.ico di direktori akar app. Berkas icon yang didukung dapat berada dalam segmen rute, sedangkan apple-icon menjelaskan ikon untuk perangkat Apple.
Next.js mendeteksi berkas ini, menentukan atribut yang diperlukan, dan menambahkan elemen link terkait ke head. Ikon dalam suatu segmen berlaku untuk rute di segmen tersebut.
| Berkas | Lokasi | Tujuan |
|---|---|---|
| favicon.ico | app/ | Cadangan situs |
| icon.svg | segmen app | Ikon peramban |
| apple-icon.png | segmen app | Ikon Apple |
| manifest.webmanifest | segmen app | Manifes pemasangan |
Gunakan metadata untuk jalur eksplisit
Jika aset berada di public atau host gambar, deklarasikan metadata.icons dalam layout atau halaman. Tentukan icon, apple, dan jika perlu shortcut dengan URL yang konsisten.
Metadata dari segmen anak dapat menggantikan bidang gabungan yang diwarisi dari induknya. Periksa head akhir pada beberapa rute, jangan berasumsi setiap entri induk sudah digabungkan.
Untuk ikon yang dibuat sesuai permintaan, Next.js juga mendukung icon.tsx atau icon.js. Fungsi mengembalikan data gambar dengan ukuran dan tipe konten eksplisit. Gunakan pendekatan ini untuk komposisi yang memang dinamis: berkas statis lebih mudah disimpan dalam cache, diperiksa, dan disajikan secara konsisten di berbagai deployment.
Hubungkan manifes dan ikonnya
Berkas manifes statis atau fungsi manifest.ts dapat menjelaskan nama aplikasi, warna, dan ikon pemasangan. URL ikon manifes harus publik dan merujuk berkas dengan dimensi yang dideklarasikan.
Pisahkan peran manifes dari favicon tab: ikon pemasangan 512×512 tidak otomatis menggantikan icon.svg atau favicon.ico.
Uji dalam produksi
Jalankan build produksi, buka satu rute dari setiap segmen yang terpengaruh, dan periksa elemen link. Lalu buka setiap URL aset secara langsung dan pastikan middleware tidak mencegatnya.
Jika menggunakan basePath atau CDN, uji URL yang dihasilkan di lingkungan deployment. Perilaku lokal tidak selalu mengungkap basis publik atau aturan penulisan ulang yang keliru.
Sumber primer
Pertanyaan umum
Apakah elemen link perlu ditulis secara manual?
Tidak. Konvensi berkas atau metadata.icons dapat membuatnya. Pilih satu sumber acuan yang jelas.
Di mana favicon.ico harus diletakkan?
Dengan App Router, konvensi favicon.ico didukung di direktori akar app.
Apakah manifest.ts menggantikan icon.svg?
Tidak. Manifes menjelaskan ikon pemasangan dan data lainnya, sedangkan icon.svg langsung menyajikan ikon peramban.