How to Add a Favicon to Your Website

A step-by-step guide for adding favicons to any website — from plain HTML to modern frameworks.

Step 1: Generate Your Favicon Files

Before adding a favicon, you need the icon files in multiple sizes. Use a favicon generator to create all the sizes you need from a single image or text. You'll typically get a ZIP file containing PNG images at various resolutions (16x16 through 512x512).

Step 2: Place Files in Your Project

Extract the favicon files and place them in your website's public or root directory. The exact location depends on your setup:

Static HTML: Place in the same directory as your index.html
Next.js: Place in the /public directory or /app directory
React (CRA/Vite): Place in the /public directory
WordPress: Upload via Media Library or theme settings

Step 3: Add HTML Link Tags

Add the following <link> tags inside the <head> section of your HTML:

<link rel="icon" href="/favicon.png" type="image/png">
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/favicon-180x180.png">
<link rel="icon" href="/favicon-192x192.png" sizes="192x192" type="image/png">
<link rel="icon" href="/favicon-512x512.png" sizes="512x512" type="image/png">

Framework-Specific Guides

Next.js (App Router)

Next.js 13+ with the App Router has built-in favicon support. Simply place a favicon.ico or icon.png file in your app/ directory, and Next.js will automatically generate the appropriate <link> tags.

For more control, use the metadata API:

// app/layout.tsx
export const metadata = {
  icons: {
    icon: [
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-192x192.png', sizes: '192x192', type: 'image/png' },
    ],
    apple: '/favicon-180x180.png',
  },
}

React (Vite)

Place your favicon files in the /public directory and add the <link> tags to your index.html:

<!-- index.html -->
<head>
  <link rel="icon" href="/favicon.png" type="image/png">
  <link rel="apple-touch-icon" href="/favicon-180x180.png">
</head>

WordPress

WordPress 4.3+ has built-in Site Icon support:

Go to Appearance → Customize → Site Identity
Click "Select site icon"
Upload your 512x512 favicon image
WordPress automatically generates all needed sizes

For manual control, add the link tags to your theme's header.php or use the wp_head action hook.

Shopify

In your Shopify admin, go to Online Store → Themes → Customize. Under Theme settings → Favicon, upload your favicon image. Shopify recommends a 32x32 PNG.

Static Sites (Hugo, Jekyll, 11ty)

Place favicon files in your static assets directory and add the link tags to your base template or layout file. The exact file varies by generator:

Hugo: layouts/partials/head.html
Jekyll: _includes/head.html
11ty: Your base layout template

Testing Your Favicon

After adding your favicon, verify it works correctly:

Hard refresh your browser (Ctrl+Shift+R / Cmd+Shift+R) — browsers aggressively cache favicons
Open in incognito/private mode to bypass cache entirely
Check mobile — add your site to the home screen on iOS and Android to verify the touch icons
Test in multiple browsers — Chrome, Firefox, Safari, and Edge may handle favicons differently

Common Issues

Favicon not showing: Clear browser cache or test in incognito mode. Favicons are cached aggressively and may take time to update.
Wrong size displayed: Ensure you're providing the correct sizes attribute in your link tags.
Blurry favicon: You may be serving a low-resolution image. Provide at least a 32x32 PNG for browser tabs.
Favicon works locally but not in production: Check that your favicon files are being served from the correct path and that your build process includes them.