设置“apple-touch-icon.png”以自定义网站 iPhone 书签 FavIcon
如果您有自己的网站或正在为其他人开发网站，您应该自定义显示在用户 iOS 主屏幕。在上面的屏幕截图中，您会看到 iPhone 屏幕上的自定义 OSXDaily 图标。
设置 Apple Touch 图标是个好主意，因为默认情况下 iOS 只会保存网站的小缩略图。小缩略图通常难以识别，而且通常看起来不太好，所以让我们设置您自己的图标图像吧。
如何为网站自定义和设置 Apple Touch 图标
- 创建图标，确保它是一个正方形，OSXDaily.com 上的图标是 512×512 像素，但如果你真的想要，你可以选择其他正方形大小——注意更大的适合视网膜显示器
- 将主屏幕图标保存为 PNG 文件并标记为：apple-touch-icon.png
- 将 apple-touch-icon.png 放到根网络服务器目录中，这样就可以在 domain.com/apple-touch-icon.png 上访问
- 通过在 iOS 中从 Safari 访问网站，然后点击“添加到主屏幕”来测试您网站的主屏幕书签图标
- 查看 iOS 设备主屏幕，您会看到保存在那里的书签和您的新自定义图标，如上面的屏幕截图
只要文件正确命名并位于网络服务器根目录中，Mobile Safari 就会知道如何处理它，因此无需进一步调整即可显示 iOS 特定的图标。
作为参考，这是我们用于 OSXDaily.com 的自定义“apple-touch-icon.png”图像，此示例书签图标的创建和大小适合 Retina 显示器（了解更多关于 Retina 书签图标的信息在此处创建):
您会注意到实际的图标文件没有将光折射保存到图标上，iOS 会自行处理。您可以使用任何想要的图像，但我建议创建一个捕捉现有 iOS 图标的熟悉 UI 的图像。
这显然与拥有专用的 iOS 应用程序不同，但是从网络获得良好的移动用户体验是个好主意，它避免了 开发 iOS 应用的高价。
嘿，如果你担心这样的事情，你可能至少使用 Photoshop 来设计图标吧？因此，在使用时查看一些加速 Photoshop 的技巧。