Как сделать иконку сайта для iPhone

03 Февраля 2015 493

Количество устройств работающий на операционной системе iOS с каждым годом растет. Это статья для web-мастеров, которые оптимизируют свои сайты для просмотров с iPhone и iPad. Для того, чтобы при добавлении в закладки браузера Safari или при добавлении на рабочий стол iPhone показывалась нужная иконка сайта, необходимо специально создать изображений. Иконка favicon в данном случае не работает.

Для сайтов, где нет такой иконки, в закладках Safari показывается серая заглушка, а на рабочем столе создается иконка на основе скриншота первой страницы. Это не очень красиво. Но достаточно потратить всего несколько минут, чтобы сделать свою иконку сайта для iPhone...


Как создать иконку сайта для iPhone

  1. Нужно создать изображение в формате PNG размером 152x152px в любом графическом редакторе. Если вы работаете в Photoshop, то это формат PNG 24. Можно даже задать прозрачность.
  2. Сохранить файл под названием "apple-touch-icon.png".
  3. Загрузить получившийся файл по FTP на сервер, в корневую папку сайта. Например /assets/pictures/9842/content_apple-touch-icon.png.

Теперь при добавлении закладки на ваш сайт, в Safari появится созданная вами иконка. А если вы выберите "Добавить в Домой", то и на рабочем столе.

Внезапно вышла iOS 12.1 beta 1 с потрясающей функцией
Падайте на здоровье. Apple Watch Series 4 спасают лишь старых

Сразу отвечу на возможные вопросы.

Нужно ли что-то прописывать в самом HTML документе?

Нет, ничего специально прописывать в mete не нужно. Браузеры мобильный устройств сами ищут этот файл на вашем сайте. Более того, если такого файла там нет, то сервер выдает в ответ 404 ошибку. Посмотрите в логи на сервере, там много таких запросов. Кроме того - эти файлы "ищутся" не только в момент добавления сайта на домашний экран, а при каждом посещении!

И, вы наверно удивитесь, но Android устройства тоже используют значки apple-touch-icon.png при добавлении закладки сайта на рабочий стол :).

А как же Retina, нужно делать несколько изображений под разное разрешение?

Раньше нужно было делать несколько картинок, сейчас достаточно одной большой (152x152px). В принципе, в Apple регулярно меняют разрешения экранов и стандарты для разработчиков. Вполне вероятно, что когда вы будете читать эту статью, что-то уже поменяется. Но, самый актуальный размер всегда можно узнать по ссылке /assets/pictures/9844/content_apple-touch-icon.png. Это самый правильный формат иконки :).

Автор статьи
Нет комментариев

Авторизоваться или зарегистрироваться для комментирования.

Огонь
Топ скидок недели

Jason Vale’s 5-Day Jui...

75 руб. 229 руб.

Capitán Ojo Vago Full

2 190 руб. 2 650 руб.

Paroles de chanson JEM

75 руб. 149 руб.

ПДД+Авто штраф 2018

15 руб. 75 руб.

ДОКТОР МИП

75 руб. 229 руб.

Der wiehernde Esel - DWE

299 руб. 6 990 руб.

antisèche Français - B...

299 руб. 379 руб.
Смотреть все программы