Web 开发人员和网站所有者注意：您需要设置一个视网膜就绪的 iOS 书签图标。 书签图标称为 Apple Touch 图标，当用户在 iOS 中的 iPad、iPhone 或 iPod touch 上为网站添加书签时，这些自定义图像将成为用户主屏幕上显示的图标，或者OS X 版 Safari 的书签面板。如果没有自定义的 apple-touch-icon 文件集，用户将看到网页本身的无聊且通常难看的缩略图，并且如果不使用视网膜就绪图标，书签图标将看起来像素化在新的 iPad 屏幕上通常很糟糕。

只需几个简单的步骤，您就可以按照以下步骤为任何网站创建视网膜完美的 Apple Touch 图标。

1) 创建 Retina-Ready iOS 网站图标

使用模板或设计您自己的模板。我使用了上一篇文章中提到的简单 DIY 视网膜图标工具包，它是一个 PSD 文件使设计漂亮的 iOS 图标就像单击或两次一样简单。粘贴网站或公司徽标，您就可以开始了。如果您没有编辑 PSD 文件的东西，Photoshop CS6 beta 非常好，可以免费下载 并使用直到最终版本在今年晚些时候问世。

2) 另存为 PNG 并命名 Retina 网站书签图标

图标必须是 PNG，并且它的名称必须是以下两者之一。每个文件名都提供了与用户主屏幕上显示的图标略有不同的外观：

• “apple-touch-icon.png”会将高亮气泡叠加到图标上
• “apple-touch-icon-precomposed.png”将显示最初创建的图标，没有高亮覆盖

如果您创建了自己的高亮显示，或者如果您希望图标看起来更平坦而没有出现在大多数 Apple 默认图标上的无处不在的气泡，请使用后一个 -precomposed 选项。

3) 将网站书签触摸图标上传到基本 Web 目录

使用 SFTP 客户端（OS X 在 Finder 中包含 FTP，Cyber​​Duck 或 Filezilla 是免费的）复制apple-touch-icon.png 文件到根 Web 目录。这通常与站点主索引文件所在的位置相同。上传后，通过打开网络浏览器并转到“http://SITEURL.com/apple-touch-icon.png”并确保它已加载来确认它位于正确的位置。

这是来自 OSXDaily.com 的 512×512 视网膜书签图标示例：

请注意，如果没有 -precomposed 标志，上面的图标将显示高亮气泡。通过将实际图标与屏幕截图中显示为书签的图标进行比较，您可以看出两者之间的区别。

4) 使用 iOS 设备并为站点添加书签

这是最简单的部分，拿起 iOS 设备（最好是 iPad 3 以确认视网膜方面）并打开 Safari。刷新您将图标上传到的网站，然后点击箭头图标并选择“添加到主屏幕”为书签命名，然后返回主屏幕以确认它在那里。

尽管是 512 x 512 像素，但视网膜图标在旧版 iPhone 和非视网膜设备上会很好地缩小。如果你真的想，你可以使用 CSS 和 HTML 来为不同的设备显示不同大小的图标，但这真的没有必要。

现在，如果有人在配备视网膜显示屏的 iPad 上为您的网站添加书签，那么该网站在他们的主屏幕上看起来会好很多。这真的就是它的全部。是的，我们已经写了关于 Apple touch icon 之前，但现在值得再次提及，因为 iPad 3 需要明显更高分辨率的图标和图形。