Generate Now

iOS Favicon & Apple Touch Icon Guide

Master Apple Touch Icon implementation for iPhone and iPad. Learn iOS-specific requirements, optimal sizes, and professional best practices for perfect home screen icons.

iOS Favicon Quick Facts

  • Primary Size: 180×180 pixels
  • Format: PNG only
  • Background: Must be opaque (no transparency)
  • Auto Effects: iOS adds rounded corners & shine
  • File Name: apple-touch-icon.png
  • Market Share: ~27% mobile users (US)

Why iOS Icons Are Critical

3x

More Engagement

Users with home screen icons return 3x more often

27%

Market Share

iOS users in US market

100%

App-Like

Native app experience on home screen

Recommended iOS Implementation

Essential HTML Code for iOS

<!-- Primary Apple Touch Icon (Required) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Additional Sizes for Older Devices (Optional but Recommended) -->
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">

<!-- Apple Mobile Web App Capable (PWA-like) -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Your App Name">
Simplified Approach: iOS automatically scales the 180×180 icon if other sizes aren't provided. Use 180×180 as minimum.

Apple Touch Icon Sizes

Size Device Display Priority
180×180 iPhone (Retina) iPhone X and newer Critical
167×167 iPad Pro 12.9" iPad Pro Important
152×152 iPad (Retina) iPad Mini, iPad Air Important
144×144 iPad (Non-Retina) Older iPads Optional
120×120 iPhone (Retina) iPhone 6-11 Optional
114×114 iPhone 4 Legacy Legacy
76×76 iPad Non-Retina iPad Legacy
72×72 iPad 1 First generation Legacy
60×60 iPhone Settings, Spotlight Optional
57×57 iPhone 3G Original iPhone Legacy
Recommendation for 2025: Focus on 180×180 (critical) and 152×152 (iPad). iOS handles scaling automatically for other sizes.

iOS Icon Design Guidelines

Critical Design Requirements

? Must Have

  • Opaque background: No transparency
  • Square format: Perfect 1:1 aspect ratio
  • PNG format: 24-bit PNG
  • RGB color space: Not CMYK
  • 72 DPI minimum: Standard web resolution
  • No rounded corners: iOS adds them automatically

? Avoid

  • Transparent backgrounds: Will show as black
  • Pre-rounded corners: iOS adds its own
  • Border effects: Keep edges clean
  • Small text: Hard to read at icon size
  • Complex details: Simplify for clarity
  • GIF or JPEG: Only PNG works
iOS Auto-Effects: Apple automatically applies rounded corners (approx. 22% radius), subtle drop shadow, and optional glossy effect. Design with this in mind.

Precomposed vs Standard Icons

iOS offers two types of touch icon behavior:

Standard (Recommended)

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

Behavior:

  • iOS adds rounded corners
  • iOS adds drop shadow
  • Optional glossy effect (user setting)
  • Consistent with native apps

Precomposed (Legacy)

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

Behavior:

  • No rounded corners added
  • No automatic effects
  • You control all styling
  • Less common in modern apps
Recommendation: Use standard apple-touch-icon without "precomposed" for modern, consistent appearance with native iOS apps.

iOS Web App Features

Creating App-Like Experience

Make your website behave like a native iOS app when added to home screen:

Essential Meta Tags:

<!-- Enable web app mode -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Status bar appearance -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- Options: default, black, black-translucent -->

<!-- App title (appears below icon) -->
<meta name="apple-mobile-web-app-title" content="My App">

<!-- Disable automatic phone number detection -->
<meta name="format-detection" content="telephone=no">

Status Bar Styles:

default

White background, black text (standard iOS)

black

Black background, white text

black-translucent

Semi-transparent, content behind

iOS Splash Screens (Launch Images)

iOS can display custom splash screens when launching your web app from the home screen:

Note: iOS splash screens require specific dimensions for each device. This is complex and optional for most websites.

Example for iPhone X:

<link rel="apple-touch-startup-image" 
      href="/splash-iphonex.png" 
      media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)">

Alternative: Most modern PWAs use the Web App Manifest for splash screens instead of Apple-specific tags.

Testing iOS Icons

How to Test on iPhone/iPad

Step-by-Step Testing:

  1. Open Safari on your iOS device
  2. Navigate to your website
  3. Tap the Share button (square with arrow pointing up)
  4. Select "Add to Home Screen"
  5. Verify the icon appears correctly
  6. Check the title (uses apple-mobile-web-app-title or page title)
  7. Tap the icon to launch and verify behavior

iOS Simulator Testing:

If you have a Mac with Xcode:

  1. Open Xcode ? Open Developer Tool ? Simulator
  2. Launch any iOS device simulator
  3. Open Safari in the simulator
  4. Navigate to your website and test

Common iOS Icon Issues

Cause: PNG has transparent background
Solution: iOS doesn't support transparency in touch icons. Add a solid background color to your icon.

Cause: Icon size too small
Solution: Use 180×180 minimum. Create icon from high-resolution source (512×512 or larger).

Cause: Apple Touch Icon not found or incorrect path
Solution: Verify file exists at specified path. iOS automatically checks for /apple-touch-icon.png in root if no link tag exists.

Cause: iOS caches home screen icons aggressively
Solution: Remove icon from home screen and add again. Sometimes requires device restart.

iOS Icon Best Practices

? Do's

  • Use 180×180 as primary size
  • Solid background color required
  • Design with rounded corners in mind
  • Use high-res source image
  • Test on actual iOS devices
  • Keep design simple and bold
  • Match your brand colors
  • Consider icon safe zone (10% margin)

? Don'ts

  • Don't use transparent backgrounds
  • Don't pre-round corners
  • Don't use JPEG format
  • Don't add text that's too small
  • Don't use overly complex designs
  • Don't forget iPad sizes
  • Don't ignore status bar styling
  • Don't use non-square images

Generate iOS-Perfect Icons

Create all required Apple Touch Icon sizes automatically

Generate for iOS

Related Articles

Apple Touch Icons

Detailed guide

Android Icons

Mobile comparison

Safari Favicon

Safari-specific

An unhandled error has occurred. Reload 🗙