Favicon per Nuxt
Nuxt 3 serve file statici da /public nella root del sito. Configura i tag <link> in nuxt.config.ts in app.head.link per una configurazione favicon centralizzata e compatibile con SSR.
Posiziona favicon.ico in pubblico/favicon.ico: Nuxt lo pubblica automaticamente senza configurazioni aggiuntive.
In nuxt.config.ts, estendi app.head.link con voci di icone: { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' }.
Utilizza useHead() in un layout solo quando le icone variano in base al percorso: la maggior parte dei siti imposta le icone globali una volta in nuxt.config.
Per i moduli @nuxtjs/seo o di configurazione del sito, segui il campo favicon se presente: racchiude gli stessi tag di collegamento.
Nuxt L'immagine non elabora le favicon; carica le dimensioni finali su public/.
Quando si utilizza l'hosting statico preimpostato Nitro, verificare che i percorsi delle favicon esistano in .output/public dopo la generazione di nuxi.
Come funziona
- 1
Aggiungi file a public/
Dimensioni favicon.ico, PNG, SVG opzionale.
- 2
Configura app.head.link
Centralizza i collegamenti delle icone in nuxt.config.ts.
- 3
Genera e controlla HTML
Visualizza l'origine su una pagina distribuita per i tag corretti.
Provalo ora
Costruisci il tuo pacchetto di icone Nuxt
Generatore pacchetto faviconFAQ
Nuxt mostra ancora l'icona predefinita: perché?+
Svuota la cache .nuxt, sostituisci public/favicon.ico e riavvia il server di sviluppo.
Come faccio ad aggiungere l'icona del tocco di Apple in Nuxt 3?+
Aggiungi {rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' } ad app.head.link.
SSR duplica i tag favicon?+
Evitare di definire lo stesso collegamento sia in nuxt.config che in una chiamata useHead a livello di pagina.