Guide

Apple Touch Icon Guide

When someone adds your site to the iOS home screen, Safari uses apple-touch-icon — not favicon.ico. Ship a 180×180 PNG (or larger square that downscales cleanly) and link it in your <head>.

Check favicons on any website

Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.

Install Chrome Extension

Apple does not apply masking on modern iOS for web clips the way it does for native apps, but your icon should still be square with safe margins — keep logos inset ~10% so rounded corners never clip artwork.

Use <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">. A single 180×180 file covers all current iPhones; optional 152×152 and 167×167 entries help older iPad layouts.

How it works

  1. 1

    Export 180×180 PNG

    From our favicon generator or image resizer.

  2. 2

    Upload to site root

    /apple-touch-icon.png alongside favicon.ico.

  3. 3

    Add the link tag

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

Try it now

Generate apple-touch-icon

Favicon Generator

FAQ

What size is apple-touch-icon?+

180×180 pixels for current iPhones. Export from a 512×512 or 1024×1024 master.

PNG or ICO for iOS?+

PNG only. iOS ignores .ico for home-screen icons.

Do I still need favicon.ico?+

Yes — tabs and other browsers still use .ico. Apple-touch-icon is additive.

Related tools

Related guides

Guides