Apple Touch Icon: The Complete Guide to iOS Home Screen Icons

Your website has a beautiful favicon. It looks crisp in browser tabs. But when an iPhone user saves your site to their home screen, they see... a blurry screenshot of your webpage crammed into a rounded square.

Not exactly the professional first impression you were going for.

This happens because iOS doesn't use your standard favicon for home screen bookmarks. It uses something called an Apple Touch Icon—and if you haven't specifically provided one, iOS improvises with that unfortunate screenshot.

Here's what you'll learn in this guide:

What Apple Touch Icons are and how they differ from regular favicons
The exact sizes and formats iOS requires in 2024
How to implement Apple Touch Icons with proper HTML
Design strategies for creating icons that look native alongside real apps
Common mistakes that make your icon look amateur

Let's fix that home screen experience.

What Is an Apple Touch Icon?

An Apple Touch Icon is a special image file that iOS uses when someone saves your website to their home screen (Apple calls this a "Web Clip"). Think of it as your favicon's iOS-specific cousin—same purpose, different technical requirements.

When a user taps the share button in Safari and selects "Add to Home Screen," iOS looks for your Apple Touch Icon. If found, it displays your custom icon. If not, it takes a screenshot of your page, shrinks it down, and uses that instead.

The difference is stark. A proper Apple Touch Icon looks intentional—like your site belongs on the home screen alongside native apps. A screenshot looks like a mistake.

Apple introduced Touch Icons back in 2007 with the original iPhone. The concept was simple: give websites a way to appear as app-like icons when bookmarked. Over the years, as iPhone and iPad screen resolutions increased, the specifications evolved. But the core purpose remained the same.

Apple Touch Icon vs. Regular Favicon: Key Differences

These aren't interchangeable assets. Here's what sets Apple Touch Icons apart:

Size requirements: Standard favicons typically range from 16x16 to 48x48 pixels. Apple Touch Icons start at 120x120 and go up to 180x180 pixels—significantly larger canvases.

Shape handling: iOS automatically applies its signature rounded rectangle mask and drop shadow. You provide a square image; iOS makes it look like an app icon. This means you should never add your own rounded corners or shadows—iOS will just apply its effects on top, doubling them up.

File format: Apple Touch Icons are exclusively PNG files. No ICO, no SVG. Just PNG.

Precomposed option: Historically, you could choose between letting iOS add its glossy shine effect or providing a "precomposed" icon without effects. Modern iOS versions no longer add that gloss, but the precomposed naming convention persists.

Fallback behavior: If you're missing a favicon, browsers typically show a generic page icon. If you're missing an Apple Touch Icon, iOS shows a screenshot—which is far worse visually.

The Sizes You Actually Need in 2024

Apple's documentation has listed various sizes over the years, which creates confusion. Here's what actually matters today:

180x180 pixels — This is the primary size. It serves iPhone devices with Retina displays (which is essentially all modern iPhones). This single size covers iPhone 6 Plus through the latest models.

167x167 pixels — For iPad Pro displays.

152x152 pixels — For iPad (non-Pro) Retina displays.

120x120 pixels — For older iPhones (pre-iPhone 6 Plus).

Here's the practical reality: if you only provide one size, make it 180x180. iOS will scale it down for other devices, and the quality loss is minimal. In my testing across devices, a single 180x180 icon looks acceptable everywhere.

But if you want pixel-perfect rendering on every device, provide all four sizes. The implementation isn't complicated—it just requires a few extra link tags.

HTML Implementation

The basic implementation requires just one line in your <head> section:

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

This tells iOS: "Here's my 180x180 icon, use it everywhere."

For complete coverage across all iOS devices, use multiple declarations with size attributes:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

iOS reads these tags and selects the most appropriate size for the device. The sizes attribute is important—without it, iOS doesn't know which icon to pick and may not choose optimally.

The Precomposed Variation

You might encounter rel="apple-touch-icon-precomposed" in older tutorials. This told iOS not to add its glossy overlay effect. Since iOS 7 (released in 2013), Apple removed that gloss effect entirely, making the precomposed variant unnecessary.

However, the precomposed naming convention doesn't hurt anything. iOS recognizes both. If you're maintaining an older codebase using precomposed, there's no urgent need to change it.

File Location and Automatic Discovery

Here's something useful: if you place a file named exactly apple-touch-icon.png in your website's root directory, iOS will find it automatically—even without a link tag.

iOS checks these locations in order:

The URL specified in your link tag
/apple-touch-icon.png at your domain root
/apple-touch-icon-precomposed.png at your domain root

This automatic discovery is why many developers simply drop the file in their root directory and call it done. It works, but I recommend using the explicit link tag anyway. It's more reliable, gives you control over file naming and location, and doesn't rely on implicit behavior that could change.

Designing an Effective Apple Touch Icon

At 180x180 pixels, you have significantly more space to work with than a traditional favicon. But the design principles aren't that different—clarity and instant recognition still matter most.

Start with Your Existing Brand Assets

If you already have a favicon you're happy with, that's often the right starting point for your Apple Touch Icon. The goal is brand consistency—users should recognize your icon whether they see it in a browser tab or on their home screen.

However, don't just scale up your 32x32 favicon to 180x180. That amplifies any pixelation or artifacts. Work from your original logo file or vector source.

Fill the Canvas Appropriately

iOS applies about 10% padding when displaying your icon (the rounded corners eat into your image). Design with this in mind. Your icon shouldn't have excessive internal padding, or it'll look tiny compared to other home screen icons.

A common mistake: designers add their own "safe zone" padding, then iOS adds more, resulting in an icon that looks shrunken and amateurish next to properly designed app icons.

Fill most of your canvas. Let iOS handle the masking.

Keep It Simple

Even though 180x180 is larger than favicon sizes, it's still displayed at roughly 60x60 points on screen (due to Retina scaling). Fine details get lost. Text is rarely readable. Complex imagery becomes muddy.

The best Apple Touch Icons are bold, simple, and recognizable at a glance. Think of icons from Instagram, Spotify, Slack—single shapes, strong colors, no clutter.

If your logo has intricate details, simplify. If it includes a wordmark, consider using just the symbol. If it's horizontal, adapt it for a square format.

Consider the Home Screen Context

Your icon won't live in isolation. It'll sit alongside app icons that Apple and other companies have spent millions designing. Study the home screen environment:

Most icons use vibrant, saturated colors
Gradients are common but subtle
White space is used strategically
Icons typically have a single focal element

Your icon should fit this visual language while still standing out as distinctly yours.

Test on Actual Devices

Simulator testing only gets you so far. Export your icon, add it to a test page, and actually save it to a real iPhone's home screen. See how it looks alongside your actual apps. Check it in both light and dark mode (iOS slightly adjusts icon appearance based on wallpaper).

This real-world testing reveals issues that look fine in design software but fail in context.

Common Apple Touch Icon Mistakes

After reviewing thousands of websites' implementations, these errors appear constantly:

Mistake 1: Adding Your Own Rounded Corners

iOS applies its signature rounded rectangle mask automatically. If your image already has rounded corners, you'll get double-rounded results—corners that curve in, then out, then in again. It looks terrible.

Always provide a square image with sharp corners. Let iOS handle the masking.

Mistake 2: Including Drop Shadows

Same problem. iOS adds a subtle drop shadow to all home screen icons. Your additional shadow creates a muddy, doubled effect. Provide flat artwork without shadows.

Mistake 3: Using Transparency Incorrectly

If your icon has transparent areas, iOS fills them with black. This surprises many designers who expect transparency to show their wallpaper through. Design with a solid background color—transparency in Apple Touch Icons rarely produces the effect you want.

Mistake 4: Ignoring the Size Completely

I've seen 16x16 favicons specified as Apple Touch Icons. iOS scales them up, resulting in a blurry, pixelated mess. Always provide at least 180x180 resolution.

Mistake 5: Forgetting the Icon Entirely

The most common mistake. Many sites have perfect favicons but no Apple Touch Icon at all. The result: that ugly screenshot Web Clip.

Check your site right now. Open it on an iPhone, tap Share, and look at "Add to Home Screen." What icon appears?

Testing Your Apple Touch Icon

Before launching, verify your implementation:

Method 1: Real Device Testing

The most reliable test. On an iPhone or iPad:

Open your site in Safari
Tap the Share button
Look at the preview for "Add to Home Screen"
Actually add it and check the home screen result

Method 2: Safari Web Inspector

If you have a Mac, connect your iOS device, enable Web Inspector, and examine the resources Safari loads. You'll see which apple-touch-icon file it fetched.

Method 3: Manual URL Check

Simply navigate to yourdomain.com/apple-touch-icon.png in a browser. Does your icon appear, or do you get a 404?

Method 4: Validator Tools

Several online tools validate favicon implementations, including Apple Touch Icon checks. They'll flag missing sizes or incorrect formats.

Web App Manifest: The Modern Alternative

Apple's approach to home screen icons predates the web's standard solution: the Web App Manifest. This JSON file (manifest.json) lets you specify icons for all platforms in one place:

{
  "name": "Your Site Name",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Android Chrome uses this manifest for home screen icons. Modern Safari has partial support—but here's the catch: Safari still prefers Apple Touch Icons when available.

For maximum compatibility, implement both. The Web App Manifest handles Android and PWA scenarios, while Apple Touch Icons cover iOS. They complement rather than replace each other.

Quick Setup Summary

If you want to implement this properly in the next five minutes:

Create a 180x180 PNG image of your icon
No rounded corners, no shadows, no transparency
Name it apple-touch-icon.png
Place it in your website's root directory
Add this to your HTML <head>:

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

Done. You now have a proper Apple Touch Icon that displays correctly when iOS users save your site to their home screen.

For complete multi-size coverage, create additional sizes (167x167, 152x152, 120x120) and add the corresponding link tags.

Creating a polished Apple Touch Icon is one of those small details that separates professional websites from amateur ones. Users may not consciously notice when it's done right—but they definitely notice when it's wrong.

The good news: once implemented, Apple Touch Icons require virtually zero maintenance. The investment is front-loaded.

If you're starting from scratch and need an icon that works across all favicon sizes including Apple Touch Icon dimensions, try generating a few ideas with our favicon generator. You'll get designs optimized for tiny browser tabs and larger home screen displays in one workflow.

Frequently Asked Questions

What size should my Apple Touch Icon be?

180x180 pixels is the primary size for modern iOS devices. This single size works acceptably across all iPhones and iPads. For pixel-perfect rendering on every device, also provide 167x167 (iPad Pro), 152x152 (iPad Retina), and 120x120 (older iPhones).

Why does my Apple Touch Icon look blurry?

You're likely providing an image that's too small. iOS scales up undersized images, causing blur. Ensure your source file is at least 180x180 pixels. Also check that you're not over-compressing the PNG—high-quality export settings matter.

Do I need apple-touch-icon-precomposed.png?

Not anymore. The "precomposed" variant originally prevented iOS from adding a glossy shine effect. Since iOS 7, Apple removed that effect entirely. Both regular and precomposed versions now render identically. Stick with the standard apple-touch-icon.png naming.

Does the Apple Touch Icon affect SEO?

Not directly. Apple Touch Icons don't influence search rankings. However, they contribute to professional brand perception and user experience. A polished home screen presence may increase the likelihood of return visits from iOS users who bookmark your site.

Why does iOS show a screenshot instead of my icon?

iOS falls back to screenshots when it can't find an Apple Touch Icon. Verify your icon file exists at the correct URL, your link tag is properly formatted in the <head> section, and the file is actually a valid PNG image (not a renamed JPEG or corrupted file). Clear Safari's cache and test again.