Mobile Favicons: Apple Touch Icon, Android Chrome Sizes, and PWA Icons

Quick answer: the four mobile icon files

Your tab favicon is not what phones put on the home screen. iPhones and Android devices each look for their own, larger icons:

A maskable 512×512 icon is an optional fifth file. The favicon generator creates all four files above in one ZIP. The rest of this guide covers what each file needs to look right.

Jump to: Apple touch icon · Android Chrome icon sizes · Maskable icons · Web app manifest · Troubleshooting

Apple touch icon

When someone taps Share → Add to Home Screen in Safari, iOS looks for an Apple touch icon. Without one, it uses a shrunken screenshot of the page or a grey letter tile.

Size and HTML

Use a single 180×180 PNG. It covers every current iPhone and iPad — iOS scales it down for smaller slots, so the old 57, 60, 72, 76, 120, 152 and 167 px variants are no longer needed.

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

Keep the file at exactly /apple-touch-icon.png as well. Safari requests that path even when the tag is missing, and so do many link-preview services.

Design rules

• Solid background. iOS fills transparent pixels with black. A transparent logo becomes a logo on a black square.
• Square corners. iOS applies its own rounded mask. If you pre-round the corners you get a visible double edge.
• About 10% padding. Keep the mark away from the edges so the mask does not clip it.
• Simple mark. The tile appears at roughly 60 points next to native app icons. Thin lines and small text vanish.

The -precomposed suffix and apple-touch-icon-precomposed rel value date from iOS 6, when Apple added a gloss effect. They are ignored now.

Home-screen name

iOS uses the page title as the label under the icon unless you set a shorter one:

<meta name="apple-mobile-web-app-title" content="Studio">

Updating the icon

iOS stores the icon when the shortcut is created. After you change it, delete the home-screen shortcut and add it again — clearing Safari's cache alone does not refresh existing shortcuts.

Need the file? Generate it from an icon or your logo with the favicon generator, make one from your initials if you have no logo yet, convert a vector logo with SVG to favicon, or turn a PNG or JPG logo into the full set with the favicon package generator. All of them export apple-touch-icon.png at 180×180 on a solid background.

Android Chrome icon sizes

Android does not use <link rel="icon"> for the home screen. Chrome reads the icons listed in your web manifest instead.

Chrome needs both the 192 and 512 icons in the manifest before it treats your site as installable. With only small icons, Android falls back to a low-resolution favicon on a white plate, or a generated letter tile.

The file names are a convention, not a rule — any name works as long as the manifest src matches the file exactly, including upper and lower case. Both files must be PNG; SVG manifest icons are not reliably used for install.

The splash screen

When an installed web app launches, Android shows a splash screen built from three manifest fields: the 512×512 icon, background_color and name. If the splash screen looks wrong, check those three before anything else. Make background_color match your icon background so the transition into the page looks intentional.

Maskable icons: why Android crops your logo

Android launchers draw icons in the device's shape — circle on Pixel phones, squircle or rounded square on others. A normal manifest icon is shrunk onto a white circle so nothing gets cut off. A maskable icon instead fills the whole shape edge to edge, like a native app.

The safe zone

The launcher may crop anything outside a centred circle whose diameter is 80% of the icon (a radius of 40%). In a 512×512 image, that is the central circle about 410 px across. Your logo must sit entirely inside it; the background must fill the full square.

How to make one

1. Start from your 512×512 icon with a solid background colour — no transparency.
2. Shrink the mark so it sits within the central 80% circle. In the FaviconStudio generator, increase Padding until the mark sits well inside the edges, then download.
3. Rename the 512 px file to maskable-512x512.png and add it to the manifest as a separate entry.
4. Preview it with a maskable-icon checker (search "maskable icon editor") or Chrome DevTools → Application → Manifest, which shows the icon cropped to a circle.

Do not use "any maskable"

Give the maskable icon its own entry with "purpose": "maskable". Combining both purposes on one file ("purpose": "any maskable") means the padded image is also used where no mask is applied, so your logo looks too small there. Chrome's DevTools flag this setup.

The web app manifest

The manifest is a small JSON file that tells Android which icons to use and how the installed app should behave.

{
  "name": "Northwind Coffee",
  "short_name": "Northwind",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/maskable-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#7c2d12",
  "background_color": "#7c2d12",
  "display": "standalone",
  "start_url": "/"
}

Link it from every page and serve it with a JSON content type (application/manifest+json or application/json):

<link rel="manifest" href="/site.webmanifest">

The most common manifest bug is invalid JSON — usually a trailing comma after the last icon. Chrome then ignores the whole file silently. Open the manifest URL in your browser to confirm it parses.

Complete head for mobile and desktop

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#7c2d12">
<meta name="apple-mobile-web-app-title" content="Northwind">

You do not need <link rel="icon"> tags for the 192 and 512 px files — the manifest already declares them. Why each size exists is explained in the favicon sizes guide; which file format goes where is in ICO vs PNG vs SVG.

Troubleshooting mobile icons

Testing workflow

1. Open /apple-touch-icon.png, /site.webmanifest and each manifest icon URL directly. Every one should load.
2. Run the homepage through the favicon checker. It checks the Apple touch icon, the manifest link and both manifest sizes.
3. In desktop Chrome, open DevTools → Application → Manifest to see parsed fields, icon previews and installability warnings.
4. On a real iPhone, add the site to the home screen and look at it on light and dark wallpapers.
5. On an Android phone, install the site and check the home-screen icon and the splash screen.

If the desktop tab icon is also missing, start with the favicon not showing guide.