Modern Favicon

Apple Touch Icon Generator

Generate a correct 180×180 apple-touch-icon.png — opaque, full-bleed, square-cornered, exactly as iOS expects — from any image, text or emoji. The full favicon bundle comes with it. Ignore the 2013-era tutorials still telling you to make eight sizes.

1 · Design your icon

Uploaded image preview

Drop an image here, click to browse, or paste

PNG, JPG, SVG, WebP or GIF · square works best

8%
18%
App name & PWA options (optional)

These fill in the site.webmanifest, which Android and other platforms read when someone installs your site to their home screen. Safe to skip for a normal website — you can edit the file later.

Your site or product's full name — shown on the install prompt and splash screen.

Shown under the home-screen icon — aim for 12 characters or fewer.

Tints the browser and app chrome around your site — usually your brand colour.

2 · Preview & download

Upload an image or type some text to see live previews of your favicon in a browser tab, Google search results, and on iOS & Android home screens.

3 · Install on your site
  1. Download the bundle above and unzip it.
  2. Copy every file into your website's root folder — the same folder as your homepage (public/ in most frameworks) — so they load from /favicon.ico.
  3. Paste these tags into the <head> of every page:

Using an AI coding assistant? and paste it into Claude Code, Cursor or Copilot after unzipping into your project — it places the files and adds the tags for you. The same steps ship in the ZIP as AI-INSTRUCTIONS.txt.

View the complete installation guide →

Apple Touch Icon: the current rules (2026)

  • One file, 180×180 pixels. A single apple-touch-icon.png covers every current iPhone and iPad. iOS scales it down where needed.
  • Opaque. iOS renders transparency as black — the generator fills the background automatically, using your chosen colour or white.
  • Square corners. iOS applies its own rounded mask; pre-rounding produces double-rounded corners. The generator always exports this file square-cornered and shows the masked result in the iOS preview.
  • A little breathing room helps. Around 10–15% padding keeps your mark clear of the corner mask — adjust the padding slider and watch the preview.

What's obsolete

You'll still find generators and gists producing apple-touch-icon-57x57.png through 152x152, precomposed variants, and eight link tags. All of it has been unnecessary since iOS 8 (2014). One 180×180 file and one link tag:

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

FAQ

What size should an Apple Touch Icon be?

180×180 pixels. One 180×180 apple-touch-icon.png covers every current iPhone and iPad — iOS scales it down for smaller contexts. The old ladder of sizes (57, 72, 76, 114, 120, 144, 152) has been obsolete since iOS 8 in 2014.

Can an Apple Touch Icon be transparent?

No. iOS composites transparent areas onto black, which usually looks broken. The icon should be fully opaque and full-bleed. This generator automatically fills the apple-touch-icon with your chosen background colour (or white) even if the rest of your favicons are transparent.

Should I round the corners of my Apple Touch Icon?

No — supply square corners. iOS applies its own superellipse corner mask automatically. If you pre-round the corners, you get an ugly double-rounded result. This generator exports the apple-touch-icon with square corners regardless of your corner-radius setting, and the iOS preview shows the real masked result.

What HTML do I need for an Apple Touch Icon?

Place apple-touch-icon.png in your site root and add <link rel="apple-touch-icon" href="/apple-touch-icon.png"> to your <head>. The sizes attribute is unnecessary with a single 180×180 icon.

More tools: favicon generator · PNG to ICO · emoji favicon · text favicon · transparent favicon