WebApp之 apple-touch-icon

封面图 • 2025-11-20 • Html/Css

在 Web 应用（WebApp）中，`apple-touch-icon` 是一个用于 iOS 设备（如 iPhone 和 iPad）的特殊图标。当用户将网页添加到主屏幕时，系统会使用这个图标作为应用的快捷方式图标。

---

## ✅ 什么是 `apple-touch-icon`？

- **作用**：为 iOS 设备上的 WebApp 提供一个自定义的主屏幕图标。
- **格式**：通常是一个 PNG 图片文件，推荐尺寸为 **180x180 像素**（适用于 iPhone 的 Retina 显示屏）。
- **文件名**：一般命名为 `apple-touch-icon.png` 或 `apple-touch-icon-180x180.png`。

---

## 📌 如何使用 `apple-touch-icon`？

在 HTML 文件的 `<head>` 标签中添加以下代码：

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

或者指定不同尺寸的图标（可选）：

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

---

## 🧩 注意事项

1. **图片格式**：
   - 推荐使用 `.png` 格式。
   - 不要使用 `.jpg` 或 `.gif`，因为 iOS 对这些格式的支持有限。

2. **图标大小**：
   - 最常用的是 **180x180 像素**（Retina 屏幕）。
   - 也可以提供多个尺寸（如 57x57、72x72、114x114、144x144）以适配不同设备。

3. **透明背景**：
   - 如果你希望图标有圆角或阴影效果，可以使用透明背景的 PNG 图片。

4. **缓存问题**：
   - 如果更新了图标，建议更改文件名（如 `apple-touch-icon-v2.png`），否则浏览器可能仍然使用旧版本。

---

## 🛠 示例：完整 HTML 头部代码

```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的 WebApp</title>
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    <h1>欢迎来到我的 WebApp</h1>
</body>
</html>
```

---

## 📱 其他相关图标（iOS）

| 图标名称 | 用途 | 尺寸 |
|----------|------|------|
| `apple-touch-icon` | 主屏幕图标 | 180x180 |
| `apple-touch-startup-image` | 启动画面 | 640x1136 / 750x1334 等 |
| `manifest.json` | PWA 配置文件（用于现代 WebApp） | 自定义 |

---

如果你正在开发一个 PWA（Progressive Web App），还可以使用 `manifest.json` 来进一步配置图标和启动画面。

---

需要我帮你生成一个 `apple-touch-icon` 的示例图片吗？或者指导如何制作？