Favicon Sizes: Complete Guide for Every Platform

Getting favicon sizes right is one of those tasks that should take five minutes but somehow never does. Browsers want ICO files. Safari wants an SVG. iOS wants a 180×180 PNG. Android wants five different sizes declared in a manifest. Windows wants tile images. And if you get any of it wrong, your site shows a generic globe icon — or worse, nothing at all.

This guide is the reference you bookmark and come back to. Every favicon size for every major platform, the HTML to wire them up, and the manifest.json to make Android and Chrome happy.

Favicon Sizes Quick Reference

Here is the master table. Every size, every platform, one place.

If you are starting from scratch and want the minimum viable set: 32×32 ICO + 180×180 Apple Touch Icon + 192×192 and 512×512 for the web manifest + an SVG favicon. That covers every major browser and mobile platform shipping in 2026.

Need to resize your source image to hit these targets? Pixotter's resize tool handles it in-browser — drop your image, pick the dimensions, download the result.

Browser Favicons (ICO and SVG)

The ICO File

The ICO format has been the browser favicon standard since Internet Explorer 5 introduced it in 1999. It is a container format — a single .ico file can hold multiple images at different sizes. Browsers pick the most appropriate size from the container.

Sizes to pack into your ICO file:

You do not need to include every possible size. The 16×16 and 32×32 pair covers all modern browsers. Adding 48×48 handles Windows shortcut icons cleanly.

Place the ICO file at your site root as /favicon.ico. Browsers check this path by default — even without any HTML declaration. That fallback behavior is baked into every major browser and is not going away.

<!-- Explicit ICO declaration (optional — browsers check /favicon.ico automatically) -->
<link rel="icon" href="/favicon.ico" sizes="48x48">

Want to convert a PNG source file to ICO? The PNG to ICO conversion guide walks through the process with multiple tools.

The SVG Favicon

SVG favicons are the modern approach. A single SVG file scales to any size without pixelation, supports CSS media queries (including prefers-color-scheme for dark mode), and is typically smaller than an equivalent multi-size ICO.

Browser support for SVG favicons as of early 2026: Chrome 80+, Firefox 41+, Edge 80+, Opera 67+. Safari added support in version 15 (2021). Coverage is above 95% of global browser traffic.

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

Dark mode support in SVG favicons is the real advantage over ICO. You can embed a <style> block with a media query directly in the SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a2e; }
    @media (prefers-color-scheme: dark) {
      path { fill: #e0e0e0; }
    }
  </style>
  <path d="M4 4h24v24H4z"/>
</svg>

That single file gives you a dark favicon on dark backgrounds and a light one on light backgrounds. No JavaScript, no extra files. For a deeper comparison of when SVG makes sense versus raster formats, see SVG vs PNG.

Recommended Browser Favicon Strategy

Use both ICO and SVG. The SVG covers modern browsers with dark mode support. The ICO covers legacy browsers and the /favicon.ico fallback path.

<!-- SVG for modern browsers -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- ICO fallback for legacy browsers -->
<link rel="icon" href="/favicon.ico" sizes="48x48">

Browsers evaluate <link> declarations in order and use the last one they support. Listing SVG first and ICO second means modern browsers use the SVG and older browsers fall back to the ICO.

Apple Touch Icon

When an iOS or iPadOS user adds your site to their home screen, Safari uses the Apple Touch Icon — not the favicon. If you do not provide one, Safari renders a scaled screenshot of your page. It looks terrible.

The required size: 180×180 pixels, PNG format.

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

That is the full specification. One file, one size, one <link> tag. Apple simplified this significantly — older iOS versions required multiple sizes (57×57, 60×60, 72×72, 76×76, 114×114, 120×120, 144×144, 152×152). Since iOS 9, the system takes the 180×180 image and downscales it for smaller contexts. Providing only the 180×180 is the correct approach in 2026.

Design guidelines for the Apple Touch Icon:

The file name apple-touch-icon.png at the site root is a convention that iOS checks automatically (similar to how browsers check /favicon.ico). If your file has a different name or path, the <link> tag is mandatory.

Common mistake: adding sizes="180x180" to the <link> tag. It is harmless but unnecessary — there is only one Apple Touch Icon size that matters, and Safari does not use the sizes attribute to make decisions.

Android and Chrome (Web App Manifest)

Android and Chrome use the Web App Manifest (manifest.json or manifest.webmanifest) to define app icons for the home screen, app switcher, and splash screen. If you are building a Progressive Web App (PWA), these are mandatory. Even for standard websites, providing manifest icons gives Android users a polished home screen experience.

Required sizes:

Both must be PNG. Both should use "purpose": "any" unless you are also providing a maskable variant.

manifest.json Example

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

Link the manifest in your HTML <head>:

<link rel="manifest" href="/manifest.json">

Maskable Icons

Android uses adaptive icons — the system applies different shaped masks (circle, rounded square, squircle) depending on the device manufacturer and user settings. A "maskable" icon has a safe zone in the center (a circle with radius 40% of the icon size) where the important content lives. Everything outside the safe zone may be cropped.

If you only provide one set, use "purpose": "any". If you want the polished adaptive icon look on Android, provide both — separate files, not the same file with both purposes. Using "purpose": "any maskable" on a single icon was common advice but produces suboptimal results: the icon is either too small in masked contexts or has cropped edges in unmasked ones.

Additional Manifest Sizes

While 192×192 and 512×512 are the required pair, adding intermediate sizes lets the system pick the closest match rather than scaling:

For most sites, 192 and 512 are sufficient. The additional sizes matter primarily for PWAs targeting a wide range of Android devices.

Windows Tiles

Windows uses browserconfig.xml to define tile images for pinned sites in the Start menu and taskbar. This was introduced with Internet Explorer 11 and Windows 8 tiles. In 2026, the pinned site feature is less prominent than it was in the Windows 8 era, but Windows still requests browserconfig.xml — and providing it avoids 404 errors in your server logs.

Tile sizes:

browserconfig.xml Example

Place this at your site root:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/icons/tile-70.png"/>
      <square150x150logo src="/icons/tile-150.png"/>
      <wide310x150logo src="/icons/tile-310x150.png"/>
      <square310x310logo src="/icons/tile-310.png"/>
      <TileColor>#1a1a2e</TileColor>
    </tile>
  </msapplication>
</browserconfig>

You can also declare the tile in an HTML meta tag if you prefer not to create a separate XML file:

<meta name="msapplication-TileImage" content="/icons/tile-150.png">
<meta name="msapplication-TileColor" content="#1a1a2e">

Practical advice: If you are not specifically targeting Windows pinned sites, the meta tag approach with a single 150×150 tile is enough to prevent missing-resource errors and provide a reasonable tile appearance when someone does pin your site.

Social Media and Open Graph Images

Open Graph images are not technically favicons, but they live in the same "site identity images" category and are almost always set up at the same time. When someone shares your URL on Facebook, LinkedIn, Twitter/X, Slack, Discord, or iMessage, these platforms fetch the Open Graph image to display as a preview.

Recommended sizes:

The 1200×630 size at a 1.91:1 aspect ratio works across all major platforms. Use one image and declare it for both Open Graph and Twitter Card:

<meta property="og:image" content="https://yoursite.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yoursite.com/og-image.png">

File size matters here. Facebook rejects OG images larger than 8 MB and recommends keeping them under 1 MB for fast previews. A 1200×630 PNG can easily exceed 1 MB if it contains photographic content — compress it or use JPG. For guidance on website image dimensions beyond favicons and OG images, see the image size for website guide.

How to Generate All Favicon Sizes From One Source Image

Start with a single high-resolution source image. 512×512 PNG minimum — this gives you enough resolution to downscale cleanly to every size in the master table. If you have an SVG source, even better: export to PNG at 512×512 or 1024×1024 for your raster targets and use the SVG directly as your SVG favicon.

Step-by-Step Process

1. Prepare your source image

Your source should be square, with the important content centered and at least 16 px of padding from the edges (for Apple Touch Icon masking and Android adaptive icon safe zones). Keep it simple — favicons are displayed at 16×16 in browser tabs. Fine details disappear. Bold shapes and high-contrast colors survive the downscale.

2. Generate each size

Use Pixotter's resize tool to create each target size from your source. Drop the 512×512 source, set the output dimensions, and download. Repeat for each size. All processing happens in your browser — the image never leaves your machine.

The sizes you need:

3. Convert to ICO (if needed)

The ICO file for /favicon.ico can be a renamed 32×32 PNG — modern browsers handle this fine. For a proper multi-size ICO container, see the PNG to ICO conversion guide.

4. Create your SVG favicon

If your logo is available as SVG, use it directly. Add a prefers-color-scheme media query for dark mode support (see the SVG section above). If you only have a raster source, skip the SVG favicon — a poorly traced SVG looks worse than no SVG.

5. Wire everything up in HTML

Here is the complete HTML <head> snippet that covers every platform:

<!-- Favicon: SVG for modern browsers, ICO fallback -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="48x48">

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

<!-- Web App Manifest (Android / Chrome) -->
<link rel="manifest" href="/manifest.json">

<!-- Windows Tile -->
<meta name="msapplication-TileColor" content="#1a1a2e">
<meta name="msapplication-TileImage" content="/icons/tile-150.png">

<!-- Open Graph -->
<meta property="og:image" content="https://yoursite.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yoursite.com/og-image.png">

That is 11 lines covering browsers, iOS, Android, Windows, and every major social platform.

Command-Line Generation With ImageMagick

If you prefer automation, ImageMagick (v7.1, Apache-2.0 license) can generate every size from a single source:

# Generate PNG sizes
magick source-512.png -resize 32x32 favicon-32.png
magick source-512.png -resize 180x180 apple-touch-icon.png
magick source-512.png -resize 192x192 icon-192.png
magick source-512.png -resize 150x150 tile-150.png

# Generate multi-size ICO (16, 32, 48)
magick source-512.png -resize 16x16 favicon-16.png
magick source-512.png -resize 32x32 favicon-32.png
magick source-512.png -resize 48x48 favicon-48.png
magick favicon-16.png favicon-32.png favicon-48.png favicon.ico

# Generate OG image (pad to 1200x630 with background color)
magick source-512.png -resize 400x400 -gravity center \
  -background "#1a1a2e" -extent 1200x630 og-image.png

For a shell script you can drop into any project, save the commands above to generate-favicons.sh and run it whenever your logo changes.

Understanding PNG for Favicons

Most favicon sizes use PNG as the underlying format — even inside ICO containers. PNG's lossless compression preserves the sharp edges and flat colors that icons depend on. If you are unfamiliar with the format's strengths and limits, the What is PNG? article covers everything from color depth to transparency handling.

FAQ

What is the standard favicon size?

The standard favicon size is 32×32 pixels in ICO or PNG format. This covers HiDPI browser tabs and is the single most important size to get right. The 16×16 size was the original standard but is now too small for high-density displays. If you provide only one favicon file, make it 32×32.

Do I still need a .ico file in 2026?

Yes — at least for the /favicon.ico path at your site root. Browsers still check this fallback path automatically, and some tools (RSS readers, bookmark managers, older browsers) only look for ICO. A 32×32 PNG renamed to .ico works in all modern browsers. A proper multi-size ICO container is slightly better but not critical.

What size should my Apple Touch Icon be?

180×180 pixels, PNG format, no transparency. This is the only size you need. iOS downscales it for smaller display contexts (120×120 on non-Plus iPhones, 152×152 on iPads). Do not add rounded corners — iOS applies its own corner mask automatically.

What is the difference between a favicon and an Apple Touch Icon?

A favicon is the small icon shown in browser tabs, bookmarks, and the address bar. An Apple Touch Icon is the larger icon shown when an iOS user adds your website to their home screen. They serve different contexts, require different sizes, and are declared with different HTML tags. You need both.

What favicon sizes does the Web App Manifest need?

The Web App Manifest requires at minimum 192×192 and 512×512 PNG icons. The 192×192 is used for the home screen icon on Android. The 512×512 is used for the PWA install prompt, splash screen, and Google Play Store listing if your PWA is published there.

Should I use SVG or ICO for my favicon?

Use both. SVG favicons scale to any size, support dark mode via CSS media queries, and are typically smaller than multi-size ICO files. ICO provides the fallback for older browsers and the automatic /favicon.ico path check. Declare the SVG first in your HTML <head> and the ICO second.

What size is the Open Graph image?

1200×630 pixels at a 1.91:1 aspect ratio. This single size works across Facebook, LinkedIn, Twitter/X, Slack, Discord, WhatsApp, and iMessage. Keep the file under 1 MB — Facebook rejects images over 8 MB and loads smaller files faster in preview cards.

How do I test my favicons across platforms?

For browser favicons, clear your cache and reload — browsers aggressively cache favicon files. For Apple Touch Icon, use the "Add to Home Screen" action in Safari on an iOS device or simulator. For Android, use Chrome DevTools Application panel to inspect the manifest. For Open Graph, use Facebook's Sharing Debugger and Twitter's Card Validator to preview how your link appears when shared.

Complete HTML Head Template

Copy this template into your site's <head> and replace the paths and URLs. It covers every platform discussed in this guide:

<!-- ============================================
     Favicons — Complete cross-platform set
     ============================================ -->

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

<!-- ICO fallback (legacy browsers, /favicon.ico auto-discovery) -->
<link rel="icon" href="/favicon.ico" sizes="48x48">

<!-- Apple Touch Icon (iOS home screen) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web App Manifest (Android, Chrome, PWA) -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#1a1a2e">

<!-- Windows Tiles -->
<meta name="msapplication-TileColor" content="#1a1a2e">
<meta name="msapplication-TileImage" content="/icons/tile-150.png">

<!-- Open Graph (Facebook, LinkedIn, Slack, Discord) -->
<meta property="og:image" content="https://yoursite.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yoursite.com/og-image.png">

That is the full set. Fifteen lines of HTML, and your site has polished identity icons on every browser, phone, tablet, and social platform that matters.