Favicon untuk Nuxt
Nuxt menyediakan fail statik daripada /public pada akar tapak anda, jadi /public/favicon.ico menjadi /favicon.ico secara automatik. Untuk ikon berbilang saiz atau SVG, tambahkan teg pautan melalui nuxt.config.ts atau useHead() dalam 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.
Cipta pek favicon anda dengan Favicon Generator — eksport favicon.ico, favicon.svg dan apple-touch-icon.png daripada sumber 512×512. Letakkannya ke dalam folder /public projek Nuxt anda.
Nuxt 3 menyajikan segala-galanya dalam /public pada akar domain tanpa konfigurasi tambahan. Penyemak imbas meminta /favicon.ico secara lalai, jadi meletakkan fail di sana meliputi kes yang paling biasa.
Untuk kawalan eksplisit ke atas setiap variasi ikon, tambahkan teg pautan dalam nuxt.config.ts di bawah app.head.link — atau panggil useHead({ link: [...] }) dalam app.vue. Kedua-dua pendekatan menyuntik tag ke dalam setiap <head> halaman.
Selepas atur letak, buka URL pengeluaran anda dalam tetingkap peribadi dan jalankan Favicon Checker untuk mengesahkan /favicon.ico dan laluan <link rel="icon"> anda kembali 200. Ikon pembangun cache ialah sebab biasa favicon Nuxt tidak dipaparkan selepas digunakan.
Jika ikon tab berfungsi tetapi Google Search masih menunjukkan favicon kosong, sahkan halaman utama langsung anda memautkan ikon segi empat sama sekurang-kurangnya 48×48. Lihat panduan keperluan favicon Google kami untuk peraturan merangkak dan saiz.
Nuxt tidak menjana fail .ico berbilang saiz secara automatik — anda mesti membekalkannya. Gunakan sandaran PNG yang dipautkan dalam app.head untuk gesaan pemasangan PWA dan tab DPI tinggi.
Cara ia berfungsi
- 1
Generate favicon files
Use the Favicon Generator to export favicon.ico and PNG variants from a 512×512 logo.
- 2
Tambahkan pada /public
Salin favicon.ico (dan favicon.svg pilihan, apple-touch-icon.png) ke dalam folder Nuxt /public anda.
- 3
Konfigurasikan dan sahkan
Tambahkan entri app.head.link dalam nuxt.config.ts jika perlu, gunakan, kemudian jalankan Favicon Checker pada URL langsung anda.
Cuba sekarang
Generate a Nuxt-ready favicon
Penjana FaviconSoalan lazim
Bagaimanakah saya boleh menambah favicon dalam Nuxt 3?+
Letakkan favicon.ico dalam /public, kemudian tambahkan teg <link rel="icon"> dalam nuxt.config.ts di bawah app.head.link atau melalui useHead() dalam app.vue.
Ke mana perginya favicon dalam projek Nuxt?+
Direktori /public. Fail di sana disampaikan daripada akar domain anda — /public/favicon.ico tersedia di /favicon.ico.
Mengapakah favicon Nuxt saya tidak dipaparkan?+
Punca biasa: fail tidak dalam /public, laluan salah dalam app.head, cache penyemak imbas daripada dev atau menyemak localhost dan bukannya URL yang digunakan. Uji dalam tetingkap inkognito.
Perlukah saya menggunakan nuxt.config.ts atau useHead() untuk favicon?+
Sama ada berfungsi. nuxt.config.ts adalah yang terbaik untuk ikon seluruh tapak statik; useHead() dalam app.vue jika ikon bergantung pada keadaan masa jalan atau logik setiap laluan.
Bolehkah saya menggunakan favicon SVG dalam Nuxt?+
Ya — letakkan favicon.svg dalam /public dan tambah { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' } ke app.head.link.