X Xerobit
Frontend & Design

Apple Touch Icon — Add an iOS Home Screen Icon to Your Website

The apple-touch-icon is the image iOS uses when someone adds your site to their home screen. Here's the correct size, HTML code, and how to create an icon that looks great on...

Mian Ali Khalid · · 4 min read
Use the tool
Favicon Generator
Generate favicon package from any image or emoji. Multiple sizes (16, 32, 48, 180, 192, 512), manifest.json, and HTML snippet.
Open Favicon Generator →

The apple-touch-icon is the image that appears on an iPhone or iPad home screen when a user saves your website using Safari’s “Add to Home Screen” feature. Without it, iOS takes a screenshot of your page — which looks terrible. With it, your site gets a proper app icon.

Use the Favicon Generator to create apple-touch-icon PNG files at the correct size.

The correct size

180×180 pixels — this is the size for modern iPhones (iPhone 8 and later, all Retina display models).

iOS automatically scales the 180×180 image down for smaller contexts:

  • iPhone home screen: 120×120 display pixels (180×180 at 1.5× → 2× with safe margin)
  • iPad: uses 167×167 or 152×152 depending on model

You can provide multiple sizes, but a single 180×180 PNG covers all modern Apple devices.

HTML implementation

<head>
  <!-- Modern Apple devices: -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
</head>

That’s it. One file, one tag. iOS handles the rest.

The sizes attribute is optional but recommended for clarity. If omitted, iOS uses the default size.

File naming and placement

Recommended filename: apple-touch-icon.png

Placement: Root of your domain (/apple-touch-icon.png).

iOS looks for this file at the domain root automatically, similar to how browsers look for favicon.ico. Including the <link> tag ensures it’s found even if the automatic discovery doesn’t work in all contexts.

Multiple size fallbacks (optional)

For maximum compatibility across older Apple devices:

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

iOS selects the best matching size. In practice, providing only 180×180 is sufficient for all devices launched since 2017.

Design guidelines

No transparency

iOS applies a white background behind transparent images. If your icon uses transparency (like a logo with a transparent background), iOS shows it on white — which often looks wrong.

Solution: Use a solid background color that matches your brand:

Logo mark + brand-colored background = proper app icon

Rounded corners

iOS automatically clips your image to rounded corners. Don’t add rounded corners to the image itself — iOS handles this.

Don’t pre-clip the corners; provide a full square image.

Safe zone

iOS may clip 10–20px from edges on some models. Keep key content (logo, text) within a safe zone:

180×180 image:
- Outer 15px (each side): avoid putting content here
- Inner 150×150px: safe zone for primary content

No status bar overlay

Old iOS versions supported apple-touch-icon-precomposed (image without iOS gloss effect). Modern iOS doesn’t add any gloss overlay, so this distinction no longer matters.

Creating the apple-touch-icon

From command line (ImageMagick)

# Resize logo to 180×180 with white background:
convert logo.png -resize 180x180 \
        -background white -flatten \
        apple-touch-icon.png

# Or with brand-color background:
convert logo.png -resize 120x120 \
        -gravity center \
        -background "#3b82f6" \
        -extent 180x180 \
        apple-touch-icon.png

Python (Pillow)

from PIL import Image, ImageDraw

def create_apple_touch_icon(logo_path, background_color='#3b82f6', size=180):
    # Open and convert logo to RGBA:
    logo = Image.open(logo_path).convert('RGBA')
    
    # Create background:
    background = Image.new('RGB', (size, size), background_color)
    
    # Resize logo to fit with padding:
    logo_size = int(size * 0.65)  # 65% of icon size
    logo = logo.resize((logo_size, logo_size), Image.LANCZOS)
    
    # Center logo on background:
    offset = ((size - logo_size) // 2, (size - logo_size) // 2)
    background.paste(logo, offset, logo)
    
    background.save('apple-touch-icon.png')
    print(f'Created apple-touch-icon.png ({size}×{size})')

create_apple_touch_icon('logo.png', background_color='#3b82f6')

Framework setup

Next.js (App Router)

// app/layout.tsx
export const metadata = {
  appleWebApp: {
    capable: true,
    statusBarStyle: 'default',
    title: 'Your App Name',
  },
  icons: {
    apple: [
      { url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
    ],
  },
};

Vite / React

<!-- public/index.html -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Place apple-touch-icon.png in the public/ directory.

Testing

On iPhone:

  1. Open Safari and navigate to your site
  2. Tap the Share button (box with arrow)
  3. Select “Add to Home Screen”
  4. Check that your icon appears (not a screenshot)

Simulators: Xcode’s iOS Simulator supports “Add to Home Screen” for testing without a physical device.

Remote testing: BrowserStack and LambdaTest provide real iOS device testing.

Related posts

Related tool

Favicon Generator

Generate favicon package from any image or emoji. Multiple sizes (16, 32, 48, 180, 192, 512), manifest.json, and HTML snippet.

Written by Mian Ali Khalid. Part of the Frontend & Design pillar.