How to Change the Favicon in Lovable (and Why It Won't Update)
Replace the default Lovable favicon in minutes, fix the cache and path problems that keep the old icon on screen, and cover iOS, Android and Google Search.
You uploaded a new favicon, published, and the browser tab still shows the old icon. The file is usually fine. What sits between the file and the browser is not. A favicon is the small square image in the browser tab, in bookmarks, and next to your site name in Google results. Below is the fix first, then the reasons it sticks. Favicons are one item on the wider Lovable SEO checklist.
The quick fix: change the Lovable favicon
Open your project's index.html in Lovable's code view. It ships with one icon link. Replace it with the full set.
Before:
<!-- index.html --><head><link rel="icon" type="image/x-icon" href="/favicon.ico" /></head>
After:
<!-- index.html --><head><link rel="icon" href="/favicon.ico" sizes="any" /><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" /><meta name="theme-color" content="#111111" /></head>
The image files go in /public, not /src. Publish, then open the site in a private window. If the old icon is still there, read the next section.
Why your Lovable favicon is not changing
Six causes, in the order you should check them.
Browser cache. Browsers cache favicons harder than pages, and they keep that cache separate from the page cache. A normal reload will not touch it. Open a private window, or type yourdomain.com/favicon.ico straight into the address bar and see which image comes back. That request skips the page entirely, so it tells you what the server actually holds.
The file is in /src. Only /public is copied to the root of the published site. A file at /public/favicon.ico is served at yourdomain.com/favicon.ico. A file at /src/assets/favicon.ico is served at a hashed build path, or not at all if nothing imports it. Lovable's agent sometimes drops uploads into /src. Move them.
Path mismatch. href="favicon.ico" without the leading slash is relative to the current URL. On /blog/my-post the browser asks for /blog/favicon.ico and gets your app's fallback HTML instead of an image. Always use a leading slash.
Wrong file type for the name. A PNG renamed to favicon.ico is still a PNG. Browsers read the bytes, not the extension, and some of them refuse it. Either export a real .ico from a generator, or keep the PNG and declare it honestly with type="image/png".
No apple-touch-icon. iOS ignores favicon.ico. Without a 180x180 PNG declared as apple-touch-icon, a home screen shortcut gets a screenshot of the page.
No web manifest. Android Chrome reads its home screen and install icons from site.webmanifest. No manifest, no icon, however many link rel="icon" tags are in the head.
The fastest way to tell a cache problem from a code problem: load /favicon.ico directly. Old icon on the direct URL means the file was never replaced. New icon there but old icon in the tab means it is your browser.
Method 1: upload the icon in Lovable's Publish settings
Lovable has a field for this. Click Publish, open website metadata, and upload a square image to the site icon field. Publish again.
This is the fastest route and it is enough if all you want is a correct browser tab.
What it does not do: it does not generate the 180x180 apple touch icon, it does not generate the 192 and 512 Android sizes, and it does not write a site.webmanifest. So the tab looks right on a laptop while an iPhone home screen shortcut and an Android install prompt still show a generic icon. If you care about those, do Method 2 as well, or instead.
Method 2: generate the full set and wire it up yourself
Step 1. Generate the files. Upload your logo or brand mark to favicon.io. It is free and it returns every size in one download.
| File | Size | Used by |
|---|---|---|
favicon.ico |
32x32 with a 16x16 inside | Browser tabs, universal fallback |
favicon-16x16.png |
16x16 | Standard tabs |
favicon-32x32.png |
32x32 | Retina tabs, Windows taskbar |
apple-touch-icon.png |
180x180 | iOS home screen |
android-chrome-192x192.png |
192x192 | Android home screen |
android-chrome-512x512.png |
512x512 | Install prompts and splash screens |
site.webmanifest |
text file | Tells Android which icons to use |
Use ICO for the fallback and PNG for everything else. Never JPEG: it has no transparency and it smears at 16 pixels.
Step 2. Put them in /public. Drag all seven files into the /public folder in Lovable's code view. Keep the file names the generator gave you so the tags below match.
Step 3. Link them. On a Vite project, that is the index.html block from the quick fix above. On a TanStack Start project, index.html is not where the head is built. Icons belong in the root route's head export:
// src/routes/__root.tsxexport const Route = createRootRoute({head: () => ({links: [{ rel: "icon", href: "/favicon.ico", sizes: "any" },{ rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32x32.png" },{ rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" },{ rel: "manifest", href: "/site.webmanifest" },],meta: [{ name: "theme-color", content: "#111111" }],}),});
Not sure which of the two you are on? View source on your live site. An empty div id="root" and no page text means Vite. Page content in the HTML, plus src/router.tsx and routeTree.gen.ts in the file tree, means TanStack Start. The Lovable SSR explainer covers the difference and how each stack builds its head.
Step 4. Or let the agent do it. Paste this after the files are in /public:
I added favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png,android-chrome-192x192.png, android-chrome-512x512.png and site.webmanifest to /public.Link all of them from the document head with absolute paths, add a theme-color meta tag,and delete every existing favicon link that points at an old file.Keep the files in /public and do not rename them.
Read the diff before you accept it. The common mistake the agent makes is copying the files into /src and linking the imported path.
Remove the Lovable favicon and the "Made with Lovable" badge
These are two separate things and they come off in two different ways.
The default favicon is a file in your project. Deleting the link rel="icon" tag does not remove it, because browsers request /favicon.ico on their own whether or not a tag exists. Overwrite /public/favicon.ico with your own icon. That is the removal.
The "Made with Lovable" badge is the small floating link on a published site. It is a project setting, not code, so prompting the agent to delete it from the markup does not hold. Open project settings and turn the badge off. The toggle is available on paid plans.
Lovable favicon on iOS and Android
apple-touch-icon.png at 180x180 covers every current iPhone and iPad. Give it a filled background rather than transparency, since iOS draws the icon on a solid tile and a transparent PNG lands on black. One size is enough; the older per-device list is no longer worth maintaining.
Android reads the manifest. A minimal one:
{"name": "Your Site Name","short_name": "YourSite","icons": [{"src": "/android-chrome-192x192.png","sizes": "192x192","type": "image/png"},{"src": "/android-chrome-512x512.png","sizes": "512x512","type": "image/png"}],"theme_color": "#111111","background_color": "#ffffff","display": "standalone"}
Save it as /public/site.webmanifest and link it from the head. theme_color in the manifest and the theme-color meta tag do different jobs: the manifest colors the installed app, the meta tag colors the browser chrome on a normal visit. Set both to the same value.
Getting the new favicon into Google Search
Google shows a favicon next to your site name on mobile results, and it has its own rules.
The icon must be square and a multiple of 48x48, so 48, 96, 144 or 192 pixels. A 32x32 file is fine for the tab and will not be used by Google. It must be reachable by Googlebot, so do not block the icon path in robots.txt. Google reads the favicon from your homepage and uses it for the whole site, so the homepage head is the one that matters.
Google refreshes favicons on its own crawl schedule, which runs to weeks rather than days. To shorten the wait, open Search Console, run URL Inspection on your homepage, and click Request Indexing. That queues a recrawl. It does not guarantee the new icon appears on the next crawl.
Verify the new favicon is live
Four checks, in order. Each one rules out a different cause.
- Private window. Loads the site with no favicon cache. If the new icon shows here and not in your normal window, you are done and your browser is behind.
- Hard refresh. Cmd+Shift+R on macOS, Ctrl+F5 on Windows, in a normal window.
- Direct file. Load
yourdomain.com/favicon.icoandyourdomain.com/apple-touch-icon.png. Both must return an image. A page of HTML back means the file is not in/publicor the deploy did not include it. - View source, not Inspect. Right click, View Source, and search for
rel="icon". Inspect Element shows the page after JavaScript has run, which hides whether the tag was in the server's response. Or run the free meta tag audit and read the icon tags it found. The crawler simulator does the same from a specific bot's point of view.
One thing to keep in mind on a client-rendered project: if the icon tags are injected by JavaScript instead of sitting in index.html, they are not in the HTML a crawler receives. Keep them in index.html or the root route head so they arrive in the first response. Encited pre-renders Lovable pages so crawlers get the finished HTML, head tags included.
Frequently asked questions
Why is my Lovable favicon not changing?
Almost always browser cache, or the image sitting in /src instead of /public. Check the cache first by loading yourdomain.com/favicon.ico in a private window. If the old icon comes back on that direct URL, the file was never replaced. If the new icon comes back but your tab still shows the old one, your browser is holding it.
Where does the favicon file go in a Lovable project?
/public. Files in that folder are published at the root of your domain, so /public/favicon.ico becomes yourdomain.com/favicon.ico. Files in /src are build assets with hashed names and are not reachable at a predictable path.
How do I remove the Lovable badge?
The "Made with Lovable" badge is a project setting, not part of your code. Open project settings and switch it off. The toggle is available on paid plans. Removing it is unrelated to the favicon, and prompting the agent to delete the badge from the markup will not stick.
Does the Publish UI favicon work on TanStack projects?
Yes for the browser tab icon. It is the head that differs between the two stacks, not the upload. What the upload does not do on either stack is generate the 180x180 apple touch icon, the 192 and 512 Android sizes, or a site.webmanifest. On a TanStack Start project, add those yourself in the root route's head export rather than in index.html. See the SSR explainer for how to tell which stack you are on.
Why does my favicon work on desktop but not on my iPhone?
iOS does not use favicon.ico. It looks for a link rel="apple-touch-icon" pointing at a 180x180 PNG. Add that file to /public, link it in the head, then delete and re-add the home screen shortcut, because iOS caches the old one.
How long does Google take to update my favicon?
Weeks, not days, if you wait for the normal crawl. Google reads the favicon from your homepage, on its own schedule.
You can shorten that. Once the new icon is live, open Search Console, put your homepage URL into URL Inspection, and click Request Indexing. That queues a recrawl of the homepage instead of waiting for Google to come back on its own, and the favicon is picked up with it. Inspect the live URL first and confirm the new icon is in the response, because requesting a recrawl of a page that still serves the old one just re-confirms the old one.
Make sure the icon is square and a multiple of 48x48, or Google will skip it whatever you do.
Get your pages indexed faster
See the live index status of every URL, the on-page issues holding each one back, and request indexing in one click. 14-day free trial, no credit card.
Can I use an SVG favicon?
Yes, as an addition. Modern browsers accept link rel="icon" type="image/svg+xml", and an SVG scales to any size and can switch colors in dark mode. Support is not universal, and Google does not use it for search results, so keep favicon.ico and the PNG sizes alongside it.
Do I need a site.webmanifest?
Only for Android home screen icons, install prompts and progressive web app behavior. Browser tabs work from the link rel="icon" tags alone. If you are only fixing the tab icon, skip the manifest; if anyone will add your site to an Android home screen, add it.
