Adding a favicon to your website takes about five minutes once you have the files. Here is how to do it in plain HTML, Next.js, React (Create React App / Vite), and WordPress.

Step 1 – Create your favicon files

You need at minimum:

favicon.ico — for the root of your site
favicon-32x32.png and favicon-16x16.png
apple-touch-icon.png (180×180)
site.webmanifest

Generate all of these at once with our free favicon generator. Download the ZIP and extract to your computer.

Adding a favicon to plain HTML

Copy all files to your website root (same directory as index.html), then add to <head>:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Adding a favicon to Next.js (App Router)

In Next.js 13+ App Router, place favicon.ico directly in the app/ directory. Next.js will automatically serve it as the site favicon. No <link> tag needed for the ICO.

For the full set (apple-touch-icon, android-chrome, manifest), add them to the app/ folder with the correct names:

app/favicon.ico
app/apple-icon.png (Next.js serves this as apple-touch-icon)
app/icon.png (served as the PNG favicon)

Alternatively, place all files in the public/ directory and add the links manually via metadata in your root layout.tsx:

// app/layout.tsx
export const metadata = {
  icons: {
    icon: [
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
    ],
    apple: [{ url: '/apple-touch-icon.png', sizes: '180x180' }],
  },
  manifest: '/site.webmanifest',
};

Adding a favicon to Create React App / Vite

Place all favicon files in the public/ folder. In public/index.html (CRA) or index.html (Vite), add the <link> tags to <head>:

<link rel="icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
<link rel="manifest" href="%PUBLIC_URL%/site.webmanifest">

For Vite, use /favicon.ico directly (no %PUBLIC_URL% variable).

Adding a favicon to WordPress

WordPress has a built-in Site Icon feature:

Go to Appearance → Customize → Site Identity (for classic themes) or the Site Editor for block themes.
Under Site Icon, click Select site icon and upload a square image (512×512 px minimum).
WordPress generates and serves all required sizes automatically.

If you want to use specific files, add code to your functions.php or use a plugin like Favicon by RealFaviconGenerator to replace the default behavior.

Troubleshooting: favicon not showing

Hard-refresh the page. Favicons are heavily cached. Press Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac).
Check the file path. Use browser DevTools → Network tab and look for a 404 on favicon requests.
Check the <link> tag. Make sure it's inside <head>, not <body>.
Check mime type. Your server should serve .ico as image/x-icon and .webmanifest as application/manifest+json.
Try a different browser. Each browser caches favicons independently. If it shows in Firefox but not Chrome, it's a cache issue.

Need the favicon files? Generate your complete favicon package free →

How to Add a Favicon to Your Website (HTML, Next.js, React, WordPress)