Apple Touch Icon Sizes Guide: Stop Generating 15 Files

Ever checked your server logs and noticed a barrage of 404 errors for weirdly specific files like apple-touch-icon-152x152.png? You probably panicked, rushed to your design tool, and exported a dozen different variations of your logo to satisfy Apple's endless device lineup.

Stop doing that.

The official documentation historically pushed developers to create a unique image for every single screen resolution. We ended up with bloated <head> tags filled with links for the iPad Mini, the iPhone Pro, and everything in between. This apple touch icon sizes guide will show you why that approach is completely outdated in 2026.

The Definitive Apple Touch Icon Sizes Guide

When a user taps 'Add to Home Screen' on their iPhone, Safari looks for a specific PNG file to represent your site. If you don't provide one, iOS generates an ugly, unreadable screenshot of your webpage.

For years, the standard advice was to generate a massive list of files. You had 120x120 for older iPhones, 152x152 for iPads, 167x167 for iPad Pros, and 180x180 for modern iPhones. It was a maintenance nightmare that cluttered up your repository.

The Modern 'One Size' Strategy

Here is the reality of modern iOS development: Apple's rendering engine is incredibly good at downscaling images. You do not need to provide every single resolution anymore.

If you provide a high-resolution image, iOS will automatically calculate the math and scale it down to fit the user's specific device perfectly. The only size you actually need to generate today is 180x180 pixels.

This size corresponds to the @3x resolution required by the largest iPhone Pro Max models. When an older iPad requests a 152x152 icon, it simply grabs your 180x180 file and shrinks it. The visual difference is literally imperceptible to the human eye.

Real-World Proof: How GitHub Does It

Don't just take my word for it. Inspect the source code of major tech companies like GitHub, Stripe, or Vercel. You won't find a massive block of legacy Apple icons. They serve exactly one file for iOS devices.

Here is the exact HTML you should be using:

<!-- The only Apple Touch Icon you need in 2026 -->
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>

That single line replaces what used to be six lines of code. It saves bandwidth, cleans up your HTML, and satisfies every iOS device on the market. If you want to dive deeper into the exact HTML placement, check out our complete setup guide for Apple Touch Icons.

Historical Sizes vs. The 2026 Standard

To understand why we can drop the old sizes, look at how Apple's hardware has evolved. Here is a breakdown of the legacy requirements versus what we actually ship today.

Design Rules for Your 180x180 Icon

Getting the dimensions right is only half the battle. iOS treats these icons differently than standard browser favicons. If you just resize your standard logo, it will likely look broken on an iPhone home screen.

• Zero Transparency: iOS does not support transparent backgrounds for home screen icons. If you upload a transparent PNG, Apple will aggressively fill the empty space with solid black. Always use a solid background color.
• No Rounded Corners: Do not pre-round the corners of your image. Upload a perfect square. iOS automatically applies its signature 'squircle' mask over your design. If you pre-round it, you will end up with weird, double-rounded corners.
• Respect the Safe Zone: Because Apple applies that mask, any logo placed too close to the edge will get chopped off. Keep your primary graphic centered and leave about 20 to 30 pixels of padding on all sides.

What About Android Sizes?

A common mistake I see developers make is trying to use the Apple Touch Icon for Android devices. While older versions of Android might have fallen back to the Apple icon, modern Android relies entirely on the Web App Manifest.

Android requires a 192x192 and a 512x512 icon. Do not try to force your 180x180 Apple icon to do double duty here. Keep them separate. You can read more about Android requirements in our PWA icon requirements guide.

Stop Overcomplicating Your Icons

We waste too much time chasing pixel-perfect legacy resolutions. The web has moved on, and browsers are smarter than they were a decade ago.

Generate a single, high-quality 180x180 PNG. Make sure it has a solid background, keep the logo centered, and link it in your <head>. If you don't want to mess with Photoshop or Figma to get the exact padding right, just drop your logo into Mzu favicondl. We automatically handle the safe zones, remove transparency, and spit out the exact 180x180 file iOS expects, alongside your standard web favicons.