Cara Menambahkan Favicon Ke Situs Web Next.JS (2022) – Tutorial Langkah demi Langkah

Jadi Anda akhirnya selesai membangun situs web Anda dengan Berikutnya dan Anda hampir siap untuk ditayangkan. Namun, Anda tidak dapat menginstal Favicon – tidak ada yang berhasil!

Dalam tutorial ini, kami akan memandu Anda menambahkan favicon ke situs web Next.JS.

Dengan versi Next terbaru, menambahkan favicon telah menjadi proses yang cukup mudah. Sebelumnya, ada beberapa langkah yang perlu Anda lakukan untuk menambahkan favicon ke sebuah proyek. Faktanya, pada tahun 2022 langkah-langkah ini masih berfungsi, kecuali mereka disusutkan untuk metode yang jauh lebih mudah. Namun, jika Anda tidak dapat membuatnya berfungsi, periksa ini StackOverflow keluar.

Sekarang, mari kita lihat cara terbaik untuk menambahkan favicon ke situs NextJS.

Pertama, kita membutuhkan favicon. Favicon dapat berupa PNG, GIF, atau ICO dan berukuran sekitar 16×16, menurut Dokumen web MDN.

Praktik terbaik menentukan pembuatan file ico dan menamainya favicon.ico.

Kamu dapat memakai favicon.io untuk menghasilkan ini dari jenis gambar lain.

Sekarang yang perlu Anda lakukan adalah mengambil file ini dan meletakkannya di direktori /public Anda. Dan begitu saja, itu akan diperbarui secara otomatis, dan favicon akan ditampilkan oleh browser setelah Anda membangun berikutnya.

Namun…

Ada beberapa kelemahan dari metode sederhana yang elegan ini. Misalnya, implementasi dasar ini berarti bahwa jika Anda menambahkan situs ke telepon (sebagai jalan pintas) ikon tidak akan ditampilkan.

Karena kelemahan ini, saya menyarankan untuk menerapkan pengaturan favicon.ico alternatif, menggunakan RealFaviconGenerator. Kami telah menggunakan alat gratis ini selama bertahun-tahun saat membangun situs web WordPress kami, dan sekarang juga menggunakannya untuk situs NextJS JAMStack.

Pertama menuju ke Generator Favicon Nyata, dan unggah gambar Anda.

Anda akan berakhir di halaman seperti ini. Tweak ikon sesuai kebutuhan.

Kemudian, scroll sampai habis don dan klik “Generate Your Favicons and HTML Code”.

Unduh paket gambar favicon dan unggah semua yang ada di dalamnya ke direktori / publik Anda (termasuk site.webmanifest).

Terakhir, dengan menggunakan komponen NextJS Head default, tambahkan kode yang dihasilkan.

impor Kepala dari “berikutnya/kepala”

Anda dapat melihat bahwa ini memberikan dukungan untuk beberapa browser, yaitu Safari SVG, di samping gambar favicon lainnya yang dapat digunakan pada browser dan pintasan di perangkat seluler.

Dan ini adalah cara terbaik untuk menambahkan favicon ke situs web statis Next.JS. Ada pertanyaan, komentar, atau kekhawatiran? Jangan ragu untuk meninggalkan mereka di bagian komentar di bawah.