Веб-разработчики и владельцы веб-сайтов, обратите внимание: вам необходимо установить иконку закладки iOS с поддержкой retina. Значки закладок называются значками Apple Touch, и эти пользовательские изображения становятся значком, который отображается на главном экране пользователей, когда они добавляют веб-сайт в закладки на iPad, iPhone или iPod touch в iOS или панель закладок Safari для OS X.Без пользовательского набора файлов apple-touch-icon пользователи получат скучную и часто уродливую миниатюру самой веб-страницы, а без использования значка, готового к сетчатке, значок закладок будет выглядеть пиксельным и вообще ужасным на новом экране iPad.

Вот что вам нужно сделать, чтобы создать идеальную иконку Apple Touch с сетчаткой для любого веб-сайта за несколько простых шагов.

1) Создайте Retina-Ready значок веб-сайта iOS

Используйте шаблон или создайте свой собственный. Я использовал простой набор иконок DIY для сетчатки, упомянутый в предыдущем посте, это PSD-файл, который позволяет создавать красивые иконки для iOS одним или двумя щелчками мыши. Вставьте логотип веб-сайта или компании, и все готово. Если у вас нет инструмента для редактирования PSD-файлов, отлично подойдет бета-версия Photoshop CS6, которую можно бесплатно загрузить и использовать до тех пор, пока окончательная версия не выйдет в конце года.

2) Сохранить как PNG и назвать значок закладки веб-сайта Retina

Иконка должна быть в формате PNG и иметь одно из двух названий. Каждое имя файла предлагает немного другой вид значка, отображаемый на главном экране пользователя:

• “apple-touch-icon.png” добавит всплывающую подсветку к значку
• “apple-touch-icon-precomposed.png” отобразит значок в исходном виде, без наложения выделения

Используйте последнюю опцию -precomposed, если вы создали свою собственную подсветку или если вы хотите, чтобы значок выглядел более плоским без вездесущего пузыря, который появляется на большинстве значков Apple по умолчанию.

3) Загрузить сенсорный значок закладки веб-сайта в базовый веб-каталог

Используйте SFTP-клиент (OS X включает FTP в Finder, а CyberDuck или Filezilla бесплатны), чтобы скопировать файл apple-touch-icon.png в корневой веб-каталог. Обычно это то же место, где находится основной индексный файл сайта. После загрузки подтвердите, что он находится в правильном месте, открыв веб-браузер и перейдя на «http://SITEURL.com/apple-touch-icon.png» и убедившись, что он загружается.

Вот пример значка закладки размером 512×512 пикселей с сайта OSXDaily.com:

Обратите внимание, что без флага -precomposed значок выше будет отображать всплывающее окно. Вы можете увидеть разницу между ними, сравнив фактический значок с тем, который показан на снимках экрана в качестве закладки.

4) Используйте устройство iOS и добавьте сайт в закладки

Это самая простая часть: возьмите устройство iOS (предпочтительно iPad 3, чтобы подтвердить вид сетчатки) и откройте Safari.Обновите веб-сайт, на который вы загрузили значок, а затем коснитесь значка со стрелкой и выберите «Добавить на главный экран», назовите закладку, затем вернитесь на главный экран, чтобы убедиться, что она там.

Несмотря на размер 512 x 512 пикселей, значок сетчатки будет нормально уменьшаться на старых iPhone и устройствах без сетчатки. Если вы действительно хотите, вы можете использовать CSS и HTML для отображения значков разного размера на разных устройствах, но на самом деле это не обязательно.

Теперь, если кто-то добавит ваш веб-сайт в закладки на iPad с дисплеем Retina, он будет выглядеть намного лучше на домашнем экране. Вот и все. И да, мы уже писали о сенсорном значке Apple раньше, но теперь он заслуживает еще одного упоминания, поскольку iPad 3 требует значительно более высокого разрешения значков и графики.