Favicon Implementation Guide: Complete HTML Setup 2024

Quick Start: 3-Step Implementation

The fastest way to add favicons to your website. This basic setup works for 95% of use cases and takes less than 5 minutes.

Create Icons

Generate favicon-32x32.png, favicon-16x16.png, and apple-touch-icon.png from your logo.

Upload Files

Place the PNG files in your website's root directory or /public folder.

Add HTML

Copy the link tags into your HTML <head> section. Done!

Basic Implementation (3 Files)

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Your Website</title>
  
  <!-- Favicon -->
  <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">
</head>
<body>
  <!-- Your content -->
</body>
</html>

That's it! This setup covers Chrome, Firefox, Safari, Edge, and mobile browsers. No additional files needed for basic functionality.

Complete Implementation (All Platforms)

For maximum compatibility including PWAs, Android home screens, Windows tiles, and legacy browsers, use this comprehensive setup:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Your Website</title>
  
  <!-- Primary favicon (modern browsers) -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  
  <!-- SVG favicon for modern browsers with dark mode support -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  
  <!-- ICO fallback for IE11 -->
  <link rel="shortcut icon" href="/favicon.ico">
  
  <!-- Apple Touch Icons -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
  
  <!-- Android/Chrome -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff">
  
  <!-- Windows Tiles -->
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-config" content="/browserconfig.xml">
  
  <!-- Safari Pinned Tab -->
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
</head>
<body>
  <!-- Your content -->
</body>
</html>

File Placement by Platform

Static HTML Sites

Place all favicon files in your root directory (same level as index.html).

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

Note: Use absolute paths starting with `/` in your HTML link tags: `href="/favicon-32x32.png"`

CDN and Subdomain Setup

If you host static assets on a CDN or subdomain, you'll need to adjust paths and handle CORS for manifest.json.

CDN Implementation

<!-- Favicons hosted on CDN -->
<link rel="icon" type="image/png" sizes="32x32" 
      href="https://cdn.example.com/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" 
      href="https://cdn.example.com/favicons/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" 
      href="https://cdn.example.com/favicons/apple-touch-icon.png">

<!-- Manifest MUST be same-origin or use CORS -->
<link rel="manifest" href="/manifest.json">

Important: PWA manifest.json must be served from the same domain as your site, or with proper CORS headers if on CDN.

CORS Headers for CDN Manifest

If you must host manifest.json on a CDN, add these headers:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET
Content-Type: application/json

Cache Busting and Updates

Browsers cache favicons aggressively. When updating your favicon, use these techniques to force refresh:

1. Query String Versioning

<link rel="icon" type="image/png" sizes="32x32" 
      href="/favicon-32x32.png?v=2">
<!-- Increment version number when updating favicon -->

✓ Simple and effective. Change `?v=2` to `?v=3` when updating.

2. Filename Hashing (Build Tools)

<link rel="icon" type="image/png" sizes="32x32" 
      href="/favicon-32x32.a3f8d9c2.png">
<!-- Build tool generates hash from file contents -->

✓ Automatic with Webpack/Vite. No manual version management.

3. Cache-Control Headers

# .htaccess (Apache)
<FilesMatch "\.(ico|png|svg)$">
  Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>

# nginx
location ~* \.(ico|png|svg)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

✓ Combine with query strings for optimal caching.

Testing Your Implementation

Quick Visual Test

1. Clear browser cache (Ctrl+Shift+Del)
2. Open your site in a new tab
3. Check browser tab shows your favicon
4. Bookmark the page, verify icon in bookmarks
5. Test on mobile: Add to home screen

Technical Validation

• Open DevTools → Network tab
• Reload page, check favicon requests (200 status)
• Validate manifest.json syntax: Manifest Validator
• Run Google Lighthouse audit
• Test in all major browsers

Common Implementation Issues

Issue: Favicon Not Showing

Browser shows default icon or no icon.

Solutions:

✓ Check file paths are correct (case-sensitive on Linux servers)
✓ Verify files uploaded to correct directory
✓ Clear browser cache (Ctrl+F5 or Cmd+Shift+R)
✓ Check DevTools Network tab for 404 errors
✓ Ensure HTML link tags are inside `<head>`

Issue: Wrong Icon Showing

Old favicon still appears after update.

Solutions:

✓ Add version query string: `favicon.png?v=2`
✓ Clear browser cache completely
✓ Test in incognito/private window
✓ Check CDN cache (purge if needed)
✓ Wait 24-48 hours for browser cache expiry

Issue: PWA Not Installable

Install prompt doesn't appear.

Solutions:

✓ Verify manifest.json is valid JSON (no syntax errors)
✓ Ensure 192x192 and 512x512 icons exist
✓ Check site is served over HTTPS
✓ Register a service worker
✓ Run Lighthouse PWA audit for detailed checklist

Advanced: Dynamic Favicons

You can dynamically update favicons using JavaScript for notifications or status indicators:

// Add notification count badge to favicon
function updateFavicon(notificationCount) {
  const canvas = document.createElement('canvas');
  canvas.width = 32;
  canvas.height = 32;
  const ctx = canvas.getContext('2d');
  
  // Draw base icon
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0, 32, 32);
    
    if (notificationCount > 0) {
      // Draw red badge
      ctx.fillStyle = '#FF0000';
      ctx.beginPath();
      ctx.arc(24, 8, 8, 0, 2 * Math.PI);
      ctx.fill();
      
      // Draw count
      ctx.fillStyle = '#FFFFFF';
      ctx.font = 'bold 12px Arial';
      ctx.textAlign = 'center';
      ctx.fillText(notificationCount, 24, 12);
    }
    
    // Update favicon
    const link = document.querySelector("link[rel*='icon']");
    link.href = canvas.toDataURL('image/png');
  };
  img.src = '/favicon-32x32.png';
}

// Usage
updateFavicon(5); // Shows "5" badge on favicon

Performance Optimization

Best Practices for Fast Loading

Optimize file sizes

Target: <3KB for 32x32 PNG, <10KB for 512x512. Use TinyPNG or similar.

Use HTTP/2 server push

Push favicon with initial HTML response for faster rendering.

Set long cache duration

Cache-Control: max-age=31536000 (1 year) with query string versioning.

Minimize file count

Only include sizes you actually need. 3-5 files is sufficient for most sites.

Auto-Generate Implementation Code

Our favicon generator creates all required files plus ready-to-use HTML code, manifest.json, and implementation instructions. Deploy in minutes.

Generate Code Now →

Favicon Implementation Guide

Quick Start: 3-Step Implementation

Create Icons

Upload Files

Add HTML

Basic Implementation (3 Files)

HTML Code

Complete Implementation (All Platforms)

File Placement by Platform

Static HTML Sites

CDN and Subdomain Setup

CDN Implementation

CORS Headers for CDN Manifest

Cache Busting and Updates

1. Query String Versioning

2. Filename Hashing (Build Tools)

3. Cache-Control Headers

Testing Your Implementation

Quick Visual Test

Technical Validation

Common Implementation Issues

Issue: Favicon Not Showing

Issue: Wrong Icon Showing

Issue: PWA Not Installable

Advanced: Dynamic Favicons

Performance Optimization

Best Practices for Fast Loading

Auto-Generate Implementation Code

Related Implementation Resources

Testing Guide

PWA Setup

Common Mistakes