Apple Touch Icon: size, design and HTML for iOS

October 27, 2026 10 min read

Your favicon can be perfect in every browser tab and still look wrong on an iPhone home screen: a black square, a logo clipped at the corners, or a mark so small nobody recognises it next to native apps. Those problems usually come from one file — the Apple Touch Icon.

The good news is that this is one of the simplest parts of a modern favicon setup. Apple no longer expects a folder full of touch-icon sizes. In almost every case you need one well-made, opaque 180×180-pixel PNG, one line of HTML, and a quick test on a real device.

The short answer

Provide one PNG at 180×180 pixels, normally named apple-touch-icon.png.
Make it fully opaque. iOS may composite transparent areas onto black.
Supply a square, full-bleed background. Do not round the corners yourself; iOS applies its own rounded-corner mask.
Declare it with <link rel="apple-touch-icon" href="/apple-touch-icon.png"> in the <head>.
Keep important artwork away from the edges, then test with Safari’s Add to Home Screen on an iPhone or iPad.

Design the touch icon as a finished home-screen app icon — not as a transparent logo file that iOS will somehow place on a suitable background for you.

What an Apple Touch Icon is — and is not

An Apple Touch Icon is the image Safari uses when a visitor saves your site to the home screen on iOS or iPadOS — the visual label for that shortcut, just as an app icon labels a native app.

It is separate from the tab icon. Each platform asks for something different: an SVG or PNG favicon for tabs and search results, an ICO fallback, a 180×180 touch icon for Apple devices, and 192×192 and 512×512 icons in a web app manifest for Android and Chromium. They can come from the same artwork, but they are not interchangeable.

In particular, a manifest does not replace the touch icon for Safari shortcuts. Leaving out apple-touch-icon.png can leave Apple devices to fall back — historically to a small screenshot of the page, complete with unreadable text and perhaps a cookie banner. Conversely, a touch icon alone does not make a site an installable web app; names, display behaviour and the Android set are handled by other metadata, covered below.

What Apple expects in 2026

One 180×180 PNG

Apple’s current guidance centres on a 180×180-pixel touch icon for iPhone, and that single size also serves iPad models: iOS scales it to whatever each device needs. Old tutorials listing 57×57, 72×72, 76×76, 114×114, 120×120, 144×144 and 152×152 belong to earlier device generations. Keeping such a set is rarely harmful, but it adds maintenance and room for inconsistency. For a new site, generate one good 180×180 file.

Use PNG — not an SVG, however elegant your tab favicon is. PNG gives exact pixels and predictable colour when iOS scales the image. Name it apple-touch-icon.png and put it at the site root unless you have a deliberate asset path: root placement is conventional and matches the location tools probe for a default icon.

Opaque and square

The file should be exactly square with no transparent pixels. A transparent logo may look clean in an image preview, but on iOS the empty area can become black — which is why transparent marks suddenly gain a black background on home screens. There is no HTML attribute asking iOS for a white backdrop. Put the background in the image itself: white, black, a brand colour, or a subtle gradient baked into the PNG.

Do not imitate the iOS shape either. Do not export a circle, squircle or manually rounded corners surrounded by transparency. Submit the full square; iOS masks the corners consistently with other icons. Pre-rounding wastes the corners, exposes whatever sits behind the transparent areas, and makes the icon look smaller beside native apps.

No gloss, no “precomposed” file

Older guides mention apple-touch-icon-precomposed and an automatic gloss effect. That belongs to the pre-iOS 7 visual style; modern iOS adds no gloss and needs no precomposed asset.

The HTML you need

At minimum, add this to the <head>:

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

The sizes attribute is descriptive; the rel value and a reachable href matter most. Prefer an absolute path beginning with /: a relative path such as apple-touch-icon.png can resolve to a different directory on nested pages and produce page-dependent 404s. A complete favicon block usually looks like this:

<link rel="shortcut icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#ffffff" />

The roles stay separate: SVG and PNG favicons serve tabs and browser UI, the ICO is a legacy fallback, the manifest serves Android and Chromium, and the touch icon serves Apple’s shortcut. You can also control the short name under an Apple shortcut with:

<meta name="apple-mobile-web-app-title" content="Your Brand" />

Keep that name short. Without it, the page title is a common source for the suggested name, and a long SEO title makes a poor home-screen label. Finally, opening the icon URL should return the current PNG directly — no login redirect, hotlink-protection page, 404, or stale CDN copy.

Designing for iOS rather than fighting it

Start with the background

Choose the background before placing the logo. A strong brand colour often works best: recognisable and distinct from neighbouring apps. White suits a colourful, bold mark; black is dramatic but hides the black-fill transparency mistake while testing. Avoid backgrounds close to the logo’s colour, and fine patterns that turn to noise when scaled.

If your primary logo is a dark wordmark designed for a white header, the touch icon may need its own treatment: a reversed version on a brand-colour field, the symbol alone, or a simplified initial. That is normal icon design, not inconsistency.

Respect the mask and the edges

iOS rounds the corners and places the icon on varied wallpapers. Keep faces, letters and other essentials centred and comfortably away from every edge, especially the corners. Extend the background to the edges — not the meaningful artwork. A symbol touching the border will look cramped or clipped after masking.

Preview at home-screen size, not only at 180 pixels on a large monitor. Shrink it, put it beside familiar app icons, and check: can you identify it without reading text, does anything important approach the corners, and does the background separate it from light and dark wallpapers?

Be ruthless with detail and text

Taglines, trademark symbols, thin lines and multi-word lockups become mush at touch-icon size. Prefer a symbol, monogram or one bold letterform; if the brand is only a wordmark, make a shortened treatment instead of scaling the complete lockup down. Keep the master logo transparent in your source workflow if useful, but composite it onto the background when exporting and flatten the PNG — stray semi-transparent edges can otherwise behave unexpectedly after resizing.

A reliable way to create and install one

Start from the cleanest source. Vector is ideal; a raster should be at least 180×180 and preferably larger, so the final resize is a reduction, not an enlargement.
Choose the treatment: symbol or simplified mark, opaque background, enough margin, corner safety.
Export exactly 180×180 PNG and confirm the dimensions afterwards — a filename proves nothing about the image inside.
Upload it to the public root as /apple-touch-icon.png, unless your platform has its own convention. Next.js, for example, can use an apple-icon.png file convention, so follow the generated markup rather than assuming the deployed URL.
Add the link element to the shared layout or head so every page declares the same icon, then deploy and test live.

To skip assembling this by hand, the EasyFaviconGenerator home page creates the touch icon within a complete package with matching HTML — check the iOS preview and background before downloading.

The “PWA-ish” basics, without overclaiming

People often meet the touch icon while making a site feel app-like, so separate the layers. The touch icon gives an Apple shortcut its picture; its short name can come from apple-mobile-web-app-title or the document title. A manifest gives Chromium browsers names, colours and the 192×192 and 512×512 install and splash icons. theme-color tints some browser UI. Service workers and offline behaviour are another layer, and no icon file confers them.

On iPhone and iPad, do not promise an automatic install prompt. The normal route is deliberate: in Safari, tap Share, choose Add to Home Screen, confirm the name, tap Add. A shortcut may then launch in a browser or a more app-like standalone presentation depending on configuration and platform support, but apple-touch-icon.png by itself guarantees only the icon — not offline support, push notifications or native-app behaviour. “Add us to your home screen” is honest copy; “install our app” often is not.

Common mistakes

Exporting transparency. Empty pixels become black. Flatten onto a background.
Pre-rounding the corners. iOS masks the square anyway; pre-rounded transparent corners combine badly with that mask.
Using the manifest icon and stopping. A 512×512 manifest icon is no substitute for a declared Apple Touch Icon.
An old size list with inconsistent artwork. Files generated years apart can show different brands on different devices. Consolidate on one 180×180 export.
Declaring it only on the home page. Use the shared layout; a visitor may save an article, product or app page.
Referencing a file that is not there. Wrong directory, case mismatch on a case-sensitive host, framework base path, or a deploy that excludes “miscellaneous” PNGs.
Cropping the logo to the edges. Full-bleed applies to the background, not the mark.
Judging only the enlarged preview. Fine text and subtle gradients vanish. Evaluate at realistic size, in context.

How to test it properly

Automated checks are a first pass, not the verdict. Run the deployed URL through the favicon checker to confirm the icon is declared and reachable, then open /apple-touch-icon.png directly and verify its dimensions and artwork. Only the home screen settles whether anyone recognises the symbol next to a banking app.

On a physical iPhone or iPad, open the production site in Safari, tap Share, then Add to Home Screen. Inspect the suggested name first, then confirm and examine the shortcut: Is the background opaque and intentional, the mark centred after the mask, legible at arm’s length, and distinct from nearby icons? Tap it and confirm it opens the expected page.

Repeat after any redesign. iOS can cache touch icons persistently, so an unchanged result may be the previous asset. If the new icon does not appear, remove the shortcut, revisit the site, check the direct icon URL, and add it again; for a stubborn stale asset, a new deployed filename and updated link make the change unambiguous. Test on iPad too if your audience uses both, and test an interior page on the canonical production domain — not only the home page on staging.

Quick questions

Can the Apple Touch Icon be an SVG?

Not as the interoperable choice Safari expects here. Provide a raster PNG at 180×180, and keep SVG for the regular browser favicon (Safari supports it from version 26; WebKit says it can also use SVG icons for Home Screen web apps there, but older iOS versions still need the PNG).

Why did my icon get a black background?

Almost always because the PNG contains transparency that iOS composited onto black. Re-export with an explicit background filling the whole square, then remove and re-add the shortcut.

Why is my new icon not showing?

Confirm the live file at the declared URL first. Then remove the shortcut and add it again. If the old image persists, suspect device or CDN caching and consider a new filename. Do not debug the design until you know the device received the new file.

The takeaway

Give Safari one opaque, square, 180×180 PNG; fill the background yourself; keep the artwork inside the mask; declare it from every page; and judge it on a real home screen. Do that, and your site will sit comfortably beside native apps instead of appearing as a black square, a clipped logo, or a miniature screenshot of a web page.