How to add a favicon to your website (HTML, WordPress, React, Next.js)

Updated: 2026-10-27 · AnyToolsKit

Adding a favicon takes two steps: put the icon files on your server and reference them in the HTML head. Below are instructions for plain HTML, WordPress, Vite/React, Next.js and static hosts such as GitHub Pages, Netlify, Vercel and Cloudflare Pages.

Step 1: create the files

Open the Favicon Generator, drop in your logo (a square PNG or SVG of at least 512 px works best) and download the ZIP. It contains favicon.ico, PNG icons, apple-touch-icon.png, site.webmanifest and favicon-snippet.html.

Plain HTML sites

Unzip the files into the root of your site — the same folder as index.html.
Paste the contents of favicon-snippet.html into the <head> of every page.
Upload, then open https://your-site.com/favicon.ico directly to confirm it is served.

<head>
  <meta charset="utf-8">
  <title>My site</title>
  <link rel="icon" href="/favicon.ico" sizes="48x48">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">
</head>

WordPress

Go to Appearance → Customize → Site Identity (classic themes) or Appearance → Editor → Site Identity / Site Logo block settings (block themes).
Under Site Icon, upload a square image of at least 512×512 px. WordPress generates the sizes and tags automatically.
If your theme or an SEO plugin also outputs icons, keep only one source to avoid conflicting tags.

Vite, Create React App, Vue, Svelte

Copy the files into the public/ folder. Everything in public/ is served from the site root unchanged, so /favicon.ico will work. Then add the snippet to index.html (not inside a component).

Next.js (App Router)

Place favicon.ico directly in the app/ directory and add icon.png and apple-icon.png there as well; Next.js generates the <link> tags for you. For the manifest, add app/manifest.ts or put site.webmanifest in public/ and reference it through the metadata.manifest field.

GitHub Pages, Netlify, Vercel, Cloudflare Pages

These hosts serve your build folder as-is. Make sure the icon files end up in the output directory (usually by placing them in public/ or static/). If your site lives in a sub-path like username.github.io/project/, use relative paths (href="favicon.ico") or include the sub-path, because /favicon.ico would point to the domain root.

Check that it works

Open each icon URL directly — you should see the image, not a 404 page.
Hard-reload the page (Ctrl+Shift+R / Cmd+Shift+R). Browsers cache favicons aggressively.
On a phone, use “Add to Home Screen” to check the Apple touch and manifest icons.

Still not visible? Work through the checklist in Favicon not showing?.

FAQ

Where do I put favicon.ico?

In the root of your website so it is reachable at https://your-domain/favicon.ico. In most frameworks that means the public/ folder.

Do I need the link tag if favicon.ico is in the root?

Browsers will usually find /favicon.ico on their own, but adding explicit link tags is more reliable and is required for PNG, SVG, Apple and manifest icons.