How to Add a Favicon to Your Website (HTML Guide)

Adding a favicon to your website is one of the simplest yet most impactful things you can do. Here's the complete HTML code guide, from the absolute minimum to the full professional setup.

Step 1: Prepare Your Favicon Files

Before writing any HTML, you need the actual icon files. You have two options:

• Create from scratch — Use the Image to Favicon tool to convert any PNG/JPG image into a complete favicon package.
• Use an existing icon — Find inspiration by downloading favicons from websites you admire.

At minimum, you'll need:

• favicon.ico (32×32) — The legacy format
• apple-touch-icon.png (180×180) — For iOS devices

Step 2: Place Files in Your Root Directory

Upload your favicon files to the root of your website (same level as index.html). Browsers automatically look for /favicon.ico at the root, even without any HTML declaration.

your-website/
├── index.html
├── favicon.ico
├── favicon-32x32.png
├── favicon-16x16.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── site.webmanifest

Step 3: Add HTML to Your <head>

Minimum Setup (2 lines)

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

This handles browser tabs and iOS home screen. Good enough for most personal projects.

Recommended Setup (5 lines)

<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">

This covers all modern browsers, iOS, Android, and PWA. This is what we recommend for production websites.

Full Professional Setup (with theme color)

<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">
<meta name="theme-color" content="#ffffff">
<meta name="msapplication-TileColor" content="#ffffff">

The site.webmanifest File

This JSON file tells Android and PWAs about your icons:

{
  "name": "Your Site Name",
  "short_name": "Site",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Framework-Specific Instructions

React (Create React App / Vite)

Place favicon files in the public/ folder and add link tags to public/index.html (CRA) or index.html (Vite).

Next.js (App Router)

Place favicon.ico in the app/ directory. Next.js 13+ automatically serves it. For other formats, use the metadata export in layout.tsx.

WordPress

Go to Appearance → Customize → Site Identity → Site Icon. Upload a 512×512 PNG and WordPress generates all sizes automatically.

Testing Your Favicon

After adding the code:

1. Hard refresh your browser (Ctrl+Shift+R or Cmd+Shift+R) — favicons are heavily cached.
2. Open in Incognito/Private mode to bypass cache entirely.
3. Check the Google Rich Results test to see how your favicon appears in search results.
4. Test on an actual iPhone/iPad by adding to home screen.

Common Mistakes to Avoid

• Wrong path — Use absolute paths (/favicon.ico) instead of relative ones (favicon.ico) to work on all pages.
• Missing type attribute — Always specify type="image/png" or type="image/x-icon" for best compatibility.
• Forgetting Apple Touch Icon — Without it, iOS will take a screenshot of your page instead, which looks terrible.
• Not clearing cache — Favicons are cached aggressively. Always hard-refresh after changes.