Favicon pentru Vue.js
Aplicațiile Vue livrează active statice din /public (Vite) sau /public (Vue CLI). Plasați favicon.ico acolo și trimiteți-l în index.html — serverul de dezvoltare și versiunea de producție îl servesc la rădăcina site-ului.
Vite: pune favicon.ico în /public/favicon.ico. Adăugați <link rel="icon" href="/favicon.ico"> în index.html în <head>.
Pentru versiunile hash, /favicon.ico la nivel de rădăcină nu primește un hash de conținut - ideal pentru solicitările stabile ale browserului.
Vue CLI folosește aceeași convenție publică. Înlocuiește public/favicon.ico implicit cu fișierul tău cu dimensiuni multiple.
Adăugați linkuri PNG și pictogramă Apple Touch pentru mobil. Păstrați căile absolute (/apple-touch-icon.png) astfel încât modul istoric vue-router să nu rupă rutele imbricate.
Când implementați în Netlify sau Vercel, asigurați-vă că fișierele favicon sunt incluse în ieșirea dist - acestea se copiază din public/automat.
Pentru vite-plugin-pwa, declarați pictograme în secțiunea manifest a vite.config.ts — intrări 192×192 și 512×512 PNG.
Cum funcționează
- 1
Copiați pictogramele în public/
favicon.ico, apple-touch-icon.png, opțional favicon.svg.
- 2
Editați index.html
Adăugați etichete <link rel="icon"> și apple-touch-icon.
- 3
Construiți și implementați
Confirmați că /favicon.ico returnează 200 la producție.
Încearcă acum
Generați elemente favicon Vue
Generator de FaviconÎntrebări frecvente
De ce serverul de dezvoltare Vue arată sigla Vite?+
Înlocuiți public/favicon.ico și reporniți serverul de dezvoltare.
Unde merg favicon-urile SVG în Vue?+
public/favicon.svg plus <link rel="icon" type="image/svg+xml" href="/favicon.svg"> în index.html.
Vue-router afectează căile favicon?+
Numai dacă utilizați hrefs relative — folosiți întotdeauna căile/rădăcina relativă.