Icon Size Cheatsheet

Modern browsers and operating systems each ask for icons in their own sizes, formats, and naming conventions. Ship the wrong set and you get a blurry tab icon, a pixelated home-screen shortcut, or a logo that gets cropped into a circle with its edges chopped off. This page lists every file worth generating, grouped by the platform that consumes it.

You do not need to make these by hand. Logo2Favicon produces the complete set below - correctly sized, sharp, and named - from one source image, entirely in your browser. Use this cheatsheet to understand what you are getting and why each file exists.

Browser favicons

These cover the classic tab icon, bookmarks, history entries, and the address bar across desktop and mobile browsers. The legacy .ico file is a multi-resolution container so a single request serves several pixel densities; the PNG variants give crisp rendering on high-DPI displays.

• favicon.ico- 16×16, 32×32 & 48×48 (multi-res) - the universal fallback every browser understands; lives at the site root and is auto-discovered even without a link tag.
• favicon-16x16.png - 16×16 - the smallest browser tab and bookmark size; keep your mark simple enough to read at this scale.
• favicon-32x32.png - 32×32 - the standard high-DPI tab and taskbar/pinned-site size on most desktop browsers.
• favicon-48x48.png - 48×48 - used by Windows site shortcuts and some browser UIs; also a common size inside favicon.ico.
• favicon-96x96.png - 96×96 - a larger raster favicon referenced by some browsers and desktop shortcuts for sharper rendering.

Apple (iOS & iPadOS)

When someone taps "Add to Home Screen" in Safari, iOS uses the Apple touch icon. It is rendered on an opaque background and gets the system's rounded-corner mask automatically, so supply a square, full-bleed icon with no pre-rounded corners and no transparency.

• apple-touch-icon.png - 180×180 - the single recommended size for current iPhone and iPad home screens; older devices downscale it gracefully, so one file is enough.

Android & PWA (Chrome / web manifest)

Android and installable Progressive Web Apps read their icons from the web manifest. You need standard icons for the home screen and launcher, plus a maskable icon that keeps your artwork inside a safe zone so adaptive launchers can crop it into circles, squircles, or rounded squares without clipping anything important.

• android-chrome-192x192.png- 192×192 - the primary home-screen and launcher icon on Android; also used by Chrome's install prompt.
• android-chrome-512x512.png - 512×512 - the high-resolution icon for splash screens and the app drawer; the largest standard manifest entry.
• maskable-icon-512x512.png - 512×512 (purpose: maskable) - same dimensions, but with your mark scaled into the inner safe zone (roughly the central 80%) so adaptive masks never crop it.

Microsoft (Windows tiles)

Pinned-site tiles on Windows are configured through a small browserconfig.xml file that points to the tile image and sets the tile background color. It is optional today but cheap to include for a complete set.

• mstile-150x150.png - 150×150 - the medium Windows Start-menu and pinned-site tile image.
• browserconfig.xml - XML, no fixed dimensions - references the tile image and defines the TileColor background.

Master source icon

Keep one oversized master so you can regenerate the whole set later without quality loss. Every smaller file is downscaled from a clean, high-resolution original.

• icon-1024x1024.png - 1024×1024 - the high-resolution master used to derive every other size; ideal as your canonical app icon source.

The web manifest & theme color

The site.webmanifest (sometimes named manifest.json) ties the Android/PWA icons together. It declares your app name and short_name, an icons array that lists the 192×192 and 512×512 files with their sizes, type, and purpose (use "any" for the standard icons and "maskable" for the maskable one), plus display and start_url for installable behavior.

Pair it with a theme color: set theme_color in the manifest and a matching <meta name="theme-color"> tag in your HTML so the browser toolbar, the PWA splash screen, and the Android task switcher all adopt your brand color. Logo2Favicon writes a ready-to-use manifest and the exact <head> snippet for you, so the references and your files always line up.

Generate the whole set

That is every file in a production favicon and app icon set. Rather than export, rename, and check each one by hand, drop your logo into the generator on the homepage and download the complete, correctly named bundle - plus the manifest and copy-paste HTML - in seconds, all processed privately in your browser.

Want the step-by-step walkthrough and best practices for getting a sharp result at 16×16? Read the complete favicon guide, browse all guides, or check the FAQ if you have a specific question.