Favicon per Vue.js
Le app Vue forniscono risorse statiche da /public (Vite) o /public (Vue CLI). Inserisci lì favicon.ico e fai riferimento ad esso in index.html: il server di sviluppo e la build di produzione lo servono nella root del sito.
Vite: inserire favicon.ico in /public/favicon.ico. Aggiungi <link rel="icon" href="/favicon.ico"> in index.html all'interno di <head>.
Per le build con hash, il livello root /favicon.ico non ottiene un hash del contenuto, ideale per richieste browser stabili.
Vue CLI utilizza la stessa convenzione public/. Sostituisci il valore public/favicon.ico predefinito con il tuo file di più dimensioni.
Aggiungi PNG e collegamenti con l'icona Apple Touch per dispositivi mobili. Mantieni i percorsi assoluti (/apple-touch-icon.png) in modo che la modalità cronologia vue-router non interrompa i percorsi nidificati.
Quando si distribuisce su Netlify o Vercel, assicurarsi che i file favicon siano inclusi nell'output dist: vengono copiati da pubblico/automaticamente.
Per vite-plugin-pwa, dichiara le icone nella sezione manifest di vite.config.ts: voci 192×192 e 512×512 PNG.
Come funziona
- 1
Copia le icone in pubblico/
favicon.ico, apple-touch-icon.png, opzionale favicon.svg.
- 2
Modifica index.html
Aggiungi i tag <link rel="icon"> e apple-touch-icon.
- 3
Costruisci e distribuisci
Conferma /favicon.ico restituisce 200 in produzione.
Provalo ora
Genera risorse icona favicon Vue
Generatore di FaviconFAQ
Perché il server di sviluppo Vue mostra il logo Vite?+
Sostituisci public/favicon.ico e riavvia il server di sviluppo.
Dove vanno le favicon SVG in Vue?+
public/favicon.svg più <link rel="icon" type="image/svg+xml" href="/favicon.svg"> in index.html.
Vue-router influisce sui percorsi delle favicon?+
Solo se usi href relativi: usa sempre root-relative / path.