Favicon vs Apple Touch Icon vs App Icon: What's the Difference?
Three names, three jobs — how favicons, Apple touch icons and app icons differ, and why a site needs all three.
· 5 min read
Quick answer: "favicon" means the small icon in a browser tab or bookmark list, "Apple touch icon" is the 180×180px PNG iOS uses when a page is saved to the home screen, and "app icon" usually refers to the larger 192×192/512×512 manifest icons Android and installable web apps use — three different names for three icons that serve three different platforms and don't substitute for each other.
People use these three terms interchangeably, and that's where the confusion starts. In practice they're not synonyms — they're three separate files, declared with three separate HTML mechanisms, read by three separate pieces of software. Get only one of them right and two platforms will quietly show something you didn't design.
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="any">
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 doesn't just skip the icon — it falls back to a screenshot of the page itself as the home-screen icon, which looks broken and unprofessional the moment someone actually checks. 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.
⇄ Try the Converter
Already have a logo, icon or PNG? Drop it in, adjust the background and padding, and download a complete favicon package — .ico, PNGs, Apple touch, manifest and the HTML snippet.
Open Converter