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.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
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.