Favicon merupakan salah satu identitas dari suatu website yang penting, Favicon tampil pada pojok kiri atas tab browser yang kita gunakan.
Favicon default pada framework Next js biasanya adalah logo vercel. Tentunya pada website yang kita bangun, kita ingin mengubah logo favicon menjadi logo kita atau logo client.
Berikut adalah cara merubah logo favicon pada framework Next js app directory :
Cara 1: Ganti file favicon.ico
Berdasarkan dokumentasinya, untuk merubah favicon kita cukup mengganti / replace file favicon.ico yang ada pada folder app.
Cara 2: Ganti favicon di next js app directory
Apabila cara pertama gagal menampilkan favicon yang kita inginkan. Maka kita dapat mencoba cara 2 sebagai berikut.
- Hapus file
favicon.icoexisting yang ada di folderapp - Simpan file
favicon.icobaru yang kita inginkan di folderpublic( catatan: boleh juga di sub-folder pada folderpublic, contoh: folderpublic/img) - Apabila kita menyimpan file
favicon.icodi folderpublic, maka pada fileapp/layout.tsxtambahkan kode berikut setelah tag<html>sebelum tag<body>
<head>
<link rel="icon" href="/favicon.ico" sizes="any" />
</head>- Save lalu buka development server dan lihat perubahan favicon nya.
Demikian cara merubah logo favicon pada Next js yang menggunakan app directory. Selamat Mencoba.***