Favicon vs Apple Touch Icon vs App Icon: What's the Difference?

People use "favicon", "Apple touch icon" and "app icon" as if they meant the same thing. They don't. They're three separate files, declared in three different ways and read by three different pieces of software. Get only one right, and two platforms quietly show something you didn't design.

In brief: the favicon is the small icon in a browser tab or bookmark list. The Apple touch icon is the 180×180 PNG iOS uses when someone saves your page to their home screen. The app icon usually means the 192 and 512px icons in your web manifest, which Android and installed web apps use. None of them can stand in for another.

Favicon: the browser chrome icon

"Favicon" — short for "favorite icon" — refers specifically to the small icon a browser shows in the tab bar, the address bar, bookmarks, and browsing history. It's the oldest of the three, dating back to the late 1990s, and it's still governed by the smallest, simplest sizes: traditionally 16×16px for the tab itself, with 32×32px covering higher-density displays.

It's declared with a <link rel="icon"> tag in the document <head>:

<link rel="icon" href="/favicon.png" type="image/png">
<link rel="icon" href="/favicon.ico" sizes="32x32">

If no <link> tag is present at all, browsers fall back to requesting /favicon.ico at the domain root automatically — a convention old enough that it predates most of the web platform features built since. See our full favicon size guide for every size a modern site should export at this layer.

The favicon's job stops at the browser chrome. It has no involvement in home-screen icons, splash screens, or installed-app behavior — that's what the other two are for.

Apple touch icon: the iOS home-screen icon

The Apple touch icon is a specific, narrowly-defined icon: a 180×180px PNG that iOS uses when someone taps "Add to Home Screen" in Safari. It's declared with its own <link> tag:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Two things make it different from a regular favicon beyond the size. First, it's Apple-specific — no other browser or OS reads this tag for its own purposes. Second, it should not have transparency: iOS fills transparent pixels with solid black when it renders the icon, which can wreck a logo that was designed assuming a transparent background. Export this one flat, with an opaque background baked in.

If this tag is missing, iOS makes one more attempt: it requests /apple-touch-icon.png from your site root, the same way browsers request /favicon.ico. Apple.com itself works this way, with no tag at all. Only when that file is missing too does iOS build its own tile from a page snapshot, which looks unfinished next to real app icons. Our guide to favicons breaking on iPhone covers the specific ways this tag gets missed or malformed in practice.

App icon: the PWA / Android manifest icons

"App icon" isn't a formal HTML term the way the other two are — it's the common shorthand for the larger icons declared inside site.webmanifest, the JSON file that describes a site as an installable web app. These are typically 192×192px and 512×512px PNGs, referenced in an icons array:

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

Android uses the 192×192 icon for the home-screen/launcher icon and the 512×512 icon for splash screens and app switchers. Both are read by Chrome and other browsers as part of deciding whether to offer an "install app" prompt at all — a broken or missing manifest icon can suppress that prompt entirely, not just look bad. Our manifest deep-dive covers every field in that file, including the purpose: "maskable" setting that lets Android safely crop the icon into its adaptive shapes.

Side-by-side comparison

Name	Typical size	Declared via	Used by
Favicon	16×16, 32×32 (plus .ico fallback)	<link rel="icon"> or /favicon.ico	Browser tabs, address bar, bookmarks, history
Apple touch icon	180×180	<link rel="apple-touch-icon">	iOS home screen, Safari pinned tabs
App icon (manifest)	192×192, 512×512	icons array in site.webmanifest	Android home screen, PWA install, splash screens

Why a real site needs all three

It's tempting to treat these as redundant and ship just one, figuring browsers will sort it out. They won't. Each one is read by a specific platform surface that has no fallback path to the others — Safari's home-screen logic doesn't look at your manifest, and Android's install prompt doesn't look at your Apple touch icon. Skip one and that specific surface degrades independently of whether the other two are perfect.

This is also why testing in a single desktop browser tells you almost nothing. A favicon can render flawlessly in a Chrome tab while the same site shows a screenshot thumbnail on an iPhone home screen and never offers an Android install prompt at all — three completely different outcomes from one incomplete icon set. Running a live URL through a favicon checker shows you what's actually declared and loading for all three at once, rather than testing them one platform at a time.

The practical fix is to stop thinking of "the favicon" as one file. It's a small set: a favicon for the tab, a touch icon for iOS, and a pair of manifest icons for Android and PWA installs. The converter generates all three tiers from a single source logo in one pass, sized and formatted correctly for each surface rather than one image stretched to fit everywhere.