Apple Touch Icon Missing on iOS? Fix Home Screen Icons

8 min read

June 7, 2026

You added your site to the iPhone home screen and got a blurry screenshot, a generic white tile, or a cropped chunk of your homepage instead of your logo. iOS does not use rel="icon" for home screen shortcuts. It looks for apple-touch-icon, a dedicated square PNG, usually 180×180 pixels.

This guide explains what apple-touch-icon does, how iOS picks it, and how to fix missing or wrong home screen icons. Scan your URL with Favicon Check to see if the tag and file are detected.

What apple-touch-icon is for

Apple introduced apple-touch-icon before standard favicon link tags were widely used on mobile. iOS Safari reads it when users tap Share > Add to Home Screen.

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

Context	Tag	Typical size
iOS home screen shortcut	apple-touch-icon	180×180 PNG
iOS browser tab	rel="icon"	32×32 or similar
macOS Safari tab	rel="icon"	32×32 PNG or ICO
macOS pinned tab	mask-icon SVG	Vector silhouette

A working tab favicon does not populate the home screen tile. Many developers fix tab icons and still hear "favicon broken on iPhone" when apple-touch-icon was never added.

Cross-reference: Wrong Favicon on Mobile Home Screen? for tab vs tile confusion.

What iOS does when apple-touch-icon is missing

Without a valid tag and file, iOS may:

Capture a thumbnail screenshot of the page (often ugly)
Use a low-resolution crop of the page title area
Show a generic icon with the first letter of the site name
Reuse a cached tile from a previous version of your site

None of these match your brand. The fix is always a proper PNG and explicit link tag in server HTML.

iOS does not fetch /favicon.ico for home screen tiles the way desktop browsers do for tabs.

Required size and format

Apple documents 180×180 as the standard for current iPhones. Older docs mention 152×152 for iPad; one well-designed 180×180 file scales down acceptably for most cases.

Rules:

Format: PNG. Do not use ICO, SVG, or JPEG for apple-touch-icon.
Shape: Square canvas. Non-square logos need padding, not stretching.
Background: Opaque. Transparent PNGs get a black or white fill unpredictably.
Safe zone: Keep logo marks inside center 80% to survive minor cropping on older devices.

Full size matrix: Favicon Sizes Guide.

Step 1: Add the link tag to server HTML

Place in <head> of your global layout, not injected by client JavaScript:

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

Optional legacy sizes if you maintain a full set:

<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

Modern iOS picks the best match from declared sizes. One 180×180 entry is enough for most sites today.

Copy-paste full head block: How to Add a Favicon to Your Website.

Step 2: Create and upload the PNG

Export 180×180 from your design tool. Center the mark with even padding on all sides.

Upload to your static root:

/public/apple-touch-icon.png

Verify direct access:

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

Safari on iPhone should display the image inline when opening that URL.

Run Favicon Check on your homepage. apple-touch-icon should appear in the list with a preview thumbnail.

Step 3: Test Add to Home Screen

On a test iPhone:

Open Safari (Chrome on iOS also uses WebKit; home screen behavior is similar for shortcuts)
Navigate to your production URL
Tap Share > Add to Home Screen
Preview tile should show your PNG before you confirm
If preview is wrong, fix server tags before saving shortcut

Remove any old shortcut before retesting after fixes. iOS caches tiles per shortcut URL.

Cache bust by renaming:

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

See Favicon Not Updating After Change?.

Multiple apple-touch-icon tags

You can declare several sizes. iOS selects the closest match:

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

Problems occur when:

A tag without sizes points at an old file
Duplicate tags conflict with different hrefs
Largest declared size is actually a tiny upscaled favicon

Audit all tags with Favicon Check and remove dead entries.

apple-touch-icon-precomposed (legacy)

Older sites used:

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

Apple once added gloss and rounded corners automatically. precomposed skipped that effect. Modern iOS no longer applies gloss. Use standard apple-touch-icon for new projects.

Common mistakes

Reusing 32×32 favicon.png

Upscaled small icons look blurry on the home screen. Design at 180×180. Blur fixes: Favicon Looks Blurry?.

Transparent PNG without background

iOS may fill transparency with black or white. Use opaque background matching your brand.

Tag only on homepage template

Blog posts missing apple-touch-icon still break when users bookmark deep links and add to home screen from there. Put tags in global layout.

Expecting manifest.json to replace apple-touch-icon on iOS

Web app manifest icons matter for installed PWAs on Android. iOS home screen shortcuts still prefer apple-touch-icon in HTML for most cases.

Wrong path or 404

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

404 on that path means generic tile. Open URL directly to confirm 200.

General path debugging: Favicon Not Showing in Browser?.

Android note (different tag)

Android installed PWAs use manifest icons, not apple-touch-icon:

"icons": [
  { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }
]

iOS-only fix here. Android home screen: Wrong Favicon on Mobile Home Screen?.

Framework setup hints

Next.js App Router: place apple-icon.png in app/ or add metadata icons in layout.tsx.

WordPress: Site Icon feature generates apple-touch sizes. Confirm theme outputs link tags in <head>.

Static HTML: one PNG in root plus single link tag is enough.

web app manifest and iOS standalone mode

When users "Add to Home Screen" on a site with a linked manifest and display: standalone, iOS may prefer manifest icons in some configurations. HTML apple-touch-icon remains the reliable baseline for standard shortcuts.

If both exist, keep them visually identical to avoid different tiles for PWA install vs Safari shortcut:

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

{
  "icons": [
    { "src": "/apple-touch-icon.png", "sizes": "180x180", "type": "image/png" }
  ]
}

Reusing the same PNG path reduces asset drift. Scan with Favicon Check to confirm both HTML and manifest reference reachable files.

Dark mode and tinted home screen backgrounds

iOS applies tinted backgrounds behind home screen icons based on wallpaper. Opaque apple-touch-icon PNGs with consistent brand colors survive wallpaper changes better than transparent logos that rely on iOS fill behavior.

Test your 180×180 asset on both light and dark wallpapers on a physical device. What looks fine in Figma on white may disappear on a busy photo wallpaper.

Before major campaigns where users add your site to home screen, run Favicon Check on staging and production. Confirm apple-touch-icon preview matches the approved brand asset from design.

Step-by-step fix workflow

Confirm symptom is home screen tile, not browser tab.
View-source. Search apple-touch-icon.
If missing, create 180×180 PNG and add link tag to layout.
Deploy. Open PNG URL on phone. Must return 200.
Scan with Favicon Check.
Delete old home screen shortcut on test device.
Add to Home Screen again from Safari.
Optional: Open Graph scanner for launch-day metadata QA.

FAQ

Is apple-touch-icon required for iOS?

Required for a branded home screen tile. Without it, iOS generates a fallback that rarely looks good.

What size should apple-touch-icon be?

180×180 pixels for current iPhones. See Favicon Sizes Guide.

Does apple-touch-icon affect browser tabs on iPhone?

No. Tabs use rel="icon". apple-touch-icon is only for home screen shortcuts and some bookmark contexts.

I added apple-touch-icon but the tile is still wrong

Remove old shortcut and re-add. iOS caches tiles. Or change href to a new filename to bust cache.

Can I use SVG for apple-touch-icon?

No. Use PNG. iOS does not reliably accept SVG for home screen icons.

One PNG for favicon and apple-touch-icon?

Bad idea. Tab needs 16×32 range. Home screen needs 180×180. Export separate files from the same master artwork.

Why does preview look right but saved tile is old?

Cached shortcut from before your fix. Delete home screen icon and create again.

How do I verify without an iPhone?

Favicon Check confirms tag and file on server. Final tile appearance still needs a real iOS device test.

Bottom line

Missing apple-touch-icon means iOS cannot show your logo on the home screen. Add a 180×180 opaque PNG, declare it in server-rendered HTML, validate with Favicon Check, and re-add the shortcut after removing cached tiles. Tab favicons and home screen icons are separate jobs; fix both for a consistent mobile brand presence.