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

这是您需要做的，只需几个简单的步骤即可为任何网站创建视网膜完美的Apple Touch Icon。

1）创建视网膜就绪的iOS网站图标

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

2）另存为PNG并命名视网膜网站书签图标

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

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

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

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

使用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 触摸图标的文章，但现在 iPad 3 需要更高分辨率的图标和图形，因此值得再次提及。