• Страница 1 из 1
  • 1
Как добавить иконку сайта на экран смартфона
Angerfist
Среда, 25 Мая 2016, 12:55 | Сообщение 1
Оффлайн
Vip
Сообщений:767
Награды: 21
Если Ваш сайт достаточно популярен, то многие пользователи заходят на него с телефонов и планшетов.



При этом многие добавляют его в закладки на рабочий стол телефона или планшета, для того чтобы на рабочем столе отображалась красивая иконка вашего сайта, необходимо:

Первым делом, нам необходимо создать нужную иконку в формате .png. Рисуете (или подбираете) ее. Желательно, в хорошем разрешении.

Качество (разрешение) экранов устройств от Apple постоянно растет и меняется, поэтому нужно оптимизировать эти "картинки" под разные устройства.

Второе, необходимо сделать иконки разных размеров для разных устройств:

для старых iPhone размер иконки должен быть 57х57, для новых, начиная с 4-го действуют следующие размеры:

60х60 - IPhone
76x76 -iPad
120x120 - iphone-retina
152x152 - ipad-retina

Третье, вставить в код указав пути к картинкам:
Код

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">


Safari на iOS 7 не добавляет эффекты к иконкам. А старые версии Safari добавляли эффекты для иконок , чтобы эффект не применялся - нужно к именам файлам добавить -precomposed.png

Android:

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

ОС Android намеренно не ищет эти иконки, а только в том случае, если пользователь решил добавить сайт на "рабочий стол".

В заключении - если не хотите заморачиваться со вставкой кода, подготовкой картинок разного размера, то просто закиньте в корень сайта картинку (размером 60 на 60 пикселей) с названием "apple-touch-icon.png". Это самый простейший способ.

Для быстрого автоматического создания иконок для сайта можно использовать сервис ICONOGEN, укажите файл с иконкой и сервис быстро сделает иконки разных размеров:

Файлы можно скачать архивом, сервис так же генерирует html код для вставки в шаблон сайта

Ну а теперь более подробнее:

Начнём с иконок для ОС Android, нужно указать в заголовке инструкции:
Код

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">

Таким образом мы объявляем четыре иконки разных размеров для разных случаев и разных разрешений экрана. В добавление к этому, если хотите, чтобы ваш сайт можно было вынести на главный экран и у него также была красивая иконка, то придётся ещё определить файл-манифест:
Код

<link rel="manifest" href="/manifest.json">

Примерное содержимое этого файла:
Код

{
    "name": "Название сайта или короткое описание под иконкой",
    "icons": [
        {
            "src": "\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}


Перейдём ко второй операционной системе — iOS — с её браузером Safari. Нужно ведь и для неё добавить необходимые инструкции.
Код

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

Все детали можно посмотреть, например, в документации к Google Chrome

Иконки для Windows Phone:
Код

<meta name="msapplication-TileColor" content="#474747">
<meta name="msapplication-TileImage" content="/mstile-144x144.png?v=NmYO8WoKWA">

Для более тонкой настройки нужно добавить файл browserconfig.xml.
Код

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="/mstile-70x70.png"/>
            <square150x150logo src="/mstile-150x150.png"/>
            <square310x310logo src="/mstile-310x310.png"/>
            <wide310x150logo src="/mstile-310x150.png"/>
            <TileColor>#474747</TileColor>
        </tile>
    </msapplication>
</browserconfig>

И указать ссылку на этот файл:
Код

<meta name="msapplication-config" content="/browserconfig.xml" />

Посмотреть подробнее на MSDN

Ну и напоследок: в версии Android Lollipop появилась возможность перекрашивать интерфейс браузера в цвета сайта, для этого нужно добавить в заголовок страницы ещё один метатег.
Код

<meta name="theme-color" content="#474747">

Когда будете делать сайт, не пренебрегайте этой возможностью, так как это сделает сайт чуточку лучше.
И ещё одна ссылка realfavicongenerator - ресурс позволяет значительно упростить работу со всеми этими иконками.
Прикрепления: 5996481.jpg (24.2 Kb) · 5408796.jpg (75.5 Kb)


No regrets
Страна: (RU)
Kosten
Среда, 25 Мая 2016, 12:59 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Круто сделано, а вот интересно на какие темы основном заходят с мобильных или смартфона, наверно это социальные сети, как вк.
Страна: (RU)
Сафрон
Среда, 25 Мая 2016, 22:24 | Сообщение 3
Оффлайн
Vip
Сообщений:224
Награды: 1
Так то здорово сделано, что будет кнопка сайта, просто кликнул и зашел, а не набирать или подключать браузер, все автоматически сработает.
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: