ShipReady Guide · Launch polish · Vite · Next.js

How to Replace the Default Vite or Next.js Title and Favicon

The browser tab is the first thing people see, and "Vite + React" with a purple lightning bolt tells them the app shipped unfinished. It's also what Google shows as your headline. Here's how to replace the defaults in each framework.

4-minute readUpdated Oct 2026All guides

The short version

  • Vite (Lovable, Bolt): edit the <title> and icon link in index.html, and replace /vite.svg.
  • Next.js App Router: set metadata in app/layout.tsx and replace app/favicon.ico.
  • Create React App: edit public/index.html and public/manifest.json.
  • Ship three icons: an SVG or 32px favicon, a 180px Apple touch icon and a share image.

1. Vite apps (including Lovable and Bolt)

Vite apps have a single index.html at the project root. Replace the defaults there:

index.html
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>YourApp: the one-line benefit</title>
  <meta name="description" content="Who it helps and what it does, in one sentence." />
</head>

Put favicon.svg and apple-touch-icon.png (180x180) in the public/ folder and delete public/vite.svg so nothing references it.

2. Next.js App Router

app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: {
    default: "YourApp: the one-line benefit",
    template: "%s | YourApp", // each page's title + your brand
  },
  description: "Who it helps and what it does, in one sentence.",
};

For icons, Next.js uses file names in the app/ folder. Replace app/favicon.ico (the default is the Next.js logo), and optionally add app/icon.png and app/apple-icon.png. Next adds the right tags automatically.

On the older Pages Router, set the title with next/head in _app or each page.

3. Create React App

Change <title>React App</title> in public/index.html, replace public/favicon.ico and the logo PNGs, and update name and short_name in public/manifest.json, which still say "React App" by default.

4. Different titles for different pages

Single-page apps share one index.html, so every route has the same title unless you change it. React 19 lets you render <title> and <meta> inside any component and moves them into the head. On older React versions, react-helmet-async does the same job.

For share previews, link scrapers usually don't run your JavaScript, so per-page titles set in React won't show in X or Slack previews. Put your main title, description and OG image in index.html.

Before you ship

  • Tab title is your app name and benefit, not a framework default.
  • Your own favicon, with the default file deleted.
  • A 180x180 Apple touch icon for phone home screens.
  • A meta description of one clear sentence.
  • manifest.json names updated if your app has one.

Check your live site in 60 seconds

ShipReady scans your deployed URL and the JavaScript visitors actually download: leaked keys, Supabase exposure, unprotected API routes, titles and share images. Secret findings unlock only after you verify you own the site.

Free scan, no signup, no code upload.

FAQ

How do I make a favicon quickly?

An SVG of your logo or initial works in modern browsers. Favicon generator sites can turn one image into every size you need, including the Apple touch icon.

I changed the favicon but still see the old one.

Browsers cache favicons aggressively. Try a private window, or add a version to the link, like /favicon.svg?v=2.

Keep reading

Open Graph images that don't look broken →The OG tags every launch needs, at 1200x630, so your link previews look finished.The launch checklist for vibe-coded apps →Every security, cost and polish check to run before you post the link, in one page.

Sources: Next.js: Metadata and icon files · Vite: index.html and project root