{"editorial_visual":"https://favicon.now/static/images/editorial/guides/vue-favicon.webp","implementation_artifact":{"code":"<link rel=\"icon\" href=\"/favicon.svg\" type=\"image/svg+xml\" sizes=\"any\">\n<link rel=\"icon\" href=\"/favicon.ico\" sizes=\"any\">\n<link rel=\"apple-touch-icon\" href=\"/apple-touch-icon.png\">\n<link rel=\"manifest\" href=\"/site.webmanifest\">","heading":"Vue and Vite production file map","intro":"The browser URL never includes the public directory name. This example pairs the copied root assets with the index document that declares them.","language":"html","tree":"public/\n\u251c\u2500\u2500 favicon.svg\n\u251c\u2500\u2500 favicon.ico\n\u251c\u2500\u2500 apple-touch-icon.png\n\u2514\u2500\u2500 site.webmanifest\nindex.html\nvite.config.ts"},"published":"2026-07-31","section_headings":["Project paths and constraints","Declare favicon metadata once","Build, deploy, and verify","Prove the Vite build copied each candidate","Vite base paths and multi-page builds"],"sources":[{"label":"Vite static asset handling","url":"https://vite.dev/guide/assets.html#the-public-directory"}],"title":"How to Add a Favicon in Vue and Vite","updated":"2026-07-31","url":"https://favicon.now/guides/vue-favicon"}