---
title: "apple-touch-icon · Link relation · zhead"
canonical_url: "https://zhead.dev/link/apple-touch-icon"
last_updated: "2026-08-13T08:00:02.766Z"
meta:
  description: "Provides an icon that Apple devices can use when someone saves the site to their Home Screen or installs it as a web app."
  "og:description": "Provides an icon that Apple devices can use when someone saves the site to their Home Screen or installs it as a web app."
  "og:title": "apple-touch-icon · Link relation · zhead"
---

Link

# apple-touch-icon

Provides an icon that Apple devices can use when someone saves the site to their Home Screen or installs it as a web app.

## Code examples

Good example

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

Provides a 180 by 180 pixel icon and declares its actual size.

Avoid this example

```
<link rel="apple-touch-icon" sizes="180x180">
```

Has no href, so Safari has no icon to fetch.

## Recommendations

- 01 Declare the real size Set sizes to the bitmap icon's pixel dimensions. Safari can choose among multiple declared sizes for different contexts.
- 02 Keep the link for Safari Safari may use apple-touch-icon when a web app manifest has no suitable high resolution icon. Do not hide the link with user agent detection.

## Related documentation

- [webkit.org: Webkit Features In Safari 17 2](https://webkit.org/blog/14787/webkit-features-in-safari-17-2/)
- [Apple Developer: ConfiguringWebApplications](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)