иконка сайта для iphone как установить иконку на сайт для iphone

Хоть в заголовке и присутствуют “яблочные” слова, но содержание поста будет наиболее важным не для владельцев данных девайсов, а для нас, вебмастеров. Сегодня мы займемся улучшением совместимости нашего сайта с iPhone/iPad и iPod.

Дело в том что в браузере iPhone, присутствует функция “+ -> Добавить “домой” “, которая добавляет иконку (с ссылкой на сайт) на домашний экран устройства. Эта самая иконка должна иметь название apple-touch-icon.png и путь к ней должен быть прописан, примерно так же, как и к favicon. Размер не имеет значения, я создал 60x60px. Некоторые рекомендуют 120x120px, но главное чтобы выглядело красиво.

иконка сайта для айфона

Прописывается иконка таким образом:

[sourcecode language=”html”]

[/sourcecode]

Если же иконка отсутствует, то на её месте будет отображаться стандартный пустой вариант.

Для тех кто пользуется WordPress рекомендую воспользоватся плагином WpTouch, о нем я уже писал более подробно. В настройках WpTouch есть отдельная возможность добавить иконку прямо через админ-интерфейс движка.

И напоследок еще одна приятная мелочь, те кто заходил с айфона например на мобильную версию сайта vkontakte, наверняка видели такое всплывающее сообщение:

мобильная версия сайта вконтакте

Добавить к себе на сайт такое pop-up окно, можно с помощью скрипта Add To Home Screen.

Устанавливается очень просто, скачиваем файлы и загружаем их к себе на сайт. Затем прописываем настройки скрипта и путь к файлам, на главной странице сайта, а именно перед тегом <head/>:

[sourcecode language=”html”]

[/sourcecode]

add to home iphone popup window

В строке “message:” содержится текст всплывающего окна, его можно заменить на свои, либо удалить эту строка, тогда там будет отбражатся стандартное сообщение.

Опубликовано

Похожие записи

Подробнее

ArtsLab

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

4gray artslab artslabinfo