Generate Now

Complete Apple Touch Icon Guide

Everything you need to know about creating perfect icons for iOS devices, Safari browser, and Apple's ecosystem. From iPhone home screens to Safari pinned tabs.

What are Apple Touch Icons?

Apple Touch Icons are high-resolution icons used by iOS devices (iPhone, iPad) and macOS Safari when users save a website to their home screen or bookmarks. Introduced with the original iPhone in 2007, they give your website an app-like appearance.

Where They Appear

  • iOS home screen shortcuts
  • iPad home screen and dock
  • Spotlight search results
  • Safari Reading List
  • Safari Tab Overview
  • App Switcher on iOS

Why They Matter

  • Professional appearance on iOS
  • Better user experience
  • Increased brand recognition
  • App-like feel for web apps
  • Required for Progressive Web Apps on iOS

Apple Touch Icon Sizes

Quick Answer

For modern iOS devices, you only need 180x180 pixels. However, providing multiple sizes ensures perfect quality across all Apple devices and contexts.

Size Device/Context Introduced Status
180x180 iPhone 6 Plus and all modern devices iOS 8 (2014) Current Standard
152x152 iPad Retina (iPad Air, iPad mini Retina) iOS 7 (2013) Recommended
144x144 iPad Retina (older) iOS 6 (2012) Optional
120x120 iPhone Retina (iPhone 4S-5) iOS 7 (2013) Optional
114x114 iPhone 4/4S Retina iOS 4 (2010) Legacy
76x76 iPad (non-Retina) iOS 7 (2013) Legacy
72x72 iPad (first generation) iOS 3 (2010) Legacy
60x60 iPhone (non-Retina, iOS 7) iOS 7 (2013) Legacy
57x57 iPhone (original) iOS 1 (2007) Legacy

Apple-Specific Requirements

Apple Touch Icons have unique requirements that differ from regular favicons:

NO Transparency

Required: Solid, opaque background. Apple will reject or add a black background to transparent icons. Choose a background color that matches your brand.

Auto-Rounded Corners

Automatic: Apple adds rounded corners automatically. Design with square corners - don't add your own rounding or it will look double-rounded.

Safe Area

Recommended: Keep important elements 10-15% away from edges. Corner rounding can clip edge content.

PNG Format Only

Format: Must be PNG. ICO, SVG, and other formats are not supported for Apple Touch Icons.

Pro Tip: Design your icon as if it were a native iOS app icon. Use solid, vibrant colors and avoid tiny details.

HTML Implementation

Option 1: Default Icon (Simplest)

Place a file named apple-touch-icon.png (180x180) in your website root:

https://yoursite.com/apple-touch-icon.png

iOS will automatically find it without any HTML. This is the easiest method but offers least control.

Option 2: Single Size (Recommended)

Add one link tag for modern devices:

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

This covers all modern iOS devices. iOS will scale as needed.

Option 3: Multiple Sizes (Best Quality)

Provide specific sizes for optimal quality on all devices:

<!-- For modern iPhones -->
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180x180.png">

<!-- For iPad Retina -->
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-touch-icon-152x152.png">

<!-- For older iPhones -->
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-touch-icon-120x120.png">

<!-- For iPad -->
<link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-touch-icon-76x76.png">
Recommendation: For most websites, Option 2 (single 180x180 icon) provides the best balance of quality and simplicity.

Safari Pinned Tab Icons

Safari on macOS also supports a special monochrome SVG icon for pinned tabs. This icon appears when users pin your site in Safari's tab bar.

Requirements

  • Format: SVG only (must be valid SVG)
  • Color: Single color (monochrome)
  • Size: Viewbox should be square (e.g., 16x16)
  • Design: Simple silhouette style works best

HTML Implementation

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

The color attribute defines the color Safari uses for your icon.

SVG Example

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path d="M8 0L0 8l8 8 8-8-8-8z"/>
</svg>

Design Tips for Apple Touch Icons

Best Practices

  • Use your brand colors: Make it instantly recognizable
  • Keep it simple: Icons are small on home screen
  • Test at actual size: View at 60x60px on screen
  • Consider backgrounds: Works on light and dark iOS themes
  • Match iOS style: Look at native app icons for inspiration

Common Mistakes

  • Transparent background: Will appear broken or black
  • Adding own rounded corners: Results in double-rounding
  • Too much detail: Gets lost at small sizes
  • Text in icon: Usually unreadable on home screen
  • Low resolution: Looks pixelated on Retina displays

Testing Apple Touch Icons

On iOS Device

  1. Open your website in Safari on iOS
  2. Tap the Share button (square with arrow)
  3. Scroll down and tap "Add to Home Screen"
  4. Verify your icon appears correctly
  5. Check the home screen after adding
  6. Test on both light and dark mode

On macOS Safari

  1. Open your website in Safari
  2. Right-click on tab and select "Pin Tab"
  3. Verify pinned tab icon appears
  4. Check color matches your specification

Using Simulator

Xcode Simulator (Mac only):

  1. Install Xcode from Mac App Store
  2. Open Xcode ? Open Developer Tool ? Simulator
  3. Open Safari in simulator
  4. Navigate to your website
  5. Test "Add to Home Screen" functionality

Common Issues & Solutions

Problem: iOS shows a screenshot instead of your icon

Solutions:

  • Ensure file is named exactly apple-touch-icon.png
  • Verify file is actually PNG format
  • Check file is in correct location
  • Confirm file is 180x180 pixels
  • Clear Safari cache and try again

Problem: Your icon has unwanted black background

Cause: Icon has transparency

Solution:

  • Remove transparency from your icon
  • Add solid background color
  • Re-export as PNG with opaque background
  • Use image editor to flatten transparency

Problem: Icon appears pixelated or blurry

Solutions:

  • Use 180x180 pixels minimum
  • Start from high-resolution source (512x512+)
  • Use proper image scaling algorithm
  • Avoid upscaling small images
  • Save at high quality (low compression)

Complete Implementation Example

<!-- Apple Touch Icons for iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-touch-icon-76x76.png">

<!-- Safari Pinned Tab Icon -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

<!-- iOS Web App Settings -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="My App">

Generate Perfect Apple Touch Icons

Create all Apple Touch Icon sizes automatically with proper formatting

Generate Apple Touch Icons

Related Articles

Size Guide

All sizes explained

PWA Icons

Progressive Web Apps

Best Practices

Professional tips

An unhandled error has occurred. Reload 🗙