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

Настройка значка Apple Touch — хорошая идея, потому что по умолчанию iOS просто сохраняет небольшую миниатюру сайта. Маленькие миниатюры часто бывает трудно идентифицировать, и, как правило, они выглядят не очень хорошо, поэтому давайте вместо этого установим собственное изображение фавикона.

Как настроить и установить значок Apple Touch для веб-сайта

• Создайте значок, убедитесь, что он квадратный, тот, что здесь, на OSXDaily.com, имеет размер 512 × 512 пикселей, но вы можете выбрать другие размеры квадрата, если хотите — обратите внимание, что больший размер подходит для дисплеи сетчатки
• Сохраните значок рабочего стола в виде файла PNG и назовите его: apple-touch-icon.png
• Перетащите файл apple-touch-icon.png в корневой каталог веб-сервера, чтобы к нему можно было получить доступ по адресу domain.com/apple-touch-icon.png
• Протестируйте значок закладки на главном экране вашего веб-сайта, посетив сайт из Safari в iOS, а затем нажав «Добавить на главный экран»
• Посмотрите на домашний экран устройства iOS, и вы увидите сохраненную там закладку с новым пользовательским значком, как на снимке экрана выше

Пока файл имеет правильное имя и находится в корневом каталоге веб-сервера, Mobile Safari будет знать, что с ним делать, поэтому нет необходимости в дополнительной настройке для отображения значка iOS.

Для справки, вот наше пользовательское изображение «apple-touch-icon.png», которое мы используем для OSXDaily.com, этот пример значка закладки создан и имеет размер, соответствующий дисплеям Retina ():

Вы заметите, что в реальном файле значка преломление света не сохраняется на значке, iOS обрабатывает это самостоятельно. Вы можете использовать любое изображение, которое хотите, но я бы рекомендовал создать такое, которое повторяет знакомый пользовательский интерфейс существующих значков iOS.

Это, конечно, не то же самое, что иметь специальное приложение для iOS, но достойный мобильный пользовательский интерфейс из Интернета — хорошая идея, и это позволяет избежать того, что может быть высокой ценой разработки приложения для iOS.

И эй, если вас беспокоят подобные вещи, вы, вероятно, используете Photoshop, по крайней мере, для дизайна значков, верно? Так что зацените что-нибудь, пока вы там.