Favicon untuk Nuxt
Nuxt menyajikan file statis dari /public di root situs Anda, sehingga /public/favicon.ico menjadi /favicon.ico secara otomatis. Untuk ikon multi-ukuran atau SVG, tambahkan tag tautan melalui nuxt.config.ts atau useHead() di app.vue.
Quick answer
To add a favicon in Nuxt 3, place favicon.ico in /public (served at /favicon.ico), add link tags in nuxt.config.ts app.head if needed, deploy, and verify with the Favicon Checker — use the Favicon Generator to create the icon files first.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Buat paket favicon Anda dengan Favicon Generator — ekspor favicon.ico, favicon.svg, dan apple-touch-icon.png dari sumber 512×512. Masukkan ke dalam folder /public proyek Nuxt Anda.
Nuxt 3 menyajikan semuanya di /public di root domain tanpa konfigurasi tambahan. Browser meminta /favicon.ico secara default, jadi menempatkan file di sana mencakup kasus yang paling umum.
Untuk kontrol eksplisit atas setiap varian ikon, tambahkan tag tautan di nuxt.config.ts di bawah app.head.link — atau panggil useHead({ link: [...] }) di app.vue. Kedua pendekatan tersebut memasukkan tag ke <head> setiap halaman.
Setelah penerapan, buka URL produksi Anda di jendela pribadi dan jalankan Favicon Checker untuk mengonfirmasi /favicon.ico dan jalur <link rel="icon"> Anda menghasilkan 200. Ikon pengembang dalam cache adalah alasan umum mengapa favicon Nuxt tidak muncul setelah penerapan.
Jika ikon tab berfungsi tetapi Google Search masih menampilkan favicon kosong, verifikasi tautan beranda langsung Anda dengan ikon persegi minimal 48×48. Lihat panduan persyaratan favicon Google kami untuk aturan perayapan dan ukuran.
Nuxt tidak menghasilkan file .ico multi-ukuran secara otomatis — Anda harus menyediakannya. Gunakan fallback PNG yang tertaut di app.head untuk perintah penginstalan PWA dan tab DPI tinggi.
Cara kerjanya
- 1
Generate favicon files
Use the Favicon Generator to export favicon.ico and PNG variants from a 512×512 logo.
- 2
Tambahkan ke /public
Salin favicon.ico (dan opsional favicon.svg, apple-touch-icon.png) ke folder Nuxt /public Anda.
- 3
Konfigurasikan dan verifikasi
Tambahkan entri app.head.link di nuxt.config.ts jika diperlukan, terapkan, lalu jalankan Favicon Checker di URL aktif Anda.
Coba sekarang
Generate a Nuxt-ready favicon
Pembuat FaviconFAQ
Bagaimana cara menambahkan favicon di Nuxt 3?+
Tempatkan favicon.ico di /public, lalu secara opsional tambahkan tag <link rel="icon"> di nuxt.config.ts di bawah app.head.link atau melalui useHead() di app.vue.
Ke mana perginya favicon dalam proyek Nuxt?+
Direktori /public. File di sana disajikan dari root domain Anda — /public/favicon.ico tersedia di /favicon.ico.
Mengapa favicon Nuxt saya tidak muncul?+
Penyebab umum: file tidak ada di /public, jalur salah di app.head, cache browser dari dev, atau memeriksa localhost alih-alih URL yang diterapkan. Uji di jendela penyamaran.
Haruskah saya menggunakan nuxt.config.ts atau useHead() untuk favicon?+
Keduanya berhasil. nuxt.config.ts paling baik untuk ikon statis di seluruh situs; useHead() di app.vue jika ikon bergantung pada status runtime atau logika per rute.
Bisakah saya menggunakan favicon SVG di Nuxt?+
Ya — tempatkan favicon.svg di /public dan tambahkan { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' } ke app.head.link.