Guide

Favicon Sizes Explained

Browsers, operating systems, and mobile install prompts each request a different favicon resolution. Understanding why each size exists helps you ship the minimum viable set without leaving any surface unserved. This guide maps every common pixel dimension to its purpose and explains how a single 512×512 source — processed through the favicon generator — covers all of them. For the practical recommendation, also see the best favicon size guide.

For a longer walkthrough with FAQ and troubleshooting, see our step-by-step tutorial.

The 16×16 pixel favicon is the original web standard. It is used in browser tabs on standard (96dpi) displays, in the bookmarks toolbar on all desktop browsers, and in some browser history lists. Because 16×16 is an extremely tight canvas, your favicon design must be stripped to its simplest form: a single shape, letter, or abstract mark. Anything more complex will be illegible.

The 32×32 pixel size doubles the 16×16 and serves retina/HiDPI browser tabs at 2x density, bookmark icons at high DPI, and address bar suggestion icons in Chrome. Modern browsers request 32×32 far more often than 16×16 as high-density displays have become the majority of devices. If you could only ship one size, 32×32 would be the most impactful choice.

The 48×48 pixel size is the Windows Explorer 'medium icons' view size and is the minimum required by Google Search for favicon eligibility in search result snippets. Sites whose favicon does not meet the 48×48 minimum appear with a generic globe icon next to their URL in Google results instead of their brand mark. Always include 48×48 in your .ico bundle.

The 64×64 pixel size is used in Windows Explorer large icon view and in some Linux desktop environments. Including it in your multi-size .ico file adds negligible overhead but ensures clean rendering in file managers and shell environments. Many favicon generator tools include 64 by default as part of the standard .ico bundle.

The 128×128 pixel size serves Windows Store app tiles and high-density taskbar thumbnails. It is less commonly needed for pure web favicons but is important if your site is packaged as a PWA or if users pin it as a Windows app. Bundling it inside .ico with PNG compression keeps the file size reasonable.

The 256×256 pixel size is the largest standard .ico frame. It is used for Windows desktop shortcuts, the Windows Start menu search results, and some app-installed contexts. At this resolution, you must use PNG compression inside the .ico container rather than BMP — an uncompressed BMP 256×256 image adds 256 KB to the .ico file unnecessarily.

The 180×180 pixel size is exclusively for the iOS apple-touch-icon. When an iPhone or iPad user taps 'Add to Home Screen', Safari fetches the image declared in `<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>`. This size covers all current iPhone models (iPhone 6 Plus and later use 180×180 at 3x density; older models use 120×120 and 152×152 — a single 180 file covers all of them gracefully).

The 192×192 pixel size is the minimum required icon in a web app manifest (site.webmanifest) for Android Chrome's PWA install prompt. When users add a PWA to their Android home screen, Chrome renders the 192×192 icon in the launcher and the app icon in the recent apps switcher. Without this size in the manifest, the PWA install prompt either shows a generic icon or fails to trigger at all.

The 512×512 pixel size is the second required manifest icon. Chrome uses it for the PWA splash screen that displays while the app is loading after a home-screen launch, and for the install dialog preview on desktop Chrome OS. It is also the ideal source size for generating all smaller variants — starting from 512×512 ensures every downsampled output retains sharp edges and accurate colors.

Sizes between 512×512 and the very large 1024×1024 are primarily used for native app icons on macOS and iOS App Store submissions, not for web favicons. However, if you plan to convert your web presence into a native app using a wrapper (Electron, Capacitor, Tauri), you will need 1024×1024 for the App Store review process. Store this master file alongside your favicon package.

SVG favicons are resolution-independent and cover every density with a single file. A browser that supports SVG favicons (Chrome 80+, Edge 80+, Firefox 41+, Safari 15+) will prefer the SVG over any raster size because it renders perfectly at 1x, 2x, 3x, or any custom DPI. The trade-off is that not all contexts support SVG — Windows shortcuts, RSS readers, and older tools still need the .ico fallback.

The relationship between sizes and the .ico container is important to understand. An .ico file is not a single image — it is a multi-image archive. Each frame inside it is a separate raster image at a different size. The browser reads the ICO directory, identifies which frame best matches the size it needs, and decodes only that frame. This is why one .ico file can serve 16, 32, 48, and 64 px tabs equally well.

The recommended minimum set for a production website in 2026 is: favicon.ico bundling 16, 32, 48, and 64 px frames; apple-touch-icon.png at 180×180; android-chrome-192x192.png; android-chrome-512x512.png; favicon.svg for modern browsers; and a site.webmanifest referencing the 192 and 512 PNGs. The favicon generator produces this complete set from a single source upload in one click.

Checking whether all your favicon sizes are correctly served is straightforward with the favicon tester. Enter your site URL and the tester attempts to fetch your favicon.ico, checks for the link tags in your HTML head, and shows a preview of each size. Missing sizes are flagged with actionable recommendations.

How it works

  1. 1

    Identify the sizes you need

    For a standard web site: 16, 32, 48, 64 (in .ico) + 180 (apple-touch-icon) + 192, 512 (manifest PNGs). Add 128 and 256 to the .ico if your audience frequently uses Windows with desktop shortcuts.

  2. 2

    Generate from a 512×512 source

    Upload your 512×512 PNG or SVG to the [favicon generator](tool:favicon-generator). It exports every required size and bundles them into .ico, standalone PNGs, and a manifest automatically.

  3. 3

    Place each file in your site root

    favicon.ico, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, favicon.svg — all at the root URL of your domain.

  4. 4

    Add the link tags in <head>

    Use the generated HTML snippet. Each link tag specifies the size attribute so browsers know exactly which file to fetch for which display density.

  5. 5

    Validate with the favicon tester

    Use the [favicon tester](utility:favicon-tester) to confirm each size resolves correctly and check how your icon renders at 16, 32, and 512 px.

Try it now

Generate every favicon size

Favicon Generator

FAQ

How many favicon sizes do I actually need?+

At minimum: a multi-size .ico (16/32/48) + 180×180 apple-touch-icon + 192×192 and 512×512 for the PWA manifest. Six files total. The [favicon generator](tool:favicon-generator) produces all of them in one download.

Can one image work for all sizes?+

Yes — start from 512×512 PNG or SVG and generate every smaller size programmatically. Never upscale a tiny logo. A 512×512 source has enough pixel density to produce crisp 16×16 and 32×32 downsamples.

Which size does Google Search use?+

Google requires at least 48×48 pixels, square format, and a publicly accessible URL. Bundle 48×48 inside your .ico file to ensure your favicon qualifies for display in organic search results.

Do all browsers use the same favicon size?+

No. Chrome, Firefox, Edge, and Safari each have slightly different size preferences, and the displayed size depends on the user's display density. A multi-size .ico lets each browser pick its preferred frame without any extra link tags.

What is the difference between favicon sizes and apple-touch-icon sizes?+

Favicon sizes (16-256px) are for browser tabs, bookmarks, and Windows/Linux UI. Apple-touch-icon sizes (120, 152, 167, 180px) are for iOS home-screen icons. The two serve entirely different surfaces and are specified via different link tag rel attributes.

Is there a maximum favicon size?+

The .ico format supports up to 256×256 per frame. For web use, 512×512 PNG is the largest commonly useful size (PWA manifest). There is no technical maximum for PNG, but sizes above 512×512 are not used by any current browser or OS for favicon display.

Why does my favicon look blurry in the bookmark bar?+

Most likely you only shipped a 16×16 or 32×32 PNG, and the browser is stretching it on a high-DPI display. Include a 64×64 or 128×128 frame in your .ico bundle, or add an explicit `<link rel='icon' sizes='64x64' href='/favicon-64x64.png'>` tag.

Related tools

Related guides

Guides

Explore FetchFavicon

Categories

Converters

Utilities

Guides

Tutorials