Favicon Size Guide — All the Sizes You Need for Every Browser and Device

Favicons require multiple sizes for browsers, mobile home screens, and bookmarks. Here's exactly which sizes to create, what format each uses, and how to implement them in HTML.

Mian Ali Khalid · 2026-05-11 · 6 min read

Use the tool

Favicon Generator

Generate favicon package from any image or emoji. Multiple sizes (16, 32, 48, 180, 192, 512), manifest.json, and HTML snippet.

Open Favicon Generator →

A favicon is the small icon that appears in browser tabs, bookmarks, address bars, and mobile home screens. What most developers don’t realize is that a single favicon.ico file is no longer enough — modern web experiences require a set of favicon files at specific sizes for different contexts.

Use the Favicon Generator to generate all required favicon sizes from a single source image.

All favicon sizes you need

The minimal modern set (what most sites need)

File	Size	Format	Use
`favicon.ico`	16×16, 32×32, 48×48	ICO (multi-size)	Browser tab, legacy browsers
`favicon-32x32.png`	32×32	PNG	Modern browser tabs
`favicon-16x16.png`	16×16	PNG	Browser tab (small)
`apple-touch-icon.png`	180×180	PNG	iOS home screen
`android-chrome-192x192.png`	192×192	PNG	Android home screen
`android-chrome-512x512.png`	512×512	PNG	Android splash screen

That’s 6 files. With a site.webmanifest pointing to the Android icons, this covers all major browsers and devices.

Extended set (for maximum coverage)

File	Size	Use
`favicon.ico`	16×16+32×32+48×48	Legacy browsers
`favicon-16x16.png`	16×16	Modern browsers
`favicon-32x32.png`	32×32	Standard
`favicon-96x96.png`	96×96	Google TV, some Android
`apple-touch-icon.png`	180×180	iPhone 6+ home screen
`apple-touch-icon-120x120.png`	120×120	iPhone 6 home screen
`apple-touch-icon-152x152.png`	152×152	iPad home screen
`apple-touch-icon-167x167.png`	167×167	iPad Pro home screen
`android-chrome-192x192.png`	192×192	Android Chrome
`android-chrome-512x512.png`	512×512	Android splash
`mstile-150x150.png`	150×150	Windows taskbar pin

HTML implementation

Minimal implementation

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

Full recommended implementation

<head>
  <!-- Standard favicons -->
  <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">
  
  <!-- Apple Touch Icons -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  
  <!-- Android / PWA -->
  <link rel="manifest" href="/site.webmanifest">
  
  <!-- Microsoft Windows tile (optional) -->
  <meta name="msapplication-TileColor" content="#2d89ef">
  <meta name="msapplication-TileImage" content="/mstile-150x150.png">
  <meta name="theme-color" content="#ffffff">
</head>

site.webmanifest

The Web App Manifest tells Android Chrome (and other browsers supporting PWA) about the site’s icons and theme:

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

ICO format explained

The .ico file format is a container that can hold multiple image sizes in one file. A single favicon.ico can contain 16×16, 32×32, and 48×48 versions simultaneously. The browser picks the appropriate size for the context.

Creating an ICO with multiple sizes:

Many simple tools create single-size ICO files. For proper multi-size ICO, you need a tool that supports multi-resolution ICO output.

The Favicon Generator creates properly formatted multi-size ICO files.

ICO vs PNG for favicons:

Modern browsers (Chrome, Firefox, Edge, Safari) all support PNG favicons via <link rel="icon" type="image/png">. ICO is mainly needed for:

Bookmarks bar icons in some browsers
Legacy Internet Explorer (which only accepts .ico)
Default browser icon when <link rel="icon"> is missing (browsers look for favicon.ico at the site root by default)

The pragmatic answer: generate both. Place favicon.ico at the root for the default browser lookup, and use PNG <link> tags for modern browsers.

SVG favicon (the modern approach)

Modern browsers (Chrome 80+, Firefox 41+, Safari 12+) support SVG favicons:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" href="/favicon.png"> <!-- fallback -->

Advantages of SVG favicons:

Single file that scales to any size — no need to generate multiple PNG sizes
Can adapt to dark/light mode using CSS media queries inside the SVG
Much smaller file size than an ICO with multiple embedded images

SVG favicon with dark mode support:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    @media (prefers-color-scheme: dark) {
      .icon { fill: #fff; }
    }
    .icon { fill: #000; }
  </style>
  <text class="icon" y=".9em" font-size="90">🔧</text>
</svg>

Browser support caveat: ICO favicons are still needed for:

Safari below 12
Internet Explorer
The default /favicon.ico lookup (browsers request this even without explicit <link> tags)

Recommended approach for 2026:

<link rel="icon" href="/favicon.ico" sizes="any">          <!-- Legacy -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> <!-- Modern -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!-- iOS -->
<link rel="manifest" href="/site.webmanifest">             <!-- Android/PWA -->

Design guidelines for favicons

Simplicity is mandatory

A favicon appears at 16×16 pixels — 256 pixels total. Complex logos, thin lines, and fine text are illegible at this size. Effective favicons are:

Single letter or monogram
Simple geometric shape or icon
Brand mark that works at small size

If your full logo doesn’t read at 16×16, create a simplified version for the favicon. Many major brands have separate favicon-specific marks.

Contrast

The favicon must be readable on both light browser tabs (white background) and dark browser tabs (dark mode). Test your favicon against both backgrounds.

Options:

Design the icon with sufficient contrast against both
Use an SVG favicon that switches colors based on prefers-color-scheme
Give the icon a background color so it works on any tab background

Safe zone

Keep important visual elements within the center 80% of the canvas. Some browsers add slight padding or rounding to favicons. A border-to-border design may get clipped.

Apple touch icon specifics

The Apple Touch Icon is what appears when users add your site to their iOS or macOS home screen. iOS requirements:

Size: 180×180px for iPhone 6+, 167×167px for iPad Pro, 152×152px for standard iPad, 120×120px for older iPhones
Format: PNG (no ICO, no SVG)
Background: provide a solid background — iOS doesn’t apply a background. A transparent PNG will display with a black background.
Rounded corners: iOS automatically rounds the corners; don’t pre-round them in your image.

If you only provide one Apple Touch Icon, provide the 180×180px version — iOS will downsample it for smaller displays.

Generating favicons from your logo

Requirements for the source image

Minimum size: 512×512px (for quality at all output sizes)
Format: PNG, SVG, or other high-resolution format
Background: transparent or solid — depends on your icon design
Content: simple design that reads at small sizes

Using the Favicon Generator

Upload your source image (512×512px PNG recommended) to the Favicon Generator
The tool generates all standard sizes: ICO (multi-size), PNG at 16/32/96/180/192/512px
Download the ZIP containing all files
Place favicon.ico at your site root
Place PNG files in /public/ (or equivalent)
Add the HTML <link> tags shown above

Verifying your favicons work

After deploying, test with:

RealFaviconGenerator.net validator — comprehensive check of all favicon implementations
Chrome DevTools: Network tab → filter for favicon to see what your browser requests
iOS Safari: Add to Home Screen and verify the icon appears correctly
Android Chrome: Add to Home Screen and verify

Clear the browser cache before testing — favicons are aggressively cached.

Favicon Generator — generate all favicon sizes from a single image
Image Compressor — optimize favicon PNG files
Color Picker — pick the right colors for your favicon

Apple Touch Icon — Add an iOS Home Screen Icon to Your Website — The apple-touch-icon is the image iOS uses when someone adds your site to their …
Favicon Caching — Force Browser Refresh After Favicon Change — Browsers aggressively cache favicons, sometimes for days or weeks. Learn how to …
Favicon ICO — Create and Implement .ico Files for Your Website — The favicon.ico file is the icon shown in browser tabs, bookmarks, and history. …

Related tool