How to add a favicon

HTML sites

Unzip the download. Keep the images folder as it is. Put the root files (favicon.svg, favicon.ico, apple-touch-icon.png, Android Chrome icons, and site.webmanifest) next to your HTML, or in a public folder your site can reach.

Open html.html from the zip and paste the <link> tags into your page <head>. A typical set looks like this:

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

If your files live in a folder such as /icons, prefix every href with that path so the browser can find them.

React (Vite / CRA)

Choose React before downloading. Copy the public/ folder into your project public/ directory. Paste the <link> tags from favicon-links.html (paths start with /) into the <head> of your root index.html. Static files must live in public/, not src/.

Next.js App Router

Choose Next.js before downloading. The zip already uses Next file conventions - merge the app/ files into your project app/ directory (do not overwrite layout.tsx). If public/ is present, copy those Android Chrome icons into your public/ folder.

Typical paths include app/favicon.ico, app/icon.svg (or app/icon.png), app/apple-icon.png, and app/manifest.webmanifest. Next.js injects the <link> tags automatically - you do not need to edit layout.tsx for icons or the manifest.

Apple Touch and the manifest

The Apple touch icon (180×180) is what iOS uses when someone adds your site to the home screen. The web manifest plus the 192 and 512 PNGs are for installable / PWA-style icons. Edit name and short_name in the manifest so they match your site.

Check it in the browser

Hard-refresh the tab. Favicons are cached aggressively, so a new icon may not show until you clear the cache or open a private window.

Need fewer files? Favicon sizes & dimensions lists the minimum set. Questions are also on the FAQ.