--- title: "How to Change the Favicon in Lovable (and Why It Won't Update) | Encited Blog" description: "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." lang: en json-ld: | [ { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": " https://encited.com/" }, { "@type": "ListItem", "position": 2, "name": "Blog", "item": " https://encited.com/blog" }, { "@type": "ListItem", "position": 3, "name": "How to Change the Favicon in Lovable (and Why It Won't Update)", "item": " https://encited.com/blog/lovable-favicon" } ] }, { "@context": "https://schema.org", "@type": "TechArticle", "headline": "How to Change the Favicon in Lovable (and Why It Won't Update)", "description": "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.", "image": " https://encited.com/blog/thumbnails/lovable-favicon.webp", "datePublished": "2026-09-16", "dateModified": "2026-09-16", "author": { "@type": "Person", "name": "Aki from Encited" }, "publisher": { "@type": "Organization", "name": "Encited.com", "alternateName": "LovableHTML.com", "logo": { "@type": "ImageObject", "url": "https://encited.com/brand/logo.svg" } }, "mainEntityOfPage": { "@type": "WebPage", "@id": " https://encited.com/blog/lovable-favicon" } }, { "@context": "https://schema.org", "@type": "HowTo", "name": "How to change the favicon in Lovable", "description": "Replace the default Lovable favicon with a full icon set covering browser tabs, iOS, Android and Google Search.", "totalTime": "PT15M", "tool": [ { "@type": "HowToTool", "name": "Lovable project" }, { "@type": "HowToTool", "name": "favicon.io generator" }, { "@type": "HowToTool", "name": "Google Search Console" } ], "step": [ { "@type": "HowToStep", "name": "Generate the icon set", "text": "Upload your logo to favicon.io and download the package. It returns favicon.ico, 16x16 and 32x32 PNGs, a 180x180 apple-touch-icon, 192x192 and 512x512 Android icons, and a site.webmanifest." }, { "@type": "HowToStep", "name": "Add the files to the public folder", "text": "In Lovable's code view, drop every generated file into /public. Files in /public are published at the root of your domain. Files in /src are build assets and are not reachable at a fixed path." }, { "@type": "HowToStep", "name": "Link the icons from the document head", "text": "On a Vite project, replace the single icon link in index.html with links for favicon.ico, the PNG sizes, apple-touch-icon, the manifest and a theme-color meta tag. On a TanStack Start project, add the same links to the head export of the root route instead." }, { "@type": "HowToStep", "name": "Publish and clear the favicon cache", "text": "Publish the project, then open the site in a private window. Load /favicon.ico directly in the address bar to confirm the server is serving the new file rather than the old one." }, { "@type": "HowToStep", "name": "Request a recrawl in Google Search Console", "text": "Google reads the favicon from your homepage and needs an icon that is square and a multiple of 48x48. Run URL Inspection on the homepage and click Request Indexing to queue a recrawl." } ] }, { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "Why is my Lovable favicon not changing?", "acceptedAnswer": { "@type": "Answer", "text": "Almost always browser cache, or the image sitting in /src instead of /public. Load 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 the tab still shows the old one, your browser is holding it." } }, { "@type": "Question", "name": "Where does the favicon file go in a Lovable project?", "acceptedAnswer": { "@type": "Answer", "text": "In /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." } }, { "@type": "Question", "name": "How do I remove the Lovable badge?", "acceptedAnswer": { "@type": "Answer", "text": "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. It is unrelated to the favicon, and prompting the agent to delete the badge from the markup will not stick." } }, { "@type": "Question", "name": "Does the Publish UI favicon work on TanStack projects?", "acceptedAnswer": { "@type": "Answer", "text": "Yes for the browser tab icon. The head is built differently on the two stacks, but the upload itself works on both. What it does not do on either stack is generate the 180x180 apple touch icon, the 192 and 512 Android sizes, or a site.webmanifest. On TanStack Start, add those in the root route's head export rather than in index.html." } }, { "@type": "Question", "name": "Why does my favicon work on desktop but not on my iPhone?", "acceptedAnswer": { "@type": "Answer", "text": "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." } }, { "@type": "Question", "name": "How long does Google take to update my favicon?", "acceptedAnswer": { "@type": "Answer", "text": "Weeks rather than days if you wait for the normal crawl. To speed it up, open Search Console once the new icon is live, put your homepage URL into URL Inspection and click Request Indexing. That queues a recrawl and the favicon is picked up with it. Inspect the live URL first to confirm the new icon is in the response. The icon must be square and a multiple of 48x48 or Google will skip it." } }, { "@type": "Question", "name": "Can I use an SVG favicon?", "acceptedAnswer": { "@type": "Answer", "text": "Yes, as an addition. Modern browsers accept link rel=icon with 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." } }, { "@type": "Question", "name": "Do I need a site.webmanifest?", "acceptedAnswer": { "@type": "Answer", "text": "Only for Android home screen icons, install prompts and progressive web app behavior. Browser tabs work from the link rel=icon tags alone. If anyone will add your site to an Android home screen, add the manifest." } } ] } ] --- [![Encited logo](/brand/logo.svg)](/) - Features - Resources [Pricing](/pricing)Login[Contact Sales](/contact-sales)Get started free Get started free ![How to Change the Favicon in Lovable (and Why It Won't Update)](/blog/thumbnails/lovable-favicon.webp) # How to Change the Favicon in Lovable (and Why It Won't Update) September 16, 2026 · by Aki from Encited 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. ![](/logos/chatgpt.svg)Open in ChatGPT Table of contents 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](/blog/fix-lovable-seo). ## [](#the-quick-fix-change-the-lovable-favicon)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: html Copy Download < head \> < link rel \= " icon " type \= " image/x-icon " href \= " /favicon.ico " /> After: html Copy Download < 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 " /> 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)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-lovables-publish-settings)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)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](https://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: tsx Copy Download // src/routes/\_\_root.tsx export 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](/blog/lovable-seo-update) 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`: text Copy Download 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)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)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: json Copy Download { "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" } See full code 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)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)Verify the new favicon is live Four checks, in order. Each one rules out a different cause. 1. **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. 2. **Hard refresh.** Cmd+Shift+R on macOS, Ctrl+F5 on Windows, in a normal window. 3. **Direct file.** Load `yourdomain.com/favicon.ico` and `yourdomain.com/apple-touch-icon.png`. Both must return an image. A page of HTML back means the file is not in `/public` or the deploy did not include it. 4. **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](/free-tools/meta-tag-audit) and read the icon tags it found. The [crawler simulator](/free-tools/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](/prerender-lovable) pre-renders Lovable pages so crawlers get the finished HTML, head tags included. ## [](#frequently-asked-questions)Frequently asked questions ### [](#why-is-my-lovable-favicon-not-changing)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)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)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)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](/blog/lovable-seo-update) for how to tell which stack you are on. ### [](#why-does-my-favicon-work-on-desktop-but-not-on-my-iphone)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)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. [Book a demo](/book-a-demo?utm_source=blog-lovable-favicon&utm_content=promo-demo)[See how it works](/get-indexed-faster?utm_source=blog-lovable-favicon&utm_content=faq-indexing) ### [](#can-i-use-an-svg-favicon)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-sitewebmanifest)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. ![](/logos/chatgpt.svg)Open in ChatGPT On this page - [The quick fix: change the Lovable favicon](#the-quick-fix-change-the-lovable-favicon) - [Why your Lovable favicon is not changing](#why-your-lovable-favicon-is-not-changing) - [Method 1: upload the icon in Lovable's Publish settings](#method-1-upload-the-icon-in-lovables-publish-settings) - [Method 2: generate the full set and wire it up yourself](#method-2-generate-the-full-set-and-wire-it-up-yourself) - [Remove the Lovable favicon and the "Made with Lovable" badge](#remove-the-lovable-favicon-and-the-made-with-lovable-badge) - [Lovable favicon on iOS and Android](#lovable-favicon-on-ios-and-android) - [Getting the new favicon into Google Search](#getting-the-new-favicon-into-google-search) - [Verify the new favicon is live](#verify-the-new-favicon-is-live) - [Frequently asked questions](#frequently-asked-questions) - [Why is my Lovable favicon not changing?](#why-is-my-lovable-favicon-not-changing) - [Where does the favicon file go in a Lovable project?](#where-does-the-favicon-file-go-in-a-lovable-project) - [How do I remove the Lovable badge?](#how-do-i-remove-the-lovable-badge) - [Does the Publish UI favicon work on TanStack projects?](#does-the-publish-ui-favicon-work-on-tanstack-projects) - [Why does my favicon work on desktop but not on my iPhone?](#why-does-my-favicon-work-on-desktop-but-not-on-my-iphone) - [How long does Google take to update my favicon?](#how-long-does-google-take-to-update-my-favicon) - [Can I use an SVG favicon?](#can-i-use-an-svg-favicon) - [Do I need a site.webmanifest?](#do-i-need-a-sitewebmanifest) ![Gemini](/crawler-logos/gemini.png) ![ChatGPT](/crawler-logos/chatgpt.svg) ![Claude](/crawler-logos/claude.svg) ![Bing](/crawler-logos/bing.svg) ![DeepSeek](/crawler-logos/deepseek.svg) ![Perplexity](/crawler-logos/perplexity.png) ## Get discovered anywhere search happens Readable, citable, outranking pages. [Book a demo](/book-a-demo)[Get started](/?authModal=true) ![Encited logo](/brand/logo.svg) Follow us: [](https://www.facebook.com/lovablehtml/)[](https://linkedin.com/company/lovablehtml) [LaunchFast.shop](https://launchfast.shop) product ❤︎ ### Product - [Track Brand Visibility](/ai-visibility-tracker) - [Create Content](/create-content) - [Get Indexed Faster](/get-indexed-faster) - [Site Audit](/site-audit) - [Pre-rendering](/prerender) - [Encited MCP](/seo-mcp) ### Free SEO Tools - [Free SEO & AEO Audit](/free-tools/seo-audit) - [Crawler Simulator](/free-tools/crawler-simulator) - [Robots.txt Analyzer](/free-tools/robots-txt-analyzer) - [OG Image Previewer](/free-tools/og-image-previewer) - [Meta Tag Audit](/free-tools/meta-tag-audit) ### Resources - [Blog](/blog) - [Guides and API docs](/docs) - [Prerender.io Alternative](/prerender-io-alternative) ### Company - [Agency partnership](/agency-partnership) - [Creator partnership](/creator-partnership) - [About](/about) - [Media Kit](/media-kit) - [Contact](mailto:team@encited.com) ### Legal - [Privacy Policy](/privacy) - [Terms of Service](/terms) ![Avatar](https://replymaven.com/api/uploads/Su6Q0nK63iZW0ZFJBRNWpmRuppVDLuab/98df5262-f992-45fa-a750-00a6c919baf9.png) How can we help? Get instant answers to your questions or leave a message for an engineer will reach out Ask AI about Encited [See our docs ](https://lovablehtml.com/docs) Contact support Leave a message We'll get back to you soon Your name\* Your email\* Your message\* Send message ![Avatar](https://replymaven.com/api/uploads/Su6Q0nK63iZW0ZFJBRNWpmRuppVDLuab/98df5262-f992-45fa-a750-00a6c919baf9.png) Ask AI about Encited Product questions, troubleshooting and Thinking Drop an image to attach Powered by [ReplyMaven](https://replymaven.com)