Replace the default Vite or Lovable favicon with your own icon

Updated Oct 27, 2026 · Pewterkit Guides

The icon in your browser tab comes from a <link rel="icon"> line in index.html. Vite templates point it at /vite.svg, and builders ship their own default icon, so new apps launch with someone else's logo. Put your icon in the public/ folder, point the <link rel="icon"> line at it, delete the old file, and republish.

The fix in a Vite, Lovable or Bolt project

  1. Make a square icon. Google asks for a square (1:1) favicon "at least 8x8px" and recommends one "larger than 48x48px". Google Search reads BMP, GIF, ICO, PNG, JPEG, PPM and TIFF, and SVG isn't on its list, so make a PNG (for example 192 × 192) even if you also keep an SVG for browsers.
  2. Put it in public/, for example public/favicon.png. Vite serves files in public from the root path / and copies them to the build output as they are, so public/favicon.png is referenced as /favicon.png.
  3. In index.html, replace the default line:
<!-- before -->
<link rel="icon" type="image/svg+xml" href="/vite.svg" />

<!-- after -->
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  1. Delete public/vite.svg (or the builder's default icon file) so nothing points at it again.
  2. Republish, then open your site in a new private window.

In Lovable: upload your icon in chat and ask: "Use this image as the favicon: save it in public/, point the link rel=icon in index.html at it, and remove the old favicon." Then publish.

"My favicon isn't changing"

  • Cached icon. Your browser may still show the icon it saved earlier. Check in a private window, or give the file a new name (/favicon-v2.png) and update the link.
  • Two icon lines. If index.html still has the old <link rel="icon"> above or below yours, remove it.
  • Google results. Google says recrawling "can take anywhere from several days to several weeks", and you can request indexing of your homepage in Search Console's URL Inspection tool.

Google's favicon rules in short

  • The <link rel="icon"> sits in your home page's <head>; apple-touch-icon is accepted too.
  • "Googlebot-Image must be able to crawl the favicon file", and Googlebot must be able to crawl the home page.
  • "Google Search only supports one favicon per site, where a site is defined by the hostname."
  • Keep the favicon URL stable once it's set.

What Pewterkit Check looks for

A free check reads the icon links in your homepage's HTML. It flags a template default (/vite.svg, /next.svg, /react.svg or a builder's default icon) and notes when no icon is declared at all.

FAQ

Where is the favicon in a Vite project?

The file is in public/ and the <link rel="icon"> line is in index.html at the project root.

What size should a favicon be?

Square, at least 8 × 8 px for Google, and larger than 48 × 48 px is Google's recommendation. A PNG of 192 × 192 or more works for search results and browser tabs.

Can I use an SVG favicon?

Browsers can show one, and Google Search lists BMP, GIF, ICO, PNG, JPEG, PPM and TIFF as its supported formats. Declare a PNG or ICO too, so search results get your icon.

Why does Google still show the old icon?

It updates after it recrawls your homepage and icon, which Google says can take several days to several weeks.

Sources

  1. Google Search Central: Define a favicon to show in search results — read 27 Oct 2026: link rel=icon, size, supported formats, crawlability, one per hostname, update time
  2. Vite: Static Asset Handling, the public directory — read 27 Oct 2026: public files served at / and copied to the build root

How this page was made: drafted with AI from the sources listed, reviewed by Pewterkit. Docs checked Oct 27, 2026. Spotted something out of date? Tell us.

Related guides