You've seen it happen. You open a site on your iPhone, and Safari shows a crisp, branded icon on the home screen. Your own site? A generic screenshot of the page. That's the difference an Apple Touch Icon makes — and if you're building a new project, you probably want to borrow inspiration from the best.

For a quick check without opening DevTools, our favicon extractor also looks for apple-touch-icon.png and the precomposed variant.

But finding that icon file isn't always straightforward. Unlike a regular favicon that sits at /favicon.ico, Apple Touch Icons hide in <link> tags or manifest.json files. Here's how to extract an Apple Touch Icon from any website — without guessing URLs.

Why Apple Touch Icons Are Harder to Find

Most developers know the standard favicon URL pattern. Apple, however, decided to make things interesting. The icon can be named apple-touch-icon.png, apple-touch-icon-precomposed.png, or live inside a web app manifest. There's no single convention.

Take GitHub. Their Apple Touch Icon isn't at the root. It's served from https://github.githubassets.com/assets/apple-touch-icon-... with a hash in the filename. If you tried guessing /apple-touch-icon.png, you'd get a 404.

The Three Places Apple Touch Icons Hide

Before you start digging, know where to look:

Method 1: Extract via Browser DevTools (The Manual Way)

This is the fastest method for a quick look. Open any website, right-click, and select 'Inspect' (or press F12). Navigate to the 'Elements' tab and search for 'apple-touch-icon' using Ctrl+F (Cmd+F on Mac).

You'll see something like this:

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

Copy the href value. If it's a relative path (like /path/to/icon-180.png), prepend the site's domain. Open that URL in a new tab, and you have the icon.

What If the Link Tag Is Missing?

Some sites, especially modern PWAs, skip the HTML tag entirely and rely on the manifest. In that case, look for:

<link rel='manifest' href='/manifest.json'>

Open that JSON file, and search for an object with sizes: '180x180' or sizes: '192x192'. That's your Apple Touch Icon.

Method 2: Use Mzu favicondl (The Smart Way)

If you're extracting icons regularly — maybe you're auditing competitor sites or collecting design references — the manual approach gets old fast. That's where Mzu favicondl comes in.

Paste the website URL into the tool, and it automatically scans all three locations: HTML link tags, manifest.json, and the root directory. It finds every Apple Touch Icon size and presents them as downloadable files. No more hunting through DevTools or guessing paths.

This is especially useful for sites like Apple.com, which serves multiple sizes (152x152, 167x167, 180x180) from different paths. Mzu favicondl pulls them all at once.

Pro Tip: Check for Precomposed Variants

Older iOS versions (pre-iOS 7) used apple-touch-icon-precomposed, which removed the glossy overlay. Modern iOS ignores this attribute, but some legacy sites still serve it. If you're extracting an icon from an older site, check for both rel values. Mzu favicondl handles this automatically, but if you're doing it manually, don't skip the precomposed tag.

Method 3: The Console One-Liner

For the terminal-inclined, here's a quick JavaScript snippet you can run in the DevTools console:

const links = document.querySelectorAll('link[rel*="apple-touch-icon"]);
links.forEach(link => console.log(link.href));

This logs every Apple Touch Icon URL on the page. If nothing appears, the site likely uses a manifest. Run this instead:

fetch('/manifest.json')
  .then(r => r.json())
  .then(m => m.icons.filter(i => i.sizes.includes('180'))
  .forEach(i => console.log(i.src)));

This fetches the manifest and filters for 180x180 icons — the standard Apple Touch size.

What to Do With the Extracted Icon

Once you have the icon file, you can use it as a reference for your own design. But don't just copy it — analyze it. Notice how big brands simplify their logos to a single recognizable shape at 180x180 pixels. Apple uses its silhouette. Google uses the 'G' mark. Stripe uses the 'S'.

If you're setting up your own Apple Touch Icon, check out our Apple Touch Icon: Complete Setup Guide for the exact HTML and sizes you need. And if you're still troubleshooting why your icon isn't showing on iOS, our Favicon Not Showing? 7 Common Causes & Fixes covers the most common pitfalls.

The Bottom Line

Extracting an Apple Touch Icon from a website isn't complicated once you know where to look. DevTools gives you instant access to link tags. The manifest holds the fallback. And if you're doing this often, Mzu favicondl saves you the repetitive work.

Next time you see a crisp icon on your iPhone home screen, you'll know exactly how to grab it — and how to build one that looks just as good for your own site.