iOS Favicon Guide: Apple Touch Icons & Safari Implementation 2024

Apple Touch Icon: The Essential iOS Favicon

The Apple Touch Icon is what iOS displays when users save your website to their home screen. Unlike traditional favicons, Apple touch icons appear as app-like icons with iOS automatically adding rounded corners and a glossy effect (in older iOS versions).

Quick Tip: Always provide a 180x180px apple-touch-icon.png file. This single size works for all modern iOS devices and will be scaled automatically.

Required iOS Icon Sizes

180x180 pixels (Required)

Filename: apple-touch-icon.png

Use: iPhone, iPad home screen

This is the universal size that works for all iOS devices. iOS will scale it as needed.

📱

Other Sizes (Optional)

152x152: iPad non-Retina
167x167: iPad Pro
120x120: iPhone 2x

iOS will fall back to 180x180 if these aren't present.

HTML Implementation

Basic Implementation (Recommended)

The simplest and most effective approach:

<!-- Place this in your <head> section -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Complete Implementation with All Sizes

If you want to provide specific sizes for each device:

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

Safari Pinned Tab Icons

Safari on macOS displays a monochrome icon when users pin your site. This requires an SVG file:

Safari Pinned Tab Requirements:

Format: SVG (vector format)
Style: Single color, typically black
File: safari-pinned-tab.svg
Complexity: Simple, recognizable silhouette

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

iOS-Specific Considerations

1. Rounded Corners

iOS automatically applies rounded corners to your icon. Design your icon with this in mind:

Don't pre-round corners in your design
Keep important elements away from corners
Use the full 180x180 canvas
iOS will crop to rounded square automatically

2. No Glossy Effect Needed

Older iOS versions added a glossy overlay effect. This is no longer applied in modern iOS (iOS 7+), so:

Design your icon with the final appearance in mind
Add any shine/gloss effects directly to your design
Ignore the "precomposed" variant (obsolete)

3. Retina Display Optimization

All modern iPhones and iPads have Retina displays (2x or 3x pixel density). The 180x180 size handles this automatically:

iPhone: Displays at 60x60 points (180 physical pixels)
iPad: Displays at 76x76 points (152 physical pixels)
Result: Always looks crisp on any device

Web App Metadata for iOS

Make Your Site Behave Like an App

Add these meta tags to enhance the iOS web app experience:

<!-- Make it fullscreen when launched from home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Status bar style (black, default, or black-translucent) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- App title when saved to home screen -->
<meta name="apple-mobile-web-app-title" content="MyApp">

<!-- Prevent auto-detection of phone numbers -->
<meta name="format-detection" content="telephone=no">

apple-mobile-web-app-capable

Removes Safari UI when app is launched from home screen

status-bar-style

Controls appearance of iOS status bar at top of screen

apple-mobile-web-app-title

Custom name shown under home screen icon

Testing on iOS Devices

iPhone Testing Steps

Follow these steps to test your Apple Touch Icon on iPhone:

Open Safari and navigate to your website

Make sure you're using Safari, not Chrome or other browsers

Tap the Share button (square with arrow)

Located at the bottom of the screen in Safari

Scroll down and tap "Add to Home Screen"

You may need to scroll to find this option

Verify your icon appears correctly

Check that the icon looks good with iOS rounded corners

Tap the home screen icon to test launch behavior

Ensure the web app launches properly

iPad Testing Steps

Test your Apple Touch Icon on iPad for optimal display:

Open Safari on iPad

Use the full Safari browser, not a web view

Navigate to your website

Make sure the site loads properly on iPad

Tap Share → Add to Home Screen

Same process as iPhone but on larger screen

Check icon appearance (152x152 is ideal for iPad)

iPad uses different icon sizes than iPhone

Test on both portrait and landscape orientations

Ensure icon looks good in both orientations

Common iOS Icon Issues

🔧 Troubleshooting iOS Icons

Issue: Icon not appearing

Solution: Check file path, ensure apple-touch-icon.png is in root directory, clear Safari cache

Issue: Icon looks blurry

Solution: Use 180x180 minimum, ensure image is high quality, avoid upscaling small images

Issue: Wrong icon displays

Solution: iOS caches aggressively. Delete home screen icon, restart Safari, add again

Issue: Corners cut off design

Solution: Keep important content 10% away from edges, iOS adds ~18% corner radius

Design Best Practices for iOS

Follow Apple's Human Interface Guidelines

Fill the canvas: Use full 180x180 space, no transparent borders
Avoid text: Icons should be symbolic, not word-based
Simple shapes: Recognizable at small sizes
Consistent style: Match your brand but fit iOS aesthetic
Test on device: Emulators don't show actual device appearance

Color Considerations

Use vibrant, saturated colors (iOS icons are colorful)
Ensure good contrast with home screen wallpapers
Avoid pure white or pure black as main colors
Test on both light and dark mode home screens

File Organization

Recommended File Structure

website-root/
├── apple-touch-icon.png (180x180) ← Required
├── apple-touch-icon-152x152.png (Optional)
├── apple-touch-icon-167x167.png (Optional)
├── apple-touch-icon-120x120.png (Optional)
└── safari-pinned-tab.svg (Optional, for macOS Safari)

Validation Checklist

Before Launch - iOS Icon Checklist

☐ 180x180 apple-touch-icon.png created and optimized
☐ File placed in website root directory
☐ HTML link tag added to <head> section
☐ Icon tested on actual iPhone (not just simulator)
☐ Icon tested on iPad
☐ Icon looks good with iOS rounded corners
☐ Web app meta tags added (if building web app)
☐ Safari pinned tab icon created (if targeting macOS)
☐ Design works on both light and dark home screens
☐ File size under 100KB

Generate iOS Icons Automatically

Our favicon generator creates all iOS icon sizes including 180x180 apple-touch-icon with perfect optimization. Get implementation-ready files in seconds.

Create iOS Icons Now →

iOS Favicon & Apple Touch Icon Guide