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

Привет, друзья. Сегодня хотел бы поговорить с вами о тач-иконках. Все мы знаем и делаем фавиконки для десктопных браузеров, но делаете ли вы иконки и для 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 комментария

  1. Олег

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

  2. Кирилл

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

    1. dimadv7

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

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