App icons and favicons: every size you need, and how to make them all at once
George · 4 min read
The short answer: start from one square logo of at least 1024 by 1024 pixels. From it you need a favicon.ico and two small PNGs for browsers, a 180 pixel Apple touch icon, two icons and a web manifest for installed web apps, one 1024 icon for an iPhone app, ten sizes for a Mac app, and a set of densities for Android. App icons for iPhone and Android sit on a solid background, because the App Store does not accept a see-through app icon.
Icons are one of those jobs that looks small until you do it. Every platform asks for a slightly different file, and one missing file means a blank square somewhere: in a browser tab, on a home screen, or in a bookmark. Here is the whole list in one place.
Why the icon matters more than it looks
Your icon is how people find you again. A browser tab, a bookmark, a phone home screen and a dock all show it long after the first visit. In a row of open tabs it is often the only thing that tells someone which one is yours. A default or blank icon is easy to lose. A clear one is found in a glance.
The icons for a website
- favicon.ico at the root of your site, holding 16, 32 and 48 pixel pictures. Some browsers, tools and feed readers only ever ask for /favicon.ico.
- favicon-16x16.png and favicon-32x32.png, which modern browsers use for tabs.
- apple-touch-icon.png at 180 by 180, used when someone adds your site to an iPhone home screen. Give it a solid background.
- 192 and 512 pixel icons listed in a site.webmanifest, used when your site is installed as a web app, mostly on Android.
- A maskable icon, which keeps the logo in the middle so Android can crop it into a circle or another shape without cutting anything off.
Then a few lines in the head of your pages point browsers to these files.
The icons for an iPhone app
Since Xcode 14, an iPhone app needs only one 1024 by 1024 icon in its asset catalog. Xcode makes every smaller size from it.
The important rule: the App Store icon can not be transparent or have an alpha channel. A PNG straight from a design tool often has one even when it looks solid, and App Store Connect turns the build down for it. Put the logo on a solid colour and save it without transparency.
Do not round the corners yourself either. iOS adds the rounded shape for you.
The icons for a Mac app
Mac icons work differently. A Mac app icon is drawn as a rounded square with some space around it, so it lines up with other apps in the dock and in Finder. Apple's template puts an 824 pixel rounded square inside a 1024 canvas, and the area outside the square stays transparent.
Xcode asks for ten files: 16, 32, 128, 256 and 512 points, each at 1x and 2x.
The icons for an Android app
Android launcher icons come in densities: 48, 72, 96, 144 and 192 pixels, one in each mipmap folder of your project. The Play Console asks for a separate 512 by 512 icon for your store listing.
What makes a good icon at small sizes
At 16 pixels there is room for a shape and a colour, not for words. If your logo includes your name, try just the mark. Keep strong contrast with the background, avoid thin lines, and check the result at its smallest size before you decide.
Make the whole set at once
Making each file by hand takes a while and is easy to get slightly wrong. The free app icon and favicon generator takes one logo and gives you every file above in one zip, with folders for the web, iPhone, Mac and Android, the Xcode Contents.json files, the web manifest and the tags to paste. It runs in your browser, so your logo is never uploaded, and the iPhone and Android icons come out without an alpha channel.
The short version
- Start from a square logo of at least 1024 pixels, or an SVG.
- Websites need favicon.ico, two small PNGs, an Apple touch icon and a manifest with 192 and 512 icons.
- iPhone apps need one solid 1024 icon with no transparency.
- Mac apps need ten sizes, drawn as a rounded square in Apple's template.
- Android needs five densities plus a 512 icon for the Play Console.
- Check your icon at 16 pixels before you call it done.