Detailed guide

Favicon Implementation Guide

4 min read
View contents

Favicon Implementation Guide: Complete Technical Reference

Introduction

Implementing favicons correctly involves more than just dropping a .ico file in your root directory. Modern web applications need to support multiple devices, screen densities, and use cases—from browser tabs to Progressive Web Apps (PWAs).

This comprehensive guide covers all favicon sizes you need, format selection, PWA manifest configuration, and testing across platforms.

Understanding Favicon Requirements

Where Favicons Are Used

Context Typical Size Format Notes
Browser tab 16x16, 32x32 ICO, PNG Most common display
Bookmark bar 16x16 ICO, PNG When bookmarked
Browser history 16x16 ICO, PNG In history list
Google Search 48x48+ PNG Search result snippets
Windows shortcut 48x48 ICO Desktop shortcuts
macOS Dock 512x512 PNG, ICNS High-res needed
iOS home screen 180x180 PNG apple-touch-icon
Android home screen 192x192, 512x512 PNG Via manifest
PWA splash screen 512x512 PNG App launch screens

Google’s Favicon Requirements

For your favicon to appear in Google Search results:

✓ Minimum 48x48 pixels (multiples preferred: 96, 144, 192)
✓ Square aspect ratio (1:1)
✓ Must be crawlable (not blocked by robots.txt)
✓ Stable URL (avoid frequent changes)
✓ Appropriate content (no explicit imagery)
✓ Valid image format (ICO, PNG, SVG, GIF, WebP)

Complete Favicon Implementation

Generate these files for comprehensive coverage:

/favicon.ico          (48x48, multi-resolution)
/favicon-16x16.png    (16x16)
/favicon-32x32.png    (32x32)
/favicon-48x48.png    (48x48)
/favicon-192x192.png  (192x192)
/favicon-512x512.png  (512x512)
/apple-touch-icon.png (180x180)
/icon.svg             (scalable)
/site.webmanifest     (PWA manifest)

HTML Head Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <!-- Standard favicons -->
  <link rel="icon" href="/favicon.ico" sizes="48x48">
  <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="icon" href="/favicon-48x48.png" sizes="48x48" type="image/png">

  <!-- High-resolution for modern browsers -->
  <link rel="icon" href="/favicon-192x192.png" sizes="192x192" type="image/png">

  <!-- SVG favicon (modern browsers) -->
  <link rel="icon" href="/icon.svg" type="image/svg+xml">

  <!-- Apple Touch Icon -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- PWA Manifest -->
  <link rel="manifest" href="/site.webmanifest">

  <!-- Theme color for browser chrome -->
  <meta name="theme-color" content="#4285f4">

  <!-- Microsoft tiles (optional) -->
  <meta name="msapplication-TileColor" content="#4285f4">
  <meta name="msapplication-config" content="/browserconfig.xml">
</head>

PWA Web Manifest

Create site.webmanifest:

{
  "name": "Your Site Name",
  "short_name": "Site",
  "description": "Your site description",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4285f4",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Microsoft Browser Configuration

Create browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square150x150logo src="/mstile-150x150.png"/>
      <TileColor>#4285f4</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Format Selection Guide

ICO Format

Best for: Universal compatibility, legacy browsers

# Create multi-resolution ICO with ImageMagick
convert favicon-16x16.png favicon-32x32.png favicon-48x48.png favicon.ico

Pros: Universal support, multiple sizes in one file Cons: Larger file size, older format

PNG Format

Best for: Modern browsers, transparency

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

Pros: Excellent compression, transparency, widely supported Cons: No animation, separate file per size

SVG Format

Best for: Scalable icons, modern browsers

<link rel="icon" type="image/svg+xml" href="/icon.svg">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#4285f4"/>
  <text x="50" y="65" font-size="50" text-anchor="middle" fill="white">A</text>
</svg>

Pros: Infinite scalability, small file size, can use CSS Cons: Not supported in Safari, older browser issues

WebP Format

Best for: Modern sites prioritizing performance

<link rel="icon" type="image/webp" sizes="32x32" href="/favicon.webp">

Pros: Excellent compression, transparency, animation Cons: Requires fallback for older browsers

Framework Implementations

Next.js (App Router)

In app/ directory:

app/
├── favicon.ico       (auto-served)
├── icon.png          (auto-detected)
├── apple-icon.png    (auto-detected)

Or programmatically in app/layout.tsx:

import type { Metadata } from 'next'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
    ],
    apple: '/apple-touch-icon.png',
    shortcut: '/favicon.ico',
  },
}

Vue.js / Nuxt

In nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
        { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
        { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
        { rel: 'manifest', href: '/site.webmanifest' }
      ],
      meta: [
        { name: 'theme-color', content: '#4285f4' }
      ]
    }
  }
})

React (Vite)

In index.html:

<head>
  <link rel="icon" type="image/svg+xml" href="/icon.svg" />
  <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>

Django

In base.html template:

{% load static %}
<head>
  <link rel="icon" type="image/x-icon" href="{% static 'favicon.ico' %}">
  <link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicon-32x32.png' %}">
  <link rel="apple-touch-icon" href="{% static 'apple-touch-icon.png' %}">
</head>

WordPress

In functions.php:

function custom_favicon() {
    echo '<link rel="icon" type="image/png" sizes="32x32" href="' . get_template_directory_uri() . '/images/favicon-32x32.png">';
    echo '<link rel="icon" type="image/png" sizes="16x16" href="' . get_template_directory_uri() . '/images/favicon-16x16.png">';
    echo '<link rel="apple-touch-icon" sizes="180x180" href="' . get_template_directory_uri() . '/images/apple-touch-icon.png">';
}
add_action('wp_head', 'custom_favicon');

Generating Favicons

Using Command Line (ImageMagick)

# From a high-resolution source image (512x512 or larger)
SOURCE="logo-512.png"

# Generate all sizes
convert $SOURCE -resize 16x16 favicon-16x16.png
convert $SOURCE -resize 32x32 favicon-32x32.png
convert $SOURCE -resize 48x48 favicon-48x48.png
convert $SOURCE -resize 180x180 apple-touch-icon.png
convert $SOURCE -resize 192x192 favicon-192x192.png
convert $SOURCE -resize 512x512 favicon-512x512.png

# Create multi-resolution ICO
convert favicon-16x16.png favicon-32x32.png favicon-48x48.png favicon.ico

Using Online Tools

Popular favicon generators:

Design Tips for Small Sizes

✓ Use simple shapes (circles, squares, letters)
✓ Ensure high contrast with common backgrounds (white, dark)
✓ Test at actual size (16x16 looks very different from 512x512)
✓ Remove fine details that disappear at small sizes
✓ Consider separate simplified designs for small sizes

Testing and Validation

Browser Testing Checklist

□ Chrome (desktop): Check tab icon
□ Firefox (desktop): Check tab and bookmark
□ Safari (desktop): Check tab and bookmark
□ Edge (desktop): Check tab and taskbar pin
□ Chrome (Android): Add to home screen
□ Safari (iOS): Add to home screen
□ Google Search: Search for your site on mobile

Validation Tools

Google’s Favicon Testing:

# Check if Google can access your favicon
curl -I https://yoursite.com/favicon.ico

# Should return:
# HTTP/2 200
# content-type: image/x-icon

Check robots.txt isn’t blocking:

# Your robots.txt should NOT have:
Disallow: /favicon.ico
Disallow: /*.ico
Disallow: /*.png

Debug JavaScript

// Check what favicon is currently loaded
function checkFavicon() {
  const links = document.querySelectorAll('link[rel*="icon"]');
  links.forEach(link => {
    console.log(`${link.rel}: ${link.href} (${link.sizes?.value || 'no size'})`);
  });
}
checkFavicon();

Caching Considerations

Cache Headers

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

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

Cache Busting

When updating favicons:

<!-- Add version query string -->
<link rel="icon" href="/favicon.ico?v=2">

Or use content hash in filename:

<link rel="icon" href="/favicon-abc123.ico">

Troubleshooting Common Issues

Favicon Not Showing in Browser Tab

  1. Clear browser cache (hard refresh: Ctrl+Shift+R)
  2. Check file exists at specified path
  3. Verify correct MIME type in server response
  4. Check for syntax errors in HTML

Favicon Not in Google Search Results

  1. Verify minimum 48x48 size
  2. Ensure square aspect ratio
  3. Check robots.txt isn’t blocking
  4. Wait—Google caching can take weeks
  5. Use Google Search Console to request re-crawl

Different Favicon in Different Browsers

Browsers prioritize differently. Ensure you provide:

<!-- Order matters for some browsers -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.png" type="image/png">
<link rel="icon" href="/favicon.ico">

PWA Not Using Updated Icon

  1. Update version in manifest
  2. Clear service worker cache
  3. Uninstall and reinstall PWA

Summary Checklist

  • [ ] Create favicon in multiple sizes (16, 32, 48, 180, 192, 512)
  • [ ] Include .ico for legacy browsers
  • [ ] Add apple-touch-icon for iOS
  • [ ] Create web manifest for PWA support
  • [ ] Test on multiple browsers and devices
  • [ ] Verify Google can crawl favicon (not blocked by robots.txt)
  • [ ] Set proper cache headers
  • [ ] Ensure square aspect ratio (1:1)
  • [ ] Use simple design that works at 16x16

Official Documentation

Related articles

Related version

Introduction

Favicon Explained

A favicon (short for "favorite icon") is the small icon displayed in browser tabs, bookmarks, and search results

Category hub

Hub

Basic Seo Fundamentals Hub

Every successful website is built on a foundation of solid SEO fundamentals

In the same category

Detailed guide

Viewport Optimization Guide

The viewport meta tag is more than just a simple HTML element—it's the foundation of responsive web design and mobile optimization

Detailed guide

Https Implementation Guide

Implementing HTTPS correctly goes beyond simply installing an SSL certificate

Detailed guide

Open Graph Optimization Guide

Open Graph tags are fundamental for maximizing CTR and engagement of your content on social media¹