Favicon Sizes & Formats – Complete Guide for 2024

Everything you need to know about favicons: sizes, formats, and implementation

Quick Navigation

Standard Favicon Sizes for All Devices (2024)

Modern websites need multiple favicon sizes to ensure proper display across all devices and platforms:

Desktop Browsers

  • • favicon.ico (16x16, 32x32)
  • • favicon-16x16.png
  • • favicon-32x32.png
  • • favicon-48x48.png

Mobile & Tablets

  • • apple-touch-icon.png (180x180)
  • • android-chrome-192x192.png
  • • android-chrome-512x512.png

How to Choose Between ICO, PNG, and SVG

ICO Format

Legacy format, supports multiple sizes in one file. Still required for maximum compatibility.

PNG Format

Best for modern devices, supports transparency and high color depth.

SVG Format

Ideal for simple logos, scales perfectly at any size. Limited browser support.

Implementation Guide

Add these lines to your HTML <head> section:

<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="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="128x128" href="/favicon-128x128.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
<link rel="manifest" href="/site.webmanifest">

And include a manifest file for PWA support:

{
    "name": "Your Website Name",
    "short_name": "Website",
    "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"
}

Troubleshooting: Why Your Favicon Isn't Working

Cache Issues

Clear your browser cache or force-refresh (Ctrl+F5) to see updated favicons.

Wrong File Path

Ensure favicon files are in the correct location and paths are properly set.

Format Support

Some browsers may not support certain formats. Always provide ICO as fallback.

Dark Mode Favicon Support

Modern websites can support different favicons for light and dark modes:

Implementation Example

<link rel="icon" type="image/png" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/png" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">