Favicon Sizes Explained: The Complete Checklist for 2026

by Sreynik •
Grid of favicon sizes from 16x16 to 512x512 with platform labels beneath each size

If you have ever uploaded a single 32×32 favicon and assumed your website was covered, you are missing icons on at least four platforms. Modern browsers, phones, operating systems, and search engines each expect specific favicon sizes — and when a size is missing, they fall back to a generic placeholder or a blurry upscale that makes your site look unfinished.

This checklist covers every favicon size that matters in 2026, which platform uses it, what happens when it is missing, and the exact code you need to declare each one. Use it as a pre-launch checklist and your site will display a crisp, branded icon everywhere.

The Full Favicon Size Checklist

Below is every favicon size with its purpose. Check off each one you have generated and implemented.

Size Format Used By What Happens If Missing
16×16 PNG / ICO Legacy browser tabs (IE, old Safari) Generic globe icon in older browsers
32×32 PNG / ICO Chrome, Firefox, Edge browser tabs Generic globe icon in desktop tabs
48×48 PNG / ICO Windows taskbar, site shortcuts Windows uses a blurry upscale of 32×32
64×64 PNG Windows site icon, some address bars Low-quality upscale in Windows shortcuts
180×180 PNG Apple Touch Icon (iOS home screen) iOS screenshots your page as the icon — looks terrible
192×192 PNG Android Chrome, PWA launcher icon Android uses a low-res fallback or no icon
512×512 PNG PWA splash screen, Google recommended PWA splash screen shows blank or default icon
SVG SVG Safari pinned tabs, modern browser tabs Safari uses the PNG favicon in pinned tabs (no dark mode support)
150×150 PNG Microsoft tile (Windows 8/10 Start Menu) No tile icon when users pin your site to Start
310×310 PNG Microsoft wide tile Wide tile layout unavailable
Visual diagram showing each favicon size mapped to its platform — browser tabs at 32x32, iOS home screen at 180x180, Android at 192x192, and PWA splash at 512x512

Minimum Viable Set: The 3 Sizes You Must Have

If you need to ship quickly, these three sizes cover the highest-visibility surfaces:

  1. 32×32 PNG — desktop browser tabs (every visitor sees this)
  2. 180×180 PNG — iOS home screen (any iPhone or iPad user who saves your site)
  3. 192×192 PNG — Android home screen and PWA icon

With just these three, your icon appears correctly in browser tabs, on iOS home screens, and on Android launchers. Add the remaining sizes as soon as you can.

Platform-by-Platform Breakdown

Desktop Browser Tabs

Chrome, Firefox, Safari, and Edge all display favicons in the browser tab next to the page title. The standard tab favicon size is 32×32 pixels. Some older browsers (Internet Explorer, very old Safari versions) fall back to 16×16, so providing both is the safest approach.

Google Chrome also uses the 32×32 favicon next to your URL in search results on both mobile and desktop. This means your 32×32 icon is visible not just in tabs but also in Google — making it the single most important size.

iOS: Apple Touch Icon

When an iPhone or iPad user taps Share then "Add to Home Screen," iOS looks for a 180×180 PNG declared with the apple-touch-icon link tag. If this tag is missing, iOS takes a screenshot of the page and uses it as the icon — resulting in a tiny, unreadable, zoomed-out version of your webpage instead of your brand icon.

Apple also applies rounded corners automatically to the Apple Touch Icon. You do not need to round the corners yourself — in fact, doing so creates visible gaps on some iOS versions. Supply a square 180×180 image with a transparent or solid background and iOS handles the masking.

Android and Chrome

Android Chrome uses icons declared in your web app manifest file (manifest.json). The two key sizes are 192×192 (for the app launcher) and 512×512 (for the PWA splash screen that appears while the app loads).

Without a manifest, Android Chrome falls back to the 192×192 Apple Touch Icon or the largest available favicon — but the result is often blurry on high-density screens because it is upscaled from a smaller source.

Progressive Web Apps (PWA)

If your site is installable as a PWA, the 512×512 icon is required. It appears on the PWA splash screen — the brief white screen that shows while the app loads after being launched from the home screen. Without a 512×512 icon, the splash screen shows a blank placeholder, which looks broken.

The manifest purpose field determines how the icon is used:

  • "any" — the icon is used as-is for all purposes
  • "maskable" — the icon is cropped to a safe zone for adaptive icon shapes on Android (circle, squircle, rounded square depending on the device manufacturer)
  • "any maskable" — the icon works in both modes

Microsoft Tiles (Windows Start Menu)

When a Windows user pins your website to the Start Menu, Windows creates a live tile using the 150×150 or 310×310 icon declared in browserconfig.xml. This is a separate XML file that Microsoft browsers read alongside the standard favicon link tags.

If you do not serve a Windows tile icon, the pinned tile shows a default browser logo instead of your brand — a missed branding opportunity for the significant share of users on Windows devices.

Safari Pinned Tabs (SVG)

Safari on macOS supports SVG favicons for pinned tabs. An SVG favicon scales perfectly to any size, supports dark mode through the color attribute, and produces a sharper result than any raster icon at small sizes.

The SVG favicon only works in Safari. Other browsers ignore the SVG link tag and fall back to your PNG favicons, so providing both is essential.

The Complete HTML Code

Here is the full set of link tags to include in your <head> element. Copy this, replace the filenames with your own, and every platform will be covered:

<!-- Standard browser favicons -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64x64.png">

<!-- SVG favicon (Safari pinned tabs + dark mode) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" color="#1a73e8">

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

<!-- Microsoft tile (Windows Start Menu) -->
<meta name="msapplication-TileColor" content="#1a73e8">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">

Web App Manifest (Android + PWA)

Create a manifest.json file in your root directory and link it from your HTML:

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

The manifest file should contain:

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

Microsoft browserconfig.xml

For Windows tile support, add a browserconfig.xml file:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x310logo src="/mstile-310x310.png"/>
      <TileColor>#1a73e8</TileColor>
    </tile>
  </msapplication>
</browserconfig>

And reference it in your HTML:

<meta name="msapplication-config" content="/browserconfig.xml">
Code editor showing the complete head section of an HTML file with all favicon link tags, manifest link, and Microsoft meta tags properly ordered

Dark Mode Favicon Support

Dark mode is now used by a significant share of visitors. A favicon designed for a white browser tab can become invisible or look awkward against a dark tab background.

The SVG favicon solves this elegantly. Safari uses the color attribute on the SVG link tag as the icon colour for pinned tabs, which automatically adapts to the current system theme. Chrome 96 and later supports the media attribute on the icon link tag:

<!-- Light mode favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" media="(prefers-color-scheme: light)">

<!-- Dark mode favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">

This allows you to serve a light icon for dark tabs and a dark icon for light tabs. If you only want to maintain one SVG file, use a single-colour design with transparent background — it renders well against both light and dark tab backgrounds.

Maskable Icons: The Android Safe Zone

Android devices from different manufacturers apply different icon shapes: circles on stock Android, squircles on Samsung, rounded squares on some Xiaomi devices. A maskable icon is designed with a safe zone so that the important part of your icon remains visible regardless of which mask the device applies.

The rule is simple: keep all important content within the inner 80% of the icon (a circle inscribed in the square). The outer 20% may be cropped by the device mask. This means:

  • Do not place text or detailed elements near the edges
  • Use a solid background colour that fills the entire square
  • Centre your logo or icon within the inner circle

If your icon has a transparent background, Android fills the masked area with white — which looks broken if your icon was designed for a dark background. Always provide a filled background for maskable icons.

File Naming Conventions

Consistent file naming makes it easier to maintain your favicon set as platforms evolve. Here is the widely-used convention:

File Size Purpose
favicon-16x16.png 16×16 Legacy browser tabs
favicon-32x32.png 32×32 Standard browser tabs
favicon-48x48.png 48×48 Windows taskbar
favicon-64x64.png 64×64 Windows site icon
apple-touch-icon.png 180×180 iOS home screen
android-chrome-192x192.png 192×192 Android Chrome
android-chrome-512x512.png 512×512 PWA splash screen
favicon.svg Vector Safari pinned tabs / dark mode
mstile-150x150.png 150×150 Windows Start Menu
mstile-310x310.png 310×310 Windows wide tile

ICO vs PNG: Which Format to Use

The traditional favicon format is ICO, which can bundle multiple sizes into a single file. However, PNG has become the preferred format in 2026 for several reasons:

  • Browser support is universal. Every major browser now supports PNG favicons. The last browser that required ICO was Internet Explorer, which is discontinued.
  • PNG is simpler to manage. Each size is a separate file, making it easy to update one size without regenerating the entire set.
  • PNG supports transparency. ICO transparency handling varies between browsers, while PNG alpha transparency works consistently everywhere.
  • Google recommends PNG. Google's own favicon documentation specifies PNG as the expected format for search result favicons.

Use individual PNG files for each size. If you need to support very old browsers, you can also provide an ICO file as a fallback — but for most sites in 2026, PNG alone is sufficient.

How to Generate All Sizes at Once

Generating ten different sizes from a single source image takes seconds with the right tool:

  1. Start with a 512×512 or larger PNG of your logo or brand icon with a transparent background.
  2. Open Rekreay's free Favicon Generator.
  3. Upload your source image.
  4. Select all the sizes you need (16, 32, 48, 64, 150, 180, 192, 310, 512).
  5. Click Generate and download each PNG file.
  6. Place the files in your website root directory.
  7. Add the link tags from the code section above to your HTML head.
Favicon generator tool interface showing a 512x512 source image being converted into a grid of output sizes from 16x16 to 512x512 with download buttons

Testing Your Favicon Set

After deploying, verify that each platform picks up the correct icon:

  • Desktop tabs — open your site in Chrome, Firefox, Safari, and Edge. Check that the 32×32 icon appears in each tab.
  • Google search results — use Google's Rich Results Test to verify Google can find and display your favicon.
  • iOS home screen — on an iPhone, tap Share then "Add to Home Screen." The 180×180 icon should appear — not a screenshot.
  • Android home screen — in Chrome on Android, tap the menu then "Install app" or "Add to Home Screen." The 192×192 icon should display.
  • PWA splash screen — if your site is a PWA, launch it from the home screen and check that the 512×512 icon appears on the splash screen.
  • Dark mode — switch your OS to dark mode and verify the favicon remains visible in browser tabs.

Quick-Reference Checklist

  • ☐ 16×16 PNG — legacy browser tabs
  • ☐ 32×32 PNG — standard browser tabs + Google search
  • ☐ 48×48 PNG — Windows taskbar
  • ☐ 64×64 PNG — Windows site icon
  • ☐ 180×180 PNG — Apple Touch Icon
  • ☐ 192×192 PNG — Android Chrome + PWA launcher
  • ☐ 512×512 PNG — PWA splash screen
  • ☐ SVG favicon — Safari pinned tabs + dark mode
  • ☐ 150×150 PNG — Microsoft tile
  • ☐ 310×310 PNG — Microsoft wide tile
  • ☐ <link rel="icon"> tags in HTML head
  • ☐ manifest.json with 192 and 512 icons
  • ☐ browserconfig.xml for Microsoft tiles
  • ☐ Dark mode variant or transparent SVG
  • ☐ Maskable icon with safe zone
  • ☐ Tested in Chrome, Firefox, Safari, Edge
  • ☐ Tested in Google Rich Results
  • ☐ Tested on iOS home screen
  • ☐ Tested on Android home screen
  • ☐ Tested in dark mode

Further Reading

Related Articles

Final Thoughts

A complete favicon set is not optional — each missing size creates a visible gap on a specific platform that your visitors use. The 32×32 icon shows in Google search results, the 180×180 icon represents your brand on every iOS home screen, and the 512×512 icon appears on PWA splash screens. Generate all sizes from a single high-resolution source image, add the correct link tags, test on each platform, and your brand icon will look sharp everywhere your site appears.