Создание иконок сайтов для iOS и Android
Многие сайты имеют favicons для закладок. А что если сайт добавили на «рабочий стол» в IPhone? Favicons могут использоваться сайтами и веб приложениями.
Представляем Вам небольшую инструкцию как можно установить favicons для устройств на базе IOS и Android.
iOS Размеры иконки
Различные устройства Apple имеют различные разрешения, что означает необходимость создавать разные размеры иконок. Идеально для каждого разрешения адаптировать иконку.
Как Вы возможно заметили, что retina иконки в 2 раза больше предыдущих разрешений. Это из-за того, что retina экраны имеют двойную плотность пикселей. То есть для заполнения того же пространства 57х57рх нужно отрисовать 114х114рх.
Совет: помните, что чем меньше иконка, тем меньше деталей необходимо отрисовать, т.к. их будет видно хуже.
Установка иконок
Если уже устанавливали иконки для сайта, то знаете что это элементарно. просто добавить одну строчку кода в заголовок HTML с ссылками на .ico или .png картинки.
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
Для добавления iOS иконок всё аналогично, просто другой синтаксис. Конечно, каждую иконку нужно прописать отдельно.
Чтобы iOS устройство распознало иконку как favicon необходимо 2 вещи. Сперва, «rel» должно быть прописано как apple-touch-icon, а потом необходимо, что размер был в стиле 57х57. Ниже пример как это должно быть.
<link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png" />
Специальные эффекты
Надеюсь, Вы в курсе, что все iOS иконки имеют закруглённые края, небольшую тень и блики. Это делается Apple автоматически, не стоит беспокоится и добавлять это самостоятельно. Делайте иконки квадратными
Для того, чтобы убрать автоматическую обработку необходимо это прописать в «rel»:
<link rel=”apple-touch-icon-precomposed” sizes=”114×114″ href=”apple-icon-114×114-precomposed.png” />
Android и остальные устройства
Favicons для Apple подходят так же для: Blackberry v6.0 и выше, Android 2.2 и выше. Согласитесь, что это приятно? Не нужно создавать версия для каждого из устройств на Android и Blackberry, а так же всех остальных.
Design tips
Несколько моментов, которые следует держать в голове, когда придумываете favicons. Во-первых, Apple всегда самостоятельно добавляет определённые эффекты самостоятельно: тени, скруглённые края и глянец. Советую при разработке учитывать это и анализировать как иконка будет выглядеть с такими эффектами.
Так как прийдётся делать иконки в разных размерах, то отрисовывайте их в векторе – будет значительно проще экспортировать в разные размеры. Начинайте работу с большего размера – проще уменьшать размер, чем увеличивать.
Иконки для вдохновления
Вот пример различных крутых иконок, которые я нашёл на Dribbble. Надеюсь они вдохновят на крутой креатив.
Мне очень нравится набор цветов, использованный с часами. Они хорошо смотрятся с flat дизайном.
Это не типичная flat иконка, которые мы видим сейчас, но она всё рано выглядит круто и забавно.
Здесь очень круто работают с тенями. Серый цвет хорошо смотрится рядом с голубым.
Ещё одна иконка с мега тенями. Радуга смотрится особенно круто. Градиент тоже хорош.
Ещё одна не flat иконка с градиентами и тенями, используемые в небольших количествах.
Цветы и трава выглядит очень реалистичными.
Выбор цветов просто фантастичен – режко можно увидеть чёрный и красный цвета вместе. Так что хорошо смотрятся горы: как будто они реально вырезаны из бумаги.
