Apple Touch Icon Setup - Complete iOS Configuration (2025)
Learn how to add Apple Touch Icon for iOS Safari home screen. Create the 180×180 PNG icon, add HTML tags, and test on iPhone and iPad.
When users add your website to their iPhone or iPad home screen, iOS Safari looks for a special icon called the Apple Touch Icon. Without it, iOS will take a screenshot of your page and use that as the icon—which usually looks terrible (imagine a tiny, blurry screenshot of your homepage).
This tutorial shows you how to create the right size (180×180 PNG), add the HTML tags, and test the icon on real iOS devices. Takes about 5 minutes to set up, and works on all modern iPhones and iPads.
How iOS uses Apple Touch Icon
Unlike desktop browsers that read favicon.ico, iOS Safari relies on dedicated Apple Touch Icon PNG files for the home screen, app switcher, and Spotlight search results. It's Apple's version of a favicon—but unlike favicons, iOS doesn't use the standard <link rel="icon"> tag or the web manifest. You need a separate <link rel="apple-touch-icon"> tag.
Why doesn't iOS use the web manifest like Android? Because Apple introduced the Apple Touch Icon in 2007 (before the web manifest standard existed), and they've stuck with it for backward compatibility. So if you want your site to look good on both iOS and Android, you need both an Apple Touch Icon and a web manifest.
Step 1: Prepare your 180×180 PNG icon
Apple recommends a 180×180 PNG file for modern iPhones and iPads (iPhone 6 and later, all iPad Pros, all iPad Airs). Older devices used smaller sizes (120×120, 152×152), but 180×180 works everywhere—iOS will automatically downscale it if needed. Don't bother creating multiple sizes unless you're targeting very old devices (iPhone 5 and earlier).
If you generated your favicon package with our Image Converter, you already have PNG files in various sizes. Look for the 192×192 PNG (close enough to 180×180) or regenerate a 180×180 PNG specifically for iOS. Place the file in your site's root directory (like /apple-touch-icon.png) or in an /icons/ folder (like /icons/apple-touch-icon.png).
Important: Don't add your own rounded corners or drop shadows to the source image. iOS adds rounded corners and a subtle drop shadow automatically. If you add them yourself, you'll end up with double-rounded corners or double shadows, which looks awful. Keep your source image square with sharp corners, and let iOS handle the styling.
Step 2: Add the apple-touch-icon link tag
Add this line to your HTML <head> section: <link rel="apple-touch-icon" href="/apple-touch-icon.png">. iOS will fetch the file when the user taps "Add to Home Screen" in Safari. Make sure the href path is correct—if your icon is in a subdirectory, use the full path like href="/icons/apple-touch-icon.png".
For a single modern icon, you can start with a 180×180 file and a simple link tag (no sizes attribute needed). If you want to support older devices, add multiple sizes: <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png"> and <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png">. Declare the largest size first so iOS can pick the best match for high-density screens.
Make sure the file is served from your domain's root directory (like https://yoursite.com/apple-touch-icon.png) or use an absolute path. iOS sometimes looks for the icon at the root even if you specify a different path, so putting it in the root is the safest option. If you're using a CDN, make sure the icon is accessible without authentication.
Step 3: Combine with web manifest for Android
Even if you already have a web manifest with icons (for Android and desktop Chrome), iOS still pays special attention to apple-touch-icon tags when building the home screen icon. The web manifest icons won't work on iOS—you need both systems.
Keep the design of your Apple Touch Icon consistent with the icons listed in your manifest.json so users see the same brand across platforms. Use the same logo, same colors, same style—just make sure the Apple Touch Icon is 180×180 and the manifest icons are 192×192 and 512×512.
Step 4: Test on real iOS devices
Open your site in Safari on an iPhone or iPad, tap the Share button (the square with an arrow pointing up), and choose "Add to Home Screen". You should see a preview of your 180×180 icon with rounded corners applied by iOS. Check the icon, the background color, and the name shown under the icon. If you see a screenshot of your page instead, the <link rel="apple-touch-icon"> tag is missing or the file path is wrong.
After adding the icon to the home screen, tap it to confirm that it launches your site correctly. The icon should look sharp and clear—not blurry or pixelated. If it looks blurry, your source image was probably too small (less than 180×180). Regenerate the icon from a higher-resolution logo (at least 512×512) using our Image Converter.
After changing icons, remove the old home screen shortcut and add it again—iOS caches icons aggressively, and it won't update automatically. Don't have an iPhone or iPad? Use the iOS Simulator that comes with Xcode (free download for Mac users). It's not perfect, but it's good enough for basic testing.
Apple Touch Icon configured?
Once your Apple Touch Icon is working on iOS, don't forget to add Android support with a web manifest. iOS and Android use completely different systems for home screen icons, so you need both. If you only have an Apple Touch Icon, Android users will see a generic icon or a screenshot.