Favicon per Nuxt
Nuxt fornisce file statici da /public nella root del tuo sito, quindi /public/favicon.ico diventa automaticamente /favicon.ico. Per le icone di più dimensioni o SVG, aggiungi i tag di collegamento tramite nuxt.config.ts o useHead() in 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.
Crea il tuo pacchetto favicon con Favicon Generator: esporta favicon.ico, favicon.svg e apple-touch-icon.png da una fonte 512×512. Trascinali nella cartella /public del tuo progetto Nuxt.
Nuxt 3 serve tutto in /public nella radice del dominio senza configurazioni aggiuntive. I browser richiedono /favicon.ico per impostazione predefinita, quindi posizionare il file lì copre il caso più comune.
Per un controllo esplicito su ogni variante dell'icona, aggiungi i tag link in nuxt.config.ts sotto app.head.link o chiama useHead({ link: [...] }) in app.vue. Entrambi gli approcci inseriscono tag in <head> di ogni pagina.
Dopo la distribuzione, apri l'URL di produzione in una finestra privata ed esegui Favicon Checker per confermare /favicon.ico e i percorsi <link rel="icon"> restituiscono 200. Le icone di sviluppo memorizzate nella cache sono un motivo comune per cui una favicon Nuxt non viene visualizzata dopo la distribuzione.
Se l'icona della scheda funziona ma Google Search mostra ancora una favicon vuota, verifica che la tua home page live colleghi un'icona quadrata di almeno 48×48. Consulta la nostra guida ai requisiti delle favicon di Google per le regole di scansione e dimensione.
Nuxt non genera automaticamente file .ico di più dimensioni: è necessario fornirli. Utilizza i fallback PNG collegati in app.head per le richieste di installazione di PWA e le schede con DPI elevato.
Come funziona
- 1
Generate favicon files
Use the Favicon Generator to export favicon.ico and PNG variants from a 512×512 logo.
- 2
Aggiungi a /public
Copia favicon.ico (e favicon.svg, apple-touch-icon.png facoltativo) nella cartella Nuxt /public.
- 3
Configura e verifica
Aggiungi le voci app.head.link in nuxt.config.ts se necessario, distribuisci, quindi esegui Favicon Checker sul tuo URL live.
Provalo ora
Generate a Nuxt-ready favicon
Generatore di FaviconFAQ
Come faccio ad aggiungere una favicon in Nuxt 3?+
Inserisci favicon.ico in /public, quindi, facoltativamente, aggiungi i tag <link rel="icon"> in nuxt.config.ts sotto app.head.link o tramite useHead() in app.vue.
Dove va la favicon in un progetto Nuxt?+
La directory /public. I file vengono serviti dalla radice del tuo dominio: /public/favicon.ico è disponibile su /favicon.ico.
Perché la mia favicon Nuxt non viene visualizzata?+
Cause comuni: file non in /public, percorso errato in app.head, cache del browser da dev o controllo dell'host locale anziché dell'URL distribuito. Prova in una finestra di navigazione in incognito.
Dovrei usare nuxt.config.ts o useHead() per le favicon?+
Entrambi funzionano. nuxt.config.ts è la soluzione migliore per le icone statiche a livello di sito; useHead() in app.vue se le icone dipendono dallo stato di runtime o dalla logica per percorso.
Posso utilizzare una favicon SVG in Nuxt?+
Sì: inserisci favicon.svg in /public e aggiungi {rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' } a app.head.link.