Favicon Sizes in 2026: Complete Reference

A definitive guide to every favicon size you need for full browser and platform coverage.

Why Multiple Sizes?

Different platforms and devices display favicons at different resolutions. A favicon that looks crisp in a browser tab (16x16) would appear blurry as an iOS home screen icon (180x180). By providing multiple sizes, you ensure your icon looks sharp everywhere.

Modern browsers are smart about selecting the best available size, but they can only choose from what you provide. Offering a complete set of sizes guarantees the best possible appearance across all contexts.

Complete Size Reference

Browser-Specific Requirements

Google Chrome

Chrome uses 16x16 for tabs and 32x32 for Retina displays. For PWAs, Chrome requires both 192x192 and 512x512 in the web app manifest. Chrome also displays favicons in the address bar, new tab page, and bookmarks.

Safari (macOS & iOS)

Safari on macOS uses 32x32 for tabs. On iOS, when users add your site to their home screen, Safari uses the apple-touch-icon at 180x180. Safari will automatically add rounded corners and visual effects, so provide a square image without pre-applied effects.

Firefox

Firefox uses 16x16 and 32x32 for tabs. It also supports SVG favicons via <link rel="icon" type="image/svg+xml">, which allows for dark mode adaptive icons using CSS prefers-color-scheme media queries inside the SVG.

Microsoft Edge

Edge follows Chromium standards and uses the same sizes as Chrome. For Windows pinned sites, Edge also uses the 48x48 and 64x64 sizes.

The Minimum Set

If you want to cover the most ground with the fewest files, here's the minimum recommended set:

• 32x32 PNG — covers browser tabs on all modern browsers
• 180x180 PNG — Apple Touch Icon for iOS
• 192x192 PNG — Android and PWA manifest
• 512x512 PNG — PWA splash screen

HTML Implementation

Here's the recommended HTML for a complete favicon setup:

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

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

<!-- PWA / Android -->
<link rel="icon" href="/favicon-192x192.png" sizes="192x192" type="image/png">
<link rel="manifest" href="/site.webmanifest">

PWA Manifest

For Progressive Web Apps, you also need a site.webmanifest file that references your icons:

{
  "icons": [
    { "src": "/favicon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/favicon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Tips for Best Results

• Always design at the largest size (512x512) and scale down — never scale up from a small image
• Test your favicon at 16x16 to ensure it's still recognizable at the smallest size
• Use PNG for best quality; ICO only if you need to support very old browsers
• Keep file sizes small — favicons are loaded on every page visit