Favicon untuk Nuxt
Nuxt 3 menyajikan file statis dari /public di root situs. Konfigurasikan tag <link> di nuxt.config.ts pada app.head.link untuk penyiapan favicon yang terpusat dan ramah SSR.
Tempatkan favicon.ico di publik/favicon.ico — Nuxt menyajikannya secara otomatis tanpa konfigurasi tambahan.
Di nuxt.config.ts, perluas app.head.link dengan entri ikon: { rel: 'icon', ketik: 'image/png', ukuran: '32x32', href: '/favicon-32x32.png' }.
Gunakan useHead() dalam tata letak hanya ketika ikon bervariasi per rute — sebagian besar situs menyetel ikon global satu kali di nuxt.config.
Untuk @nuxtjs/seo atau modul konfigurasi situs, ikuti bidang faviconnya jika ada — bidang ini membungkus tag tautan yang sama.
Nuxt Gambar tidak memproses favicon; unggah ukuran akhir ke publik/.
Saat menggunakan hosting statis preset Nitro, verifikasi jalur favicon ada di .output/public setelah nuxi dibuat.
Cara kerjanya
- 1
Tambahkan file ke publik/
favicon.ico, ukuran PNG, opsional SVG.
- 2
Konfigurasikan app.head.link
Sentralisasi tautan ikon di nuxt.config.ts.
- 3
Hasilkan dan periksa HTML
Lihat sumber pada halaman yang diterapkan untuk tag yang benar.
Coba sekarang
Bangun paket ikon Nuxt Anda
Generator paket faviconFAQ
Nuxt masih menampilkan ikon default — mengapa?+
Hapus cache .nuxt, ganti public/favicon.ico, dan mulai ulang server dev.
Bagaimana cara menambahkan ikon sentuh apel di Nuxt 3?+
Tambahkan { rel: 'apple-touch-icon', ukuran: '180x180', href: '/apple-touch-icon.png' } ke app.head.link.
Apakah SSR menduplikasi tag favicon?+
Hindari mendefinisikan tautan yang sama di nuxt.config dan panggilan useHead tingkat halaman.