什么是 Apple Touch Icon？

Apple touch icon，也称为 apple-touch-icon.png 文件，用作 Apple iPhone、iPod Touch 和 iPad 上的网页图标，类似于 Favicon。每当用户将网站添加为书签或添加到主屏幕时，就会使用此符号。如果找不到此文件，这些 Apple 设备将回退到网站的快照，而快照通常只是一块白色的方块。

除非在 HTML 中指定了位置，否则该文件应为 .png 格式，尺寸为 57x57 像素，并位于主目录中。下面展示了一个该标签在 HTML 中的可能样式的示例。

使用此文件时，Apple 设备默认会将该符号处理成圆角按钮样式。

如何制作并应用到您的网站

拥有合适的图标将增加其被点击的几率，并使客户更容易记住它在设备上的位置。一旦选择了简单的元素或品牌作为 Apple 图标，请生成一个正方形的 .png 文件，命名为“apple-touch-icon”，尺寸高达 180x180 像素。我们之所以说高达 180x180，是因为第一代 iPhone 的基本尺寸是 57x57，而 iPhone 6 Plus 由于其增强的显示屏和 PPI，需要 180x180 的图标。Apple 图标有九种不同的主要尺寸（每英寸像素）。

或者，如果您的网站是基于 WordPress 构建的，您可以使用由同一作者创建的这个插件，或者访问这个有用的网站来创建 Apple 符号，甚至测试其功能。

请确保在页眉中也定义了图标，以下面的 HTML 示例作为参考

这将确保正确的 iOS 设备能够识别该符号，并为您的访客提供无缝的浏览体验。

如何在 WordPress 中插入 Apple Touch 图标？

请按照以下步骤添加您的 Apple Touch 图标。

第一步） 复制以下代码并将其粘贴到您的 functions.php 文件中。使用此代码，您可以为您的网站添加 Apple Touch 图标。

第二步） 之后，您必须制作每个所需尺寸的图标（请参阅下面的代码中特定的尺寸属性）。

第三步） 最后，您必须将图标路径更新到您存储图标的位置。

如何为响应式网站制作 Apple Touch 图标？

当客户将您的 网站 保存到其 iOS 触屏设备的家庭屏幕或将其添加为书签时，将使用 Apple Touch Icon。如果您未指定图标，Apple 将使用您网站的截图作为图标，这通常会导致一个无法识别的正方形。我们将向您展示如何为您的用户友好型网站开发独特的 Apple Touch Icon，以便您不必强迫您的客户看到一个糟糕的 Apple 图标。

制作 Apple Touch 图标

在第一阶段，您的 Apple Touch Icon 必须在 Photoshop 或其他图像编辑器中制作。该文件应另存为“apple-touch-icon.png”，尺寸为 180x180 像素。

添加您网站的 Apple Touch 图标文件。

下一步是将您的 Apple Touch Icon 文件上传到您的网站。您可以将其放置在任何您喜欢的位置，但是，我们建议将其存储在您的主图片文件夹中。由于我们将在下一个阶段使用它，因此请记下您存储文件的位置。

通过使用 Link 元素定义您的 Apple Touch Icon。

最后一步是在您添加到页面 HEAD 元素中的链接元素中识别并命名您最新的 Apple Touch Icon。