0

Создание иконок сайтов для 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. Надеюсь они вдохновят на крутой креатив.

favicons1

Мне очень нравится набор цветов, использованный с часами. Они хорошо смотрятся с flat дизайном.

favicons2

Это не типичная flat иконка, которые мы видим сейчас, но она всё рано выглядит круто и забавно.

favicons3

Здесь очень круто работают с тенями. Серый цвет хорошо смотрится рядом с голубым.

favicons4

Ещё одна иконка с мега тенями. Радуга смотрится особенно круто. Градиент тоже хорош.

favicons5

Ещё одна не flat иконка с градиентами и тенями, используемые в небольших количествах.

favicons6

Цветы и трава выглядит очень реалистичными.

favicons7

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

favicons9 favicons8

↑ Наверх