Alttoalternative to
Convert a PDF Tools
Guide

What size should a favicon be? The full icon size guide

A single 16×16 icon used to be enough. Today a “finished” site needs a whole set of sizes for browser tabs, iPhone home screens and Android app installs — here's exactly which ones, and the mistakes that make icons look broken or blurry.

Guide · 5 min read

A favicon used to mean one thing: a tiny 16×16 icon in the browser tab. Today's browsers, phones and app-install systems each expect their own size and format, and a site that only ships the classic small icon ends up with a blank grey square on an iPhone home screen or a stretched, blurry logo on Android. Here's the full list of what's actually needed, and why each size exists.

The sizes a modern site actually needs

  • 16×16 and 32×32 — the classic browser-tab icon, traditionally bundled together (often with 48×48 too) inside a single favicon.ico file that most browsers look for automatically at the site's root.
  • 180×180 — the Apple touch icon, used when someone saves the page to an iPhone or iPad home screen. Referenced with a <link rel="apple-touch-icon"> tag rather than being picked up automatically.
  • 192×192 and 512×512 — used by Android and by installed web apps (PWAs), listed in the site's site.webmanifest file rather than as separate <link> tags in the page head.

All of them should come from the same source artwork, ideally a large, sharp square image (512×512 or bigger) — every smaller size gets generated down from that, rather than trying to hand-draw each size separately.

favicon.ico vs. PNG icons

.ico is an older Windows icon format that can hold several image sizes inside one file, which is why a single favicon.ico can cover 16, 32 and 48 pixels at once. It's still the default file browsers request automatically. Modern icon needs (Apple touch icon, Android/PWA icons) use plain PNG files instead, each referenced explicitly — PNG also supports transparency, which a JPG favicon can't do cleanly (see the FAQ below). A complete set uses both: the .ico for the automatic browser-tab fallback, PNGs for everything referenced explicitly.

The site.webmanifest file

Android and PWA installs don't read individual <link> tags for icons the way Apple's touch-icon system does — instead they read a small JSON file, typically named site.webmanifest, which lists the available icon sizes along with the site's name and a background colour. It's linked from the page's <head> with one line: <link rel="manifest" href="/site.webmanifest">. Without it, an Android “Add to Home Screen” install can fall back to a generic browser icon instead of the real logo.

Common favicon mistakes

Favicon sizes at a glance
FileSizeUsed by
favicon.ico16×16 / 32×32 (bundled)Browser tabs (automatic default)
favicon-32x32.png32×32Higher-density browser tabs
apple-touch-icon.png180×180iPhone/iPad home screen
android-chrome-192x192.png192×192Android home screen
android-chrome-512x512.png512×512Android splash screen / PWA install
site.webmanifest—Lists the Android/PWA icons above

The most common mistake is stopping at a single small icon and never adding the Apple touch icon or manifest — the tab icon looks fine, but the site looks unfinished the moment someone tries to save it to a home screen. The second most common is upscaling a small logo to fill the larger sizes instead of starting from sharp, high-resolution artwork, which produces a visibly blurry or pixelated icon at 180×180 and above.

How to generate a full icon set

  1. Open Altto's Favicon Generator.
  2. Upload one square source image.
  3. Download the full set — a real multi-resolution favicon.ico, every PNG size above, the site.webmanifest file, and a ready-to-paste <head> snippet linking all of it.

It runs entirely in your browser tab, so there's no upload queue and nothing sent to a server — every size is generated locally from your source image.

Common questions

What is the difference between favicon.ico and a PNG icon?
favicon.ico is an older format that can bundle several sizes (typically 16×16, 32×32 and 48×48) inside a single file, which is what most browsers still look for by default at /favicon.ico. Modern browsers, Apple's touch-icon system and Android/PWA installs all use plain PNG files instead, referenced by explicit <link> tags — a complete modern icon set includes both, so nothing falls back to a broken or blurry default.
What size should a favicon be?
There's no single size — a complete set covers several: 16×16 and 32×32 for browser tabs (bundled into favicon.ico), 180×180 for the Apple touch icon used when a page is saved to an iPhone or iPad home screen, and 192×192 plus 512×512 for Android and installed-web-app icons. Generating the smaller sizes from a large, sharp source image (512×512 or bigger) avoids the blurriness that comes from upscaling a small image instead.
Do I really need an Apple touch icon?
Only if you want the site to look finished when someone saves it to their iPhone or iPad home screen. Without a 180×180 apple-touch-icon link, iOS falls back to an automatically generated screenshot-style thumbnail of the page instead of your actual logo — it still works, it just looks noticeably less polished than every other icon on the person's home screen.
What is a site.webmanifest file for?
It's a small JSON file that tells Android and other platforms which icon sizes are available (typically the 192×192 and 512×512 PNGs), plus a name and background colour, so the site can be added to a home screen or installed as a lightweight app with the right icon and title. It's linked from the page's <head> with a single <link rel="manifest"> tag.
Can I use a JPG as a favicon?
Technically in some contexts, but PNG is the better choice almost every time, because it supports transparency — a JPG favicon gets a solid background square behind it, which looks wrong next to every other tab's clean, transparent icon. Stick to PNG (or the bundled .ico for the classic tab icon) for anything meant to sit on a transparent background.

Need a full icon set right now?

Altto's Favicon Generator runs entirely in your browser — free, no sign-up, every size plus the manifest file and head snippet in one download.

Open Favicon Generator