How to Add an Apple Touch Icon to Your Site
A missing apple-touch-icon means iOS and Android have no dedicated icon to display when a visitor adds your site to their home screen or bookmarks it, so they get a blurry auto-generated screenshot instead. This is a low-severity, purely cosmetic notice with no ranking impact. The fix is a single 180x180 PNG and one link tag in your page's head.
What this means
The apple-touch-icon is a specific link tag, <link rel="apple-touch-icon" href="/apple-touch-icon.png">, that tells iOS Safari, and several Android browsers and launchers, which image to use when someone taps "Add to Home Screen" or bookmarks your page. It's a distinct concept from your favicon: the standard rel="icon" tag controls the small icon shown in browser tabs, history, and Google's mobile search results, while apple-touch-icon controls the larger square icon that ends up sitting on a phone's home screen next to native apps.
Our crawler checked every page it fetched and found no link tag containing apple-touch-icon anywhere on the site. Without one, iOS doesn't leave the spot blank. It auto-generates an icon, typically a scaled-down screenshot of whatever was in the viewport, sometimes with rounded corners stamped on top. The result is a fuzzy, unbranded square that looks out of place next to every real app icon around it.
This is a notice, the lowest severity level this audit assigns, because it has no effect on ranking, crawlability, or indexing. Nothing about how Google or AI crawlers treat your site changes. It's a polish item: a small, low-effort fix that makes your site look finished the moment someone saves it, rather than looking like an afterthought.
If you've already set a favicon or "site icon" through your CMS, this may already be half-solved. Several modern platforms generate an apple-touch-icon automatically from the same source image used for the favicon. When that's the case, this notice usually means either that step got skipped, the generated tag never made it into the rendered <head>, or a custom theme is overriding the default output.
Why it matters
Be honest about what this is: a branding and polish issue, not an SEO issue. It won't move your rankings, and skipping it won't cost you a single crawl-budget point or a place in the index. If you're triaging a long audit list, this belongs near the bottom.
Where it does matter is the moment a visitor decides to keep you around. Anyone who bookmarks your site to a phone home screen, or saves a web app you've built as a pseudo-app via "Add to Home Screen," sees your icon every time they unlock their phone. A crisp, branded icon signals a maintained, professional site. A blurry screenshot signals the opposite, and on a home screen crowded with polished app icons, that contrast is obvious.
This matters more for certain kinds of sites than others. A content blog that people rarely bookmark gets little practical benefit. A tool, web app, SaaS product, or any site you want people to return to repeatedly gets a real, if small, retention nudge from looking legitimate in that context.
One honest caveat on the AI-answer-engine angle: this specific tag doesn't influence how ChatGPT, Perplexity, or Google's AI Overviews cite or display your site. When those tools show a small site icon next to a citation, they pull it from your regular favicon, not from apple-touch-icon. So unlike a missing favicon, fixing this notice won't change how your brand shows up in an AI answer. It's purely a mobile home-screen and bookmark concern.
How to fix it
- 1
Export a 180x180 PNG from your logo
Start from a square version of your logo or brand mark. Apple's guidance is a flat, opaque 180x180 PNG: no transparency (iOS renders transparent pixels as solid black) and no pre-rounded corners (iOS applies its own rounded-square mask on top, so a source image that's already rounded gets clipped oddly). Keep the design simple. At the size it actually displays, fine detail and small text disappear, so a bold mark or a single letter on a solid background works better than a busy logo.
- 2
Add the link tag to your <head>
Place
<link rel="apple-touch-icon" href="/apple-touch-icon.png">inside the<head>of your shared template or layout, not on individual pages, so one edit covers the whole site. As a bonus, iOS Safari also auto-probes conventional paths like/apple-touch-icon.pngat your site root even without a tag present, so placing the file there is a reasonable fallback on its own. A tag pointing at a working image is still the more reliable of the two. - 3
Check whether your CMS already generates one
Before adding anything by hand, check if the site-icon or favicon setting in your CMS already covers this. WordPress's Site Icon setting, Shopify's theme favicon field, and the favicon panels in Wix and Squarespace often generate the full icon set, apple-touch-icon included, from a single upload. If you've already set one of those and this notice still fires, view the page source and confirm the tag is actually present; a custom theme or a caching layer serving stale HTML can silently drop it.
- 4
Verify on a real device or in page source
View source (Ctrl+U or Cmd+Option+U) and search for
apple-touch-iconto confirm the tag exists and the URL it points to returns a 200, not a 404. The real test is on an iPhone: open the page in Safari, tap the Share icon, choose "Add to Home Screen," and check the preview icon before confirming. If it still shows a screenshot instead of your artwork, the tag or the file path is wrong. - 5
Re-run the audit to confirm it clears
This check just looks for the tag in your crawled HTML, so there's no waiting on Google's search index the way there is with search-result icons. Deploy the change, then re-run the audit; it should clear on the next crawl. If it doesn't, double check the tag survived any build step or CDN caching that might be serving an older version of the page.
Example
<head>
<!-- Standard favicon: browser tabs, bookmarks, Google mobile SERP -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- Apple touch icon: iOS/Android "Add to Home Screen" -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<!-- Next.js App Router: same result with zero markup --
just add /app/apple-icon.png and Next.js injects the tag. -->A 180x180 PNG at /apple-touch-icon.png plus one link tag is the entire fix. Keep the source flat with no transparency or pre-rounded corners.
Platform-specific steps
Go to Appearance > Customize > Site Identity (or Site Editor > Styles on block themes) and upload a Site Icon at least 512x512px. WordPress core generates the apple-touch-icon and favicon variants from that single image automatically, so if this is already set and the notice still fires, check that your theme isn't stripping the default wp_head() output.
In the theme editor, go to Theme settings > Favicon (the exact path varies slightly by theme) and upload a square image, ideally 512x512px or larger. Most Online Store 2.0 themes emit the apple-touch-icon link automatically from that upload. Older, non-2.0 themes may need the tag added manually to theme.liquid.
Wix: Settings > Favicon, in the site dashboard. Squarespace: Design > Logo & Title, or the Favicon field under Website settings depending on your template version. Both generate a full icon set including the apple-touch-icon from one uploaded image; no manual tag editing is needed or possible on these platforms.
For static HTML, add the <link rel="apple-touch-icon"> tag to your shared head partial and place the PNG in your site root. In the Next.js App Router, drop a file named apple-icon.png into the /app directory; Next.js's Metadata Files convention detects it and injects the correct link tag automatically, no manual markup needed.
Frequently asked
No. It's flagged as a notice, the lowest severity in this audit, precisely because it has no ranking or crawlability impact. It's a cosmetic issue that only affects how your site's icon looks on a phone home screen or bookmark, not how Google or AI crawlers evaluate your content.
They're separate tags for separate places. rel="icon" is your favicon: the small icon in browser tabs, bookmark lists, and Google's mobile search results. rel="apple-touch-icon" is specifically the larger icon iOS, and some Android browsers, uses when a page is added to a home screen or saved as a bookmark shortcut. A complete icon setup includes both.
180x180 pixels, PNG, with no transparency and no rounded corners already baked in. That single size covers essentially all current iPhones and iPads; iOS scales it down where a smaller icon is needed. Older guidance mentioned separate 152x152 and 167x167 sizes for iPad, but shipping one 180x180 icon is the standard modern approach.
No. When AI answer engines display a small site icon next to a citation or source link, they pull your standard favicon, not the apple-touch-icon. This fix is purely about how your site looks on a mobile home screen or bookmark bar; it doesn't change how your brand appears in an AI-generated answer.
Does your site have this issue?
Run a free, AI-powered audit and we’ll flag this and 150+ other checks in about a minute. No signup.