Joomla уроки Создание и установка иконок iPhone и iPad для домашней страницы в Joomla

Создание и установка иконок iPhone и iPad для домашней страницы в Joomla

Важным аспектом любого современного сайта является наличие мобильной версии, а также иконок для популярных мобильных телефонов, таких как iPhone и iPad. После того, как вы установите на сайт под управлением системы CMS Joomla данные иконки вашей домашней страницы, пользователи смогут добавить сайт на свой рабочий стол, как любое из приложений.

iPhone-icon

Итак, начнем по порядку…

Сначала нам понадобятся сами иконки телефонов и планшетов от Apple.

Исходник в PSD формате данных иконок можно скачать по ссылке внизу статьи.

Открываем файл в программе Adobe Photoshop и устанавливаем свое изображение на каждую из иконок.

iPhone-icon

Теперь сохраняем путем применения первоначально инструмента Image-Crop на каждой иконке. Не забываем конвертировать файлы в формат PNG и переименовывать в 

  • apple-touch-icon-57×57.png – (standard iPhone)
  • apple-touch-icon-72×72.png – (standard iPad)
  • apple-touch-icon-114×114.png – (iPhone 4)

Перекидываем в корень нашего сайта все заранее подготовленные файлы, переходим в файл шаблона (обычно это index.php или index.html) и открываем его с помощью текстового редактора.

Вставляем между тегов <head>…</head> следующий код: 

 <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>

при условии, что исходный файл иконки у вас под названием apple-touch-icon.png и находится в корне сайта.

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

 <link rel="apple-touch-icon" href="apple-touch-icon-57x57.png" /> <link rel="apple-touch-icon" sizes="72x72" href="icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="icon-iphone4.png" />

Таким образом, мы получили общий код: 

 <head><title>Моя домашняя страница</title> <link rel="apple-touch-icon" href="apple-touch-icon-57x57.png" /> <link rel="apple-touch-icon" sizes="72x72" href="icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="icon-iphone4.png" /></head>

Проверяем на устройстве работу обновленного сайта с иконками iPhone и iPad.

Загрузка