Favicon Sizes Guide 2026: Every Size You Need and Why

Favicon advice online is a decade out of date. You do not need seventeen files and an .ico. Here is the short, current list — plus the design rules that keep a 16-pixel icon readable.

The modern minimum

That is genuinely it for the vast majority of sites. Add 16 × 16 and 48 × 48 if you want pixel-perfect rendering on older Windows setups, and a monochrome SVG if you want to support Safari pinned tabs.

Do you still need favicon.ico?

Only if you have meaningful traffic from Internet Explorer, which almost nobody does in 2026. Every current browser reads PNG. Some crawlers and feed readers still request /favicon.ico by default, so keeping a small one at the root avoids harmless 404s in your logs — but it changes nothing for users.

Designing an icon that survives at 32 pixels

The hardest part of a favicon is not the export, it is the artwork. A full logo with a wordmark turns into an unreadable smudge. Follow these rules:

• One idea only. A single letter, a single shape, a single symbol.
• Drop the wordmark. Text under about five characters is illegible at tab size.
• Thick strokes. Anything thinner than about 1/16th of the icon width disappears.
• High contrast. Test on both a white and a dark tab strip.
• Fill the canvas. Leave only a small margin — every wasted pixel costs you clarity.
• Avoid gradients and shadows. They mush together at small sizes.

Design at 512 × 512, then zoom out to 32 and squint. If you cannot tell what it is, simplify further.

Generating all the sizes

Start with a square master at 512 × 512 or larger, then export each size. Our favicon generator produces 16, 32, 48, 96, 180, 192 and 512 from a single upload, entirely in your browser. If your master is an SVG, convert it first with the SVG to PNG converter.

The markup

<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/favicon-180.png">
<link rel="manifest" href="/manifest.json">

And in your web app manifest:

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

Dark mode favicons

An SVG favicon can respond to the browser theme using a media query inside the file, so a black logo can flip to white on dark tab strips. PNG cannot do this. If dark mode matters to your brand, ship the SVG and let the PNG act as the fallback.

Maskable icons on Android

Android crops home-screen icons into circles, squircles and other shapes depending on the launcher. Mark your 512px icon as maskable and keep all important artwork inside the central 80% of the canvas, or corners will be sliced off.

Why your new favicon is not showing

1. Browsers cache favicons aggressively — hard-refresh, or open the icon URL directly.
2. Add a version query string such as /favicon-32.png?v=2 to force an update.
3. Check the file actually exists at the path in your markup.
4. Confirm the file is a real PNG and not a renamed JPG or SVG.
5. Some CDNs cache the root /favicon.ico for days — purge it.

Related reading

For transparency behaviour across formats see transparent background images, and for the wider format landscape read image formats explained.

Gear we recommend for this workflow

As an Amazon Associate we earn from qualifying purchases. Affiliate disclosure.

Logitech MX Creative Console 9 Customizable Keys - Graphite | Control Dial, for graphic design, Zoom and Spotify, includes 3-Month Adobe Cloud Membership, Stream Deck Accessories

Best for design shortcuts and multimedia work

$169.99

Check price on Amazon

Wacom Intuos Small, Wired Graphic Drawing Tablet with Pen + Software | Battery-free pen, 4 ExpressKeys for shortcuts, works with Mac, Windows & Chromebook; Ideal for creators, students & teachers

Best for precise retouching and illustration

$39.95

Check price on Amazon

BenQ PD2706U Mac-Ready Monitor 27” 4K UHD, 90W USB-C, 99% sRGB, 95% P3, DeltaE ≤3, DisplayHDR 400, IPS, AQCOLOR, Factory-Calibrated, Uniformity, HotKey Puck, Ergonomic, DisplayPort, KVM, USB Hub

Best for accurate color when editing photos

$399.99

Check price on Amazon

Adobe Photoshop | Photo, Image, and Design Editing Software | 12-Month Subscription with Auto-Renewal, PC/Mac

Best for professional photo editing

$263.88

Check price on Amazon

Prices as of Oct 22, 2026, 4:41 AM UTC. Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon.com at the time of purchase will apply to the purchase of this product.