Developer Web

Apple touch icon size

180 × 180 1:1

JPG or PNG

iOS composites transparency onto black — use a solid background.

180 × 180

Drop an image to check it Optional — the spec is above either way. Nothing is uploaded.

Cropped in your browser · your image is never uploaded

Local · alpha is composited onto black

180 × 180 PNG, referenced with a link rel="apple-touch-icon" tag. One size covers current devices — iOS downscales it for older ones.

How to use the apple touch icon size

1 Read the dimensions above. That is the whole answer if the spec is all you came for.

2 Drop your own image in to check it against the spec — size, aspect ratio and file weight are each checked separately.

3 Turn on the safe zone to see what gets cropped or covered, then download the cropped version at the exact size.

The transparency trap is the reason this has its own page. iOS does not honour alpha in a touch icon: it composites the image onto black, so a logo exported as a transparent PNG becomes a white mark on a black square on someone’s home screen. Export with the background you actually want. iOS also applies its own rounded mask, so supplying pre-rounded corners produces a doubled effect, and it will add a gloss overlay on very old devices unless the filename uses the precomposed variant — largely historical now, but it explains icons that look oddly shiny.

Questions

What size is an Apple touch icon? −

180 × 180 PNG. iOS downscales it for older devices.

Why is my icon on a black background? +

Should I round the corners? +

Do I need multiple sizes? +

How do I reference it? +

Sources

Apple — configuring web applications

Was this tool any good?

INTERNAL SIGNAL ONLY · WE USE IT TO FIND TOOLS WORTH REBUILDING