WebApp之 apple-touch-icon
封面图
•
2025-11-20
•
Html/Css
283
1
1
0
在 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` 的示例图片吗?或者指导如何制作?
上一篇:
x-webkit-speech 语音输入功能
下一篇:
HTML字符实体(Character Entities),转义字符串(Escape Sequence
标题录入,一次不能超过6条
留言
评论