App Icon: How It Differs From a Favicon
An app icon is the image that represents an installed app on a home screen, launcher, dock or app switcher, as opposed to a favicon, which represents a site inside a browser. On the web the same artwork serves both: iOS takes the app icon from the apple-touch-icon link tag, while Android and desktop PWAs take it from the icons array in the web app manifest. Each platform crops and masks it to its own shape, so the artwork has to be drawn to survive that.
Same artwork, different job
A favicon lives inside browser chrome, at 16 to 32 pixels, next to a page title that carries most of the meaning. An app icon lives on a home screen at 100 pixels or more, on its own, next to a dozen competitors, and it is the only thing identifying you. It gets more room and more scrutiny.
The practical difference is where the platform reads it from and what it does to it afterwards. Browsers draw a favicon as supplied. Operating systems crop app icons to a shape, add a shadow, and sometimes tint or dim them, so a mark that runs to the edge of the canvas gets clipped.
Where each platform reads the app icon from
| Platform | Source | Size to ship |
|---|---|---|
| iOS / iPadOS | link rel="apple-touch-icon" | 180x180 PNG, opaque |
| Android | Manifest icons array | 192x192 and 512x512 PNG |
| Desktop PWA | Manifest icons array | 512x512 PNG |
| Android launcher shape mask | Manifest entry with purpose maskable | 512x512 PNG, 80% safe zone |
| Windows shortcut | favicon.ico | 48x48 entry |
The two declarations that matter
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">iOS reads the first, Android and desktop PWAs read the icons array in the file referenced by the second. Between them they cover every installed-app surface.
App icon FAQ
Do I need separate artwork for the app icon and the favicon?
Usually not separate artwork, but often a separate treatment. The app icon wants a filled background and generous padding; the favicon wants the mark as large and simple as possible. Same logo, two exports.
Why does my home screen icon look like a screenshot?
iOS falls back to a screenshot of the page when it finds no apple-touch-icon link and no /apple-touch-icon.png at the site root. Adding either fixes it, though the old icon may persist until the shortcut is re-added.
What size should the source artwork be?
1024x1024 or larger, square, with no rounded corners baked in. Every platform size downscales cleanly from that, and platforms apply their own corner shapes.