Include apple-touch-icon.png: Size, example and fix errors

An Apple Touch icon is the image of your website on the iPhone or iPad home screen. A square PNG with 180 × 180 pixels and an explicit HTML reference are a viable starting point. A favicon for browsers and Google serves a different purpose.

Seitenreport Editorial · Updated on 13. October 2026

Favicon and Apple Touch Icon

Incorporate Apple Touch Icon: Create PNG and link in head

With the Favicon Generator From a logo, create an Apple Touch icon in 180 × 180 pixels as well as the other website icons. The ZIP also contains the appropriate HTML references.

Export your subject as a square PNG file with 180 × 180 pixels. A high-contrast, simple motif also remains recognizable in reduced size.
Load the file as /apple-touch-icon.png high. Check if the direct URL without logging in delivers an image.
Complete the following reference centrally in the HTML template within <head>.

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

The leading slash refers to the root directory of the domain. Without him, apple-touch-icon.png relative to the current page or to an existing base-Element dissolved. An absolute HTTPS reference is also possible.

The indication: sizes="180x180" describes the file; it does not scale it. Actually export the image in the specified size. The Apple documentation for configuring web apps contains a corresponding example. 180 × 180 is here a practical template, not a statement about a universal maximum size.

After that, test on an iPhone or iPad via Safari and “To Home” screen. For a re-test, remove an old saved website icon if the previous graphic continues to appear.

Apple-touch-icon.png is missing or not displayed

Finding	Concrete next step
404 / File not found	Compare file names and capital/case. Upload the file or adjust the href to the actual location. Also test an underside.
HTTP 200, but text/html	The server will probably provide a replacement page or the start page. Exclude icon files from such forwarding and fallback rules and deliver them as image/png.
Image accessible, but no HTML reference	Complete the Apple touch icon reference in the common head. A file on the standard path is not the same as an explicit integration.
Obsolete motive	Check the file and CDN cache. Then remove the saved Homescreen icon and add it again. An unchanged filename can still come out of the cache.
403, 405 or no response	Open file in the browser and check server/firewall rules. The checker uses HEAD; a rejected HEAD request does not yet prove that a browser cannot load the image.
HTTPS/Certificate error	Check icon host and certificate. An external image host also needs working HTTPS. It is helpful. HTTPS Checker.

The Favicon Checker Checks HTML references, default paths, HTTP status, and types of images reported by the server. It shows declared sizes values; actual pixel dimensions and the display on your device must be controlled separately. Individual response codes and forwardings are examined by the HTTP status code checker.

Differentiate Touch Icon, Browser Favicon and Google Search Result

The touch icon serves the homescreen. For browser tabs and Google you also provide a favicon with rel="icon" ready, for example, a square PNG with 96 × 96 pixels:

<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Google requires a square format of at least 8×8 pixels for favicons and recommends more than 48×48 pixels. Start page and icon must be accessible for the responsible crawlers. Even with correct integration, the display is not guaranteed. Details: Google guidelines for favicons.

A missing Apple Touch icon is above all a display problem. Its addition alone is not evidence of better Google rankings. The differences also explain the Wiki entry for Favicon.

Android and Installable Web Apps: Icons in Manifesto

For an installable web app, define the app icons in the web app manifesto. This is a separate use case alongside the Apple Touch Icon. For Chromium, PNG files with 192 × 192 and 512 × 512 pixels are a common starting point; a separate maskable icon can also make sense.

<link rel="manifest" href="/site.webmanifest">

The icon section of the manifesto can look like this. For a complete installable app, further information and prerequisites are necessary:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

The referenced files must be present. Check the manifest in the application section of the browser developer tools. Our Favicon Checker does not currently evaluate manifest files. Background: Web App Manifesto on web.dev and Manifest icons at MDN.

Older integrations: precomposed and Windows Tiles

In older templates you may find apple-touch-icon-precomposed or msapplication-…Metadata for Windows tiles. Treat them as compatibility information for previous clients. For a new standard integration, start with Favicon, Apple-touch-icon and – if you offer an installable web app – the Manifesto. Do not adopt old size lists unchecked as a current mandatory requirement.

Frequently Asked Questions about the Apple Touch Icon

Is Apple-touch-icon.png mandatory?

A website also works without this file. When visitors save them on the Apple home screen, a deliberately designed touch icon ensures a suitable display. It is not a prerequisite for Google indexing.

Does the file have to be called exactly apple-touch-icon.png?

For an explicit link reference, you can use a different filename and path. /apple-touch-icon.png is an easy-to-follow standard path. The href must match the actual reachable file.

Why are there 404 views even though I haven’t linked an icon?

Clients can also request known icon paths without an explicit HTML reference. If you want to offer the icon, put a suitable PNG file and link it in the head. Redirecting all missing files to the start page does not solve the image problem.

Does the checker check the actual pixel dimensions?

No. It reads the size from the HTML and checks accessibility and content type. In addition, check the pixel dimensions in the image properties and the finished display on a real device.