Favicon voor Vue.js
Vue-apps verzenden statische middelen vanuit /public (Vite) of /public (Vue CLI). Plaats favicon.ico daar en verwijs ernaar in index.html – de dev-server en productiebuild serveren het in de hoofdmap van de site.
Vite: plaats favicon.ico in /public/favicon.ico. Voeg <link rel="icon" href="/favicon.ico"> toe in index.html binnen <head>.
Voor gehashte builds krijgt /favicon.ico op rootniveau geen inhoudshash – ideaal voor stabiele browserverzoeken.
Vue CLI gebruikt dezelfde public/conventie. Vervang de standaard public/favicon.ico door uw bestand met meerdere formaten.
Voeg PNG en Apple-Touch-icon-links toe voor mobiel. Houd paden absoluut (/apple-touch-icon.png), zodat de geschiedenismodus van de vue-router geneste routes niet verbreekt.
Wanneer u implementeert naar Netlify of Vercel, zorg er dan voor dat favicon-bestanden worden opgenomen in de dist-uitvoer; ze kopiëren automatisch van openbaar/automatisch.
Voor vite-plugin-pwa declareert u pictogrammen in de manifestsectie van vite.config.ts: 192×192 en 512×512 PNG-items.
Hoe het werkt
- 1
Pictogrammen kopiëren naar openbaar/
favicon.ico, apple-touch-icon.png, optioneel favicon.svg.
- 2
Bewerk index.html
Voeg <link rel="icon">- en apple-touch-icon-tags toe.
- 3
Bouwen en implementeren
Bevestig dat /favicon.ico 200 retourneert bij productie.
Probeer het nu
Genereer Vue favicon-items
Favicon-generatorVeelgestelde vragen
Waarom toont de Vue-ontwikkelaarsserver het Vite-logo?+
Vervang public/favicon.ico en start de ontwikkelaarsserver opnieuw op.
Waar gaan SVG-favicons naar Vue?+
public/favicon.svg plus <link rel="icon" type="image/svg+xml" href="/favicon.svg"> in index.html.
Heeft vue-router invloed op favicon-paden?+
Alleen als je relatieve hrefs gebruikt – gebruik altijd root-relative / paths.