Favicon untuk Next.js
Next.js 14+ App Router memperlakukan /app/icon.png dan /app/favicon.ico sebagai konvensi — masukkan keduanya dan Next memancarkan tag yang tepat secara otomatis.
Tempatkan favicon.ico di dalam /app dan Berikutnya akan menyajikannya di /favicon.ico dan memasukkan tag tautan.
Untuk ikon multi-ukuran atau bertema, gunakan konvensi file: icon.png, icon.svg, apple-icon.png di dalam /app. Selanjutnya buat tag <link> dari metadata file.
Cara kerjanya
- 1
Hasilkan favicon.ico
Multi-ukuran 16/32/48/64 dari sumber 512×512.
- 2
Tempatkan di /app
/app/favicon.ico disajikan secara otomatis. Tambahkan ikon.png untuk HD.
- 3
Memeriksa
Buka /favicon.ico di browser Anda — Selanjutnya tayangkan tanpa konfigurasi apa pun.
Coba sekarang
Hasilkan favicon siap Next.js
Pembuat FaviconFAQ
Ke mana perginya ikon di Router Aplikasi Next.js?+
Di dalam direktori /app. Nama file (icon, apple-icon, favicon) menentukan perannya.
Bagaimana dengan Router Halaman?+
Masukkan favicon.ico ke /public dan tautkan dari _document.tsx.
Apakah saya masih memerlukan .ico multi-ukuran?+
Direkomendasikan untuk dukungan browser lawas, terutama pintasan mode Edge dan IE.