Smartlanding

Красивые тач — иконки для различных устройств

Тач иконки для лендингаПривет, друзья. Сегодня хотел бы поговорить с вами о тач-иконках. Все мы знаем и делаем фавиконки для десктопных браузеров, но делаете ли вы иконки и для touch-устройств?

Сам я раньше никогда не заморачивался по этому поводу, но рано или поздно, когда будете делать очередной проект всем нам придется столкнуться с тем, что нужна нормальная иконка, например, с логотипом, под разные устройства, вместо того, что предлагает сам браузер. Кроме того, сделать это очень просто, хоть и немного нудно.

Но я, все-таки решился проделать эту работу с несколькими своими сайтами (хоть особо и не изощрялся, может позже) и подумал, что вам тоже может пригодиться этот код. Вообще, взял его из этой статьи, если кому-то интересно — почитайте.

Может быть кто-то еще не догадался о чем речь, вот вам пример до создания иконок и после. Закладки в Safari на IOS:
Тач - иконки для сайта

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

<!-- For Chrome for Android: -->
<link rel="icon" sizes="192x192" href="touch-icon-192x192.png">

<!-- For iPhone 6 Plus with @3× display: -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-180x180-precomposed.png">

<!-- For iPad with @2× display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">

<!-- For iPad with @2× display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">

<!-- For iPhone with @2× display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">

<!-- For iPhone with @2× display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">

<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">

<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"><!-- 57×57px -->

Конечно, можно посидеть дольше и сделать еще и разные плотности пикселей несколько вариантов иконок там, где это нужно, но пока остановимся на том, что есть. Как вам такой подход? пользуетесь ли им, или готовите просто стандартную фавиконку?

3 комментария

  • Олег

    Ещё добавляю цвет статус бара в мобильных хром/сафари/экплорере, красиво

    Ответить
  • Кирилл

    Присоединяюсь к комментарию выше, цвет статус бара интересная вещь!
    + хочу дополнить, что данные иконки используются не только для закладок в самом браузере, но и если добавлять закладку на рабочий стол, на ios и android браузеры поддерживают данную технологию, более того если человек добавил закладку именно на рабочий стол, то у нас появляется возможность использовать специальный мета-тег, который позволяет открываться сайту на весь экран без браузера! Конечно он использует на самом деле ресурсы браузера, но визуально выглядит так, как будто открыли мобильное приложение. Правда в сафари есть косяк, при нажатии любой ссылки тебя все равно кидает в браузер, но это уже научились исправлять с помощью JS. На андройде все работает корректно.
    + есть специальные сервисы, которые позволяют автоматически генерировать фавиконки\тачиконки для ВСЕХ устройств (ios,android,windows phone), нужно только сделать один фавикон высоком разрешении и залить на сервис, на выходе архив со всеми иконками с нужными именами, со всеми размерами (ретина\не ретина) и т.д.

    Ответить
  • dimadv7

    Уже есть статья на эту ему https://smartlanding.biz/cvet-status-bara-na-mobilnyx.html

    Ответить

Добавить комментарий