Apple Touch Icon Dimensions

Recommended size: 180 × 180 pixels

180 × 180
1:1

The Apple Touch Icon is a 180×180 pixel PNG image displayed when iOS and iPadOS users add your website to their home screen. It also appears in Safari's Reading List, bookmarks, tab overview, and share sheet. Apple applies its standard rounded-corner mask and subtle shadow automatically, so you provide a square image and iOS handles the styling. This icon is separate from your favicon and targets specifically Apple devices.

Specifications

Width 180px
Height 180px
Aspect Ratio 1:1
Platform web
Category web

Size Requirements Across Apple Devices

Apple devices request different icon sizes:

  • iPhone (3×): 180×180 — this is the primary size to provide
  • iPhone (2×): 120×120
  • iPad (2×): 152×152
  • iPad Pro (2×): 167×167

If you provide only one size, make it 180×180 — iOS will downscale it for other devices. This is the recommended approach unless you need pixel-perfect icons at every size.

Add it to your HTML:

Place the file at /apple-touch-icon.png in your site root — iOS also checks this path automatically even without the link tag.

Design Guidelines

iOS applies automatic styling to your icon:

  • Rounded corners: iOS masks your square image with ~17.5% corner radius. Don't add your own rounded corners — they'll double up and look wrong
  • No transparency: iOS fills transparent areas with black. Always use a solid, opaque background
  • Glossy effect: Removed in iOS 7+. Don't add any shine or gloss to your icon

Design recommendations:

  • Fill the entire 180×180 canvas — don't leave transparent padding
  • Use a solid background color that matches your brand
  • Center your icon/logo with about 15-20% padding from the edges (the corner mask eats into the corners)
  • Test your icon with iOS's corner mask applied — several online tools preview this
  • Keep the design simple — home screen icons are roughly 60×60 points (180 actual pixels at 3×)

Relationship to PWA and Web App Manifest

If your site has a Web App Manifest (manifest.json), you should include icons there as well:

  • apple-touch-icon is read by Safari and iOS specifically
  • Manifest icons are read by Android Chrome, Edge, and other PWA-capable browsers
  • You need both for full cross-platform home screen support

Your manifest should include:

  • 192×192 PNG icon (Android home screen)
  • 512×512 PNG icon (Android splash screen)
  • Optionally: maskable icon variant with extra padding for Android's various icon shapes

The apple-touch-icon and manifest icons can be the same image at different sizes, or you can customize each platform's version. Keep them visually consistent either way.

Quick Tips

  • → Provide one file at 180×180 — iOS downscales for other devices
  • → Don't add rounded corners or gloss — iOS applies these automatically
  • → Use a solid opaque background — transparency fills with black
  • → Place at /apple-touch-icon.png for automatic discovery by iOS

Related web Sizes

Open Graph Image
1200 × 630
Favicon
32 × 32

Frequently Asked Questions

What size should the Apple Touch Icon be?

180×180 pixels. This covers the highest-resolution iPhone displays (3× Retina). iOS automatically downscales for iPads and older iPhones. Place it at /apple-touch-icon.png and add a link tag: .

Should I add rounded corners to my Apple Touch Icon?

No. iOS automatically applies its standard rounded-corner mask (~17.5% radius) to your square image. If you add your own rounded corners, they'll overlap with iOS's mask and create an inconsistent look. Provide a full-bleed square image and let iOS handle the corner rounding.

Does the Apple Touch Icon need a transparent background?

No — in fact, avoid transparency. iOS fills transparent areas with black, which usually looks wrong. Always use a solid, opaque background color. Fill the entire 180×180 canvas with your brand color and center your icon or logo with about 15-20% padding from the edges.