{"editorial_visual":"https://favicon.now/static/images/editorial/guides/react-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":"Vite public files and document metadata","intro":"The public directory preserves stable names while index.html makes the favicon discoverable before React mounts. Recheck URLs when Vite base points below the hostname root.","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"},"published":"2026-07-31","section_headings":["Vite and client-rendered React","Create React App","Production checks","Keep favicon discovery outside the component tree","Account for Vite base paths"],"sources":[{"label":"Vite public directory","url":"https://vite.dev/guide/assets.html#the-public-directory"}],"title":"How to Add a Favicon to React and Vite","updated":"2026-07-31","url":"https://favicon.now/guides/react-favicon"}