How to Add a Favicon to Your Website

A favicon is the small icon in the browser tab next to your page title. It also appears in bookmarks, on phone home screens, and next to your site in Google's search results. Without one, your site shows a generic grey globe — a small thing that makes a project look unfinished.

The files you actually need

Favicon guides used to list twenty files. For a modern site, four is plenty:

File	Size	Used by
`favicon.ico`	32×32 (can contain 16×16 too)	Older browsers, and anything that requests `/favicon.ico` directly
`icon.svg`	Any (it's a vector)	Modern browsers — sharp at every size
`apple-touch-icon.png`	180×180	iPhone and iPad home screens
`icon-192.png` and `icon-512.png`	192×192, 512×512	Android home screens and installable apps, via a web manifest

Start from one square image, ideally a simple shape or letter that's still recognisable at 16 pixels. Detailed logos turn to mush that small. Free online favicon generators will produce all the sizes from one upload.

The HTML

Put the files in your site's root (the public/ folder in most projects) and add these tags inside <head>:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

And a minimal manifest.webmanifest:

{
  "name": "My App",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

(The manifest is also what makes a site installable — see what is a PWA?)

Bonus: a favicon that follows dark mode

An SVG favicon can include CSS, so it can change colour in dark mode:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #111; }
    @media (prefers-color-scheme: dark) { path { fill: #fff; } }
  </style>
  <path d="..." />
</svg>

Next.js (App Router)

Next.js uses file names instead of tags. Put these in the app/ folder and it adds the right <link> tags automatically:

app/favicon.ico
app/icon.png or app/icon.svg
app/apple-icon.png

Delete the default favicon.ico that came with the template, or it will keep showing the Next.js logo. (What is Next.js?)

Vite / React

Put the files in public/ and edit the <link> tags in index.html at the project root. The template's default is usually <link rel="icon" href="/vite.svg"> — replace it.

Favicons in Google search results

Google shows your favicon next to your site in mobile search results. To be eligible:

declare it with a <link rel="icon"> tag on your home page,
make it square, and at least 48×48 pixels — Google recommends a size that's a multiple of 48 (48, 96, 144…); SVG works too,
make sure it isn't blocked in robots.txt.

It can take days or weeks to update in search results after you change it.

"My new favicon isn't showing"

Favicons are cached aggressively — browsers hold onto them far longer than other files. Before assuming it's broken:

Open the icon URL directly (https://yoursite.com/icon.svg). If it loads, the file is fine.
Try a private window or a different browser.
Change the link to force a fresh download: href="/icon.svg?v=2".
Check the Network tab in DevTools for a 404 on the icon. (Browser developer tools for beginners)

The summary

Four files cover modern browsers, iPhones, Android and Google: favicon.ico, icon.svg, apple-touch-icon.png, and 192/512 PNGs in a manifest.
Plain HTML uses <link> tags; Next.js uses file names in app/; Vite uses public/ plus index.html.
For Google, use a square icon that's a multiple of 48px.
Not updating? It's almost always the cache.

EasySpawn serves your app on your own domain with HTTPS from day one, so your favicon, preview images and manifest all have real public URLs that browsers and Google can fetch. See how it works or join the waitlist.

How to Add a Favicon to Your Website (HTML, Next.js, and Vite)