Общий аккаунт ( обновлен 24 мая )   Форум
февраля 3, 2015 iphone-gps.ru 2015-02-03

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

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

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

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

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

1. Нужно создать изображение в формате PNG размером 152×152px в любом графическом редакторе. Если вы работаете в Photoshop, то это формат PNG 24. Можно даже задать прозрачность.

2. Сохранить файл под названием “apple-touch-icon.png“.

3. Загрузить получившийся файл по FTP на сервер, в корневую папку сайта. Например http://iphone-gps.ru/apple-touch-icon.png.

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

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

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

Нужно ли что-то прописывать в самом HTML документе?
Нет, ничего специально прописывать в mete не нужно. Браузеры мобильный устройств сами ищут этот файл на вашем сайте. Более того, если такого файла там нет, то сервер выдает в ответ 404 ошибку. Посмотрите в логи на сервере, там много таких запросов. Кроме того – эти файлы “ищутся” не только в момент добавления сайта на домашний экран, а при каждом посещении!
И, вы наверно удивитесь, но Android устройства тоже используют значки apple-touch-icon.png при добавлении закладки сайта на рабочий стол Как сделать иконку сайта для iPhone .

А как же Retina, нужно делать несколько изображений под разное разрешение?
Раньше нужно было делать несколько картинок, сейчас достаточно одной большой (152×152px). В принципе, в Apple регулярно меняют разрешения экранов и стандарты для разработчиков. Вполне вероятно, что когда вы будете читать эту статью, что-то уже поменяется. Но, самый актуальный размер всегда можно узнать по ссылке http://www.apple.com/apple-touch-icon.png. Это самый правильный формат иконки Как сделать иконку сайта для iPhone .

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(2 голоса, в среднем: 5)


Подписка на рассылку "Временно бесплатные в App Store"
vk.com/freeappsnow

Рассылка выходит раз в сутки и содержит список программ из App Store для iPhone перешедших в категорию бесплатные за последние 24 часа.

группа ВКонтакте

Написать комментарий.

Чтобы оставить комментарий Вы должны быть зарегистрированны на сайте.

Или Вы можете войти через: