To add or change a favicon in Lovable, the easiest method is using the Publish UI: click Publish (top-right) and upload your icon in the website metadata section. For full control, place favicon files in your /public folder via GitHub or Dev Mode, then update index.html with the correct link tags. Always test in an incognito window because browsers aggressively cache favicons.
Why your Lovable favicon is not changing or showing
Lovable projects ship with a default Lovable favicon. When you try to replace it, you often still see the old icon. This happens because browsers cache favicons more aggressively than any other asset. Even after uploading new icon files, your browser keeps showing the cached version until you force a refresh or test in incognito mode. Another common issue is that Lovable is a browser-based editor with no terminal access. Many favicon tutorials tell you to use CLI tools to convert images or run npm scripts, but those commands do not work inside Lovable. Favicon files are binary assets (PNG, ICO, SVG) that Lovable's AI cannot generate from code alone — you need to create them externally and upload them manually. Finally, the file paths matter. If your index.html references /favicon.ico but the file is actually at /public/favicon.ico, the browser silently fails and falls back to the default icon. Lovable's Vite-based build serves files from /public at the root, so the file must be in the right place.
- Browser caching — your browser remembers the old favicon and ignores the new one
- File not in /public folder — Vite serves static assets from /public, not from src/
- Path mismatch in index.html — the href in your link tag does not match where the file actually lives
- Wrong file format or MIME type — .ico files need image/x-icon, .png needs image/png
- Missing Apple Touch Icon — iOS devices need a separate 180x180 PNG with a specific link tag
- Missing web manifest — Android devices use manifest.json for home screen icons
Error messages you might see
GET /favicon.ico 404 (Not Found)The browser is looking for favicon.ico at the root of your site, but the file does not exist there. Place your favicon.ico file in the /public folder of your Lovable project.
Resource interpreted as Image but transferred with MIME type text/htmlYour server is returning an HTML page (likely a 404 page) instead of the actual favicon image. This usually means the favicon file path is wrong or the file was not included in the build.
Refused to apply style from favicon because its MIME type ('image/x-icon') is not a supported stylesheet MIME typeThis is a harmless browser warning that sometimes appears in the console. It does not affect your favicon. The browser is briefly confused about the file type but will display the icon correctly.
Before you start
- A Lovable project open in the editor
- Your favicon image ready (at least 512x512 pixels, PNG or SVG format)
- Access to favicon.io or another favicon generator to create all required sizes
How to fix it
Upload a favicon using Lovable's Publish UI (easiest method)
Lovable's publish flow has a built-in favicon upload — no code changes needed
Upload a favicon using Lovable's Publish UI (easiest method)
Lovable's publish flow has a built-in favicon upload — no code changes needed
Click the Publish icon in the top-right corner of the Lovable editor. In the publish configuration panel, look for the website metadata section. You will see fields for site title, meta description, OG image, and a favicon/site icon upload. Click the favicon upload area and select your image (PNG or SVG, at least 180x180 pixels). Lovable will use this as your site icon across browsers. Click Publish or Update to deploy with the new favicon. This is the fastest method and works for most use cases.
Expected result: Your custom favicon appears on the published site tab. Verify by opening the published URL in an incognito window.
Generate all favicon sizes using favicon.io
Different browsers and devices require different icon sizes and formats
Generate all favicon sizes using favicon.io
Different browsers and devices require different icon sizes and formats
For full cross-browser and cross-device support, you need multiple icon sizes. Go to favicon.io in your browser, upload your source image (PNG or SVG, 512x512 or larger), and download the generated package. This gives you favicon.ico (multi-size), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180x180), android-chrome-192x192.png, android-chrome-512x512.png, and site.webmanifest. Unzip the downloaded package — you will need all these files in the next step.
Expected result: A folder on your computer containing favicon.ico, multiple PNG files at different sizes, and a site.webmanifest file.
Add favicon files to your Lovable project's /public folder
Vite serves files from /public at the site root, so favicons must be placed here
Add favicon files to your Lovable project's /public folder
Vite serves files from /public at the site root, so favicons must be placed here
Open your Lovable project's code via GitHub (if connected) or Dev Mode (paid plans). Navigate to the /public folder. Upload all the favicon files from the previous step: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, and site.webmanifest. If using GitHub, commit and push the files — they will sync back to Lovable automatically. If using Dev Mode, drag and drop the files into the /public directory.
Expected result: All favicon files visible in your project's /public folder in Dev Mode or GitHub.
Update index.html with the correct link tags
The HTML head must reference every favicon file for browsers and devices to find them
Update index.html with the correct link tags
The HTML head must reference every favicon file for browsers and devices to find them
Open index.html in your project root (not inside /src). Find the existing favicon link tag (if any) and replace it with the full set of link tags. Make sure the href paths start with / (root-relative) since Vite serves /public contents at the root. If you prefer, prompt Lovable in Agent Mode: 'Replace the current favicon with the new favicon files I added to the /public folder. Update the HTML head in index.html to include favicon.ico, apple-touch-icon.png, and all size variants. Also update site.webmanifest with the correct icon paths.'
<link rel="icon" type="image/svg+xml" href="/vite.svg" /><link rel="icon" type="image/x-icon" href="/favicon.ico" /><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /><link rel="manifest" href="/site.webmanifest" />Expected result: No 404 errors for favicon files in the browser console. The browser tab shows your custom icon.
Clear cache and verify in an incognito window
Browsers cache favicons for days or weeks — you must bypass the cache to see changes
Clear cache and verify in an incognito window
Browsers cache favicons for days or weeks — you must bypass the cache to see changes
Open a new incognito/private browser window (Ctrl+Shift+N in Chrome, Cmd+Shift+N on Mac). Navigate to your published Lovable app URL. Check that the browser tab shows your new favicon, not the default Lovable icon. Also check on a mobile device by adding the site to your home screen — the apple-touch-icon should appear as the app icon. If the old favicon still shows in your regular browser, try: hard refresh with Ctrl+Shift+R, or clear the browser cache for the specific site.
Expected result: Your custom favicon visible in the incognito browser tab, on mobile home screen, and eventually in Google Search results (Google recrawls favicons every few weeks).
Complete code example
1<!DOCTYPE html>2<html lang="en">3 <head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />6 <title>My Lovable App</title>78 <!-- Favicon: standard browser icon -->9 <link rel="icon" type="image/x-icon" href="/favicon.ico" />1011 <!-- Favicon: modern browsers (PNG, multiple sizes) -->12 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />13 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />1415 <!-- Apple Touch Icon: iOS home screen -->16 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />1718 <!-- Web App Manifest: Android home screen + PWA -->19 <link rel="manifest" href="/site.webmanifest" />2021 <!-- Theme color for mobile browsers -->22 <meta name="theme-color" content="#ffffff" />23 </head>24 <body>25 <div id="root"></div>26 <script type="module" src="/src/main.tsx"></script>27 </body>28</html>Best practices to prevent this
- Always use the Publish UI favicon upload first — it is the simplest method and handles most cases automatically
- Generate all sizes at once using favicon.io — never manually resize favicons, the tool handles ICO multi-size packing
- Place favicon files in /public, never in /src — Vite serves /public contents at the root URL
- Use root-relative paths in link tags (href="/favicon.ico" not href="favicon.ico") to avoid path issues on nested routes
- Test in an incognito window every time — your regular browser will show the cached old icon for hours or days
- For Google Search, use icon sizes that are multiples of 48x48 pixels — Google requires this specific sizing
- Include an apple-touch-icon (180x180 PNG) for iOS devices — without it, iOS shows a screenshot thumbnail instead
- Keep a site.webmanifest file with correct icon paths for Android home screen icons and PWA support
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I have a Lovable (lovable.dev) project and I need to replace the default favicon with my own custom icon. My project uses Vite + React + TypeScript. Here is my current index.html head section: [paste your index.html head here] I have uploaded these files to the /public folder: - favicon.ico - favicon-16x16.png - favicon-32x32.png - apple-touch-icon.png - android-chrome-192x192.png - android-chrome-512x512.png - site.webmanifest Please: 1. Show me the exact link tags to add to my index.html head 2. Show me the correct site.webmanifest content 3. Explain how to clear the favicon cache so I can see the changes 4. Tell me if I need to change anything in vite.config.ts
Replace the current favicon with my custom favicon files. I have added these files to the /public folder: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, and site.webmanifest. Update index.html to include all the correct link tags for the favicon, apple touch icon, and web manifest. Make sure all href paths start with / since the files are in /public. Do not modify any other files.
Frequently asked questions
How do I change the favicon in Lovable?
The easiest way is through Lovable's Publish UI: click the Publish icon (top-right), then upload your icon in the website metadata section. For full control over all icon sizes, upload favicon files to your /public folder via GitHub or Dev Mode, then update the link tags in index.html.
How do I remove the Lovable favicon from my app?
Replace it with your own icon using the Publish UI (upload your favicon during the publish flow) or manually replace the favicon files in /public and update index.html. The default Lovable branding favicon is replaced once you provide your own icon through either method.
Why is my Lovable favicon not updating after I changed it?
Browser caching is almost always the reason. Browsers cache favicons much more aggressively than other files. Open an incognito/private window to test immediately. In your regular browser, try a hard refresh (Ctrl+Shift+R) or clear the browser cache for the specific site.
Where do I put favicon files in a Lovable project?
Place all favicon files in the /public folder at the root of your project. Lovable uses Vite, which serves everything in /public at the site root URL. So /public/favicon.ico becomes available at yourdomain.com/favicon.ico automatically.
What favicon sizes do I need for Lovable?
For full cross-browser support you need: favicon.ico (16x16 and 32x32 multi-size), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180x180 for iOS), and android-chrome icons (192x192 and 512x512 for Android). Use favicon.io to generate all sizes from one image.
Does Lovable support favicon upload without coding?
Yes. Since early 2026, Lovable's Publish UI includes a website metadata section where you can upload a site icon (favicon) directly during the publishing flow. This is the simplest method and requires no code changes.
How long does it take for Google to show my new favicon?
Google recrawls favicons independently of page content, typically every few weeks. Your favicon must be a multiple of 48x48 pixels for Google to use it. There is no way to force Google to update faster — just ensure the favicon is correctly served and wait.
What if I can't get the favicon working myself?
If the favicon involves custom build configurations, manifest.json issues, or conflicts with your deployment pipeline, RapidDev's engineers can handle it. They have solved favicon and asset issues across 600+ Lovable projects and can typically fix it in one session.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your issue.
Book a free consultation