How do I change the favicon?

The quickest way

Favicons are a small file (usually favicon.ico or a PNG/SVG) referenced in your HTML head. In Lovable, the simplest route is to ask in chat rather than hunting through the code editor:

Replace the favicon with this image [attach or describe the file] and make sure it shows in browser tabs and bookmarks.

Lovable will update the asset and the relevant <link rel="icon"> tag.

Doing it yourself in the Code editor

1. Prepare a square image — 32x32 or 512x512 works well; PNG or ICO.
2. Open Code and find the favicon file, typically in public/ (e.g. public/favicon.ico or favicon.png).
3. Replace it with your new file, keeping the same filename if possible so existing references still work.
4. If you used a different filename or format, update the <link rel="icon" href="..."> tag in index.html.
5. Publish, then hard-refresh — browsers cache favicons aggressively, so you may not see the change until a fresh load or a new tab.

What usually goes wrong

• Favicon doesn't update after publishing — this is almost always browser caching. Try a private window or a different browser to confirm the change actually took.
• Wrong aspect ratio distorts the icon — use a square image; non-square icons get squashed or cropped unpredictably across browsers and devices.
• Only shows in some browsers — some platforms (iOS home screen icons, Android) need additional sizes/manifest entries beyond a plain favicon; mention this to Lovable if you need full home-screen icon support.

Related

Once your favicon is sorted, you'll likely also want to check how do I change the website title and how do I change the social sharing image — all three are part of a project's basic branding metadata.