App Router boleh menghasilkan elemen ikon daripada fail konvensyen atau objek metadata. Kedua-dua pendekatan sah, tetapi mencampurkannya tanpa peraturan jelas mudah mewujudkan pengisytiharan yang bersaing.
Pilih konvensyen fail
Letakkan favicon.ico di akar app. Fail icon yang disokong boleh berada dalam segmen laluan, manakala apple-icon menerangkan ikon untuk peranti Apple.
Next.js mengesan fail ini, menentukan atribut yang berguna dan menambah elemen link sepadan ke dalam head. Ikon yang diletakkan dalam segmen terpakai pada laluan dalam segmen tersebut.
| Fail | Lokasi | Tujuan |
|---|---|---|
| favicon.ico | app/ | Sandaran laman |
| icon.svg | segmen app | Ikon pelayar |
| apple-icon.png | segmen app | Ikon Apple |
| manifest.webmanifest | segmen app | Manifes boleh pasang |
Gunakan metadata untuk laluan yang jelas
Jika aset berada dalam public atau pada hos imej, isytiharkan metadata.icons dalam susun atur atau halaman. Nyatakan icon, apple dan, apabila perlu, shortcut menggunakan URL yang konsisten.
Metadata daripada segmen anak boleh menggantikan medan komposit yang diwarisi daripada induknya. Periksa head akhir pada beberapa laluan dan jangan menganggap semua entri induk telah digabungkan.
Untuk ikon yang dijana mengikut permintaan, Next.js turut menyokong icon.tsx atau icon.js. Fungsinya mengembalikan data imej dengan saiz dan jenis kandungan yang jelas. Gunakan pendekatan ini untuk gubahan yang benar-benar dinamik: fail statik lebih mudah dicache, diperiksa dan disampaikan secara konsisten merentas pelancaran.
Sambungkan manifes dan ikonnya
Fail manifes statik atau fungsi manifest.ts boleh menerangkan nama aplikasi, warna dan ikon boleh pasang. URL ikon manifes mesti awam dan merujuk fail dengan dimensi yang diisytiharkan.
Asingkan fungsi manifes daripada favicon tab: ikon pemasangan 512×512 tidak menggantikan icon.svg atau favicon.ico secara automatik.
Uji dalam produksi
Jalankan binaan produksi, buka satu laluan daripada setiap segmen yang terlibat dan periksa elemen link. Kemudian buka setiap URL aset secara terus dan pastikan middleware tidak memintasnya.
Jika anda menggunakan basePath atau CDN, uji URL yang dihasilkan dalam persekitaran yang telah dilancarkan. Tingkah laku setempat tidak sentiasa mendedahkan asas awam atau peraturan penulisan semula yang salah.
Sumber utama
Soalan lazim
Adakah elemen link perlu ditulis secara manual?
Tidak. Konvensyen fail atau metadata.icons boleh menjananya. Pilih satu sumber rujukan yang jelas.
Di manakah favicon.ico patut diletakkan?
Dengan App Router, konvensyen favicon.ico disokong di akar direktori app.
Adakah manifest.ts menggantikan icon.svg?
Tidak. Manifes menerangkan ikon boleh pasang serta data lain, manakala icon.svg menyediakan ikon pelayar secara terus.