Как сделать иконку для apple

Добавляем иконки сайта для iPhone, iPad и Android

Если Ваш сайт достаточно популярен, то многие пользователи заходят на него даже с телефонов и планшетов! Многие добавляю его в закладки на рабочий стол телефона или планшета, для того чтобы на рабочем столе отображалась красивая иконка вашего сайта, необходимо.

Если Ваш сайт достаточно популярен, то многие пользователи заходят на него даже с телефонов и планшетов!

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

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

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

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

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

• 60х60 — IPhone
• 76×76 -iPad
• 120×120 — iphone-retina
• 152×152 — ipad-retina

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

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

А что Android.

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

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

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

Для быстрого автоматического создания иконок для сайта

Мы советуем использовать сервис ICONOGEN

Укажите файл с иконкой и сервис быстро сделает иконки разных размеров:

Файлы можно скачать архивом.

Сервис так же генерирует html код для вставки в шаблон сайта:

Источник

Используйте фавиконки правильно

Фавиконка (favicon) — это иконка, которая отображается во вкладке браузера перед названием страницы. Также эта иконка отображается в закладках и на рабочем столе для веб-приложений.

Фавиконка при установке веб-приложения Фавиконка на вкладке в браузере

Подключение

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

Почему именно набор, а не одну иконку? Дело в том, что браузеры и экраны развиваются и не стоят на месте. Чем современнее браузер, тем более современный формат он может поддерживать. Например, вы можете подумать, что можно подключить только одну SVG-иконку и браузер уже сам правильно отрисует её, но не все браузеры до сих пор поддерживают SVG-формат для фавиконок. На таблицу совместимости SVG-фавиконок можно посмотреть тут.

Обязательная фавиконка

Все — старые и новые — веб-серверы и браузеры поддерживают .ico-формат.

Для подключения нужно добавить в :

Обратите внимание на две детали: размер и расположение.

Размер. В интернете можно найти информацию, что нужно подключать фавиконку в формате .ico в размере 16×16. Это так и не так. Дело в том, что контейнер ico динамический и он может изменять размеры «на лету». Поэтому браузеры, которые понимают размер 16×16, сами сожмут 32×32 до необходимого. В каком случае нужно создавать favicon.ico в размере 16×16? Когда фавиконка размером 32×32 при сжатии начнёт мылиться (будет нечёткой). Это можно проверить вручную, сжав фавиконку с 32×32 до 16×16. Если размыливание картинки произошло, то без дизайнера не обойтись и придётся отрисовывать фавиконку вручную в графическом редакторе.

Расположение. Фавиконку в формате ico обязательно нужно класть в корень проекта, как это показано в примере выше. Дело в том, что любой веб-сервер незаметно для вас всегда ищет favicon.ico в корне проекта и пытается её подключить к сайту.

Дополнительные необходимые фавиконки

Расположение. Только favicon.ico должна лежать в корне проекта. Остальные иконки могут лежать в любом месте в проекте, например:

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

Если современный веб-браузер умеет работать с векторными фавиконками, то этот формат более предпочтительный: меньший вес, наилучшее качество, поддерживает смену тем, не нужно указывать размер.

Подключение точно такое же, как и для favicon.ico, только нужно добавить тип, чтобы браузер понимал, с чем имеет дело:

Для устройств Apple

Apple пошли по другому сценарию развития и предложили собственные размеры фавиконок для своих устройств — iPhone и iPad. Формат для подключения favicon для Apple поддерживают все современные браузеры.

Самым востребованным размером для старых устройств фавиконок стал размер 180×180. Давайте посмотрим пример подключения:

Подключив такую иконку, мы также поддержим старые устройства, которые не умеют работать с таким большим размером фавиконки и уменьшать её до нужных размеров.

Устройства Apple работают и с большими размерами иконок, но так получилось, что устройства, которые понимают большие размеры, можно подключать более современным способом с помощью манифеста. Манифест позволит скрыть подключение всех размеров из , что сделает разметку более читаемой.

Манифест

Манифест — это JSON-файл со всеми подробностями веб-приложения для браузера. Формат был разработан Google по инициативе PWA.

Чтобы добавить фавиконки с помощью манифеста, нужно подключить манифест, а в манифесте указать все иконки и их размеры, которые мы хотим подключить на сайт.

Файл. Создадим файл в корне проекта и назовём его manifest.webmanifest. Расширение .webmanifest нужно указать, чтобы браузер понимал, с каким файлом имеет дело. Само название файла может быть любым (в нашем случае — manifest).

Так как манифест — это JSON-файл, то он должен начинаться с открывающей скобки < и заканчиваться закрывающей скобкой>.

Внутри скобок нужно создать секцию иконок. Секция с иконками ожидает несколько иконок, поэтому добавим массив []:

Осталось добавить фавиконки по шаблону:

Если иконок несколько, то их нужно добавить через запятую:

Размеры. В манифесте мы укажем размер 192×192 и 512×512. 192 — так как это следующий размер после 180, а 512 — так как это очень большой размер для фавиконки, его будет достаточно. А что с промежуточными разрешениями? Всё хорошо: как и раньше, браузер сожмёт картинку к нужному размеру. Например, из 512 до 256.

src — путь до иконки;

type — тип иконки;

sizes — размер иконки.

Можно добавить дополнительные размеры иконок, если этого требует браузерная поддержка вашего проекта. Например, вам потребовалась иконка 256×256. Давайте добавим её:

Откуда брать фавиконки и как их приготовить

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

Если дизайнер не предоставил фавиконки, у верстальщика есть два пути:

Не добавлять фавиконки в проект.

Попросить дизайнера отрисовать фавиконку (лучше в векторном формате). Рассказать, что требуется отрисовать иконку в квадрате. Сама иконка может быть круглой или даже овальной, но изображение должно быть вписано в квадрат с пропорциями 1:1.

Векторный формат позволит растянуть фавиконку до нужных размеров (192, 256 и даже 512) без потери качества. Таким образом верстальщик сможет сгенерировать себе нужные размеры и подключить их к странице.

При генерации фавиконок с помощью сторонних сервисов всегда смотрите на получившийся результат. Чаще всего иконки получаются замыленными. Даже если брать хороший оригинал 512×512, то при уменьшении до 32×32 всё равно могут появиться артефакты.

Для генерации фавиконок используйте сервис favicon-generator: экспортируйте изображение фавиконки в формате PNG, добавьте это изображение в сервис генерации фавиконок, нажмите кнопку «Create favicon», а потом — ссылку «Download the generated favicon». Вы скачаете архив со всеми возможными вариантами фавиконок. Возьмите favicon.ico и другие необходимые версии, подключите к странице проекта.

Итоговый способ подключения фавиконки:

manifest.webmanifest

Таким способом мы будем поддерживать самые старые браузеры и самые новые.

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

Фавиконки — часть программы курса «HTML и CSS. Профессиональная вёрстка сайтов». Кроме этого в комплекте два месяца теории и практики, интересные проекты и личный наставник. А по промокоду SKUCHNO — скидка 1000 ₽.

Источник

Как создать иконку приложения для iOS?

Иконка приложения — особенности и правила. Итак, у вас возникла необходимость в приложении — вы заходите в App Store и в строке поиска вводите ваш поисковый запрос, формируя тем самым поисковую выдачу релевантных приложений. В случае, если вы не ищите конкретное приложение (когда вы точно знаете его название или бренд), ваш выбор упадет на приложение с наиболее привлекательными визуальными составляющими.

Иконка и ее влияние на скачивание приложения iOS

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

Иконка — это логотип?

Не совсем — давайте разберемся. Логотип — это символическое отображение бренда, его основных ценностей и целей. Иногда иконка может содержать элементы бренда или вообще состоять полностью из логотипа. Но не стоит отождествлять эти два понятия.

Как часто бывает, особенно если мы говорим об играх, логотипом будет изображение бренда компании-разработчика, а иконка будет содержать игровые элементы, часть процесса или игрового персонажа. Например, всем известная компания EA Games и ее логотип. И ряд ее игр-приложений представленный в App Store:

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

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

Как создать иконку: технические требования к иконкам приложений в App Store

Технические требования полностью предоставлены в информации для разработчиков от App Store.

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

Как сделать иконку приложения максимально привлекательной для пользователя?

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

• Придерживайтесь цветовых характеристик или цветовой схемы вашего бренда

Если ваше приложение имеет определенную цветовую схему, не стоит разрабатывать визуальные элементы вне этого стиля. Это упростит восприятие и создает целостное впечатление от приложения у пользователя. Ваша иконка это отображение вашего приложения. Вы формируете ожидания пользователей — что их ждет, когда они откроют приложение.

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

Рекомендуем использовать границы в значке. Границы выделяют иконку и помогают сделать ее более заметной для пользователя при поиске и просмотре магазинов.

• Темная или светлая тема смартфона

Адаптируйте свою иконку, для корректного отображения, как на светлой, так и на темной теме телефона.

• Не используйте текст— оставьте слова для текстовой оптимизации

Смотрите первый совет. Текст затрудняет восприятие, делает иконку перегруженной элементами.

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

Если мы говорим о тематических приложениях, есть типичные элементы и цветовые схемы, характерные именно для этого сегмента. Например, приложение — сонник или медитация обычно имеет цвета визуального оформления от синего к фиолетовому. Приложения пресетов выполнены в темных тонах и иконки имеют соответствующий вид:

В таком случае рекомендуем сделать иконку для IOS приложений в такой же цветовой палитре.

• А/В тестирование — обязательно к использованию!

Иконка нравится вам — конечно, ведь на ее разработку было потрачено немало усилий. Иконка нравится команде — ведь они точно знают, о чем приложение и какие его основные преимущества. Чтобы получить однозначный ответ — какое именно визуальное оформление понравится вашим пользователям, опираясь на показатели конверсии, используйте А/В тесты.

• Работа с сезонностью и праздниками

Отличной практикой является обновление иконки в связи с праздничными событиями или сменой сезонов. Добавляйте ассоциативные элементы — в новогодние праздники можно добавить сугробы, снежинки и прочие атрибуты. Под Хэллоуин легко сделать иконку, добавив тыквы, паутины или устрашающие детали. Это покажет пользователям, что вы продолжаете работу с приложением и может повысить показатели конверсии.

• Две основные стратегии — очень похоже на конкурентов, или же совсем не похоже

Имейте в виду, очень похожая иконка приложения на основных конкурентов, позволит вам соблюсти правила ниши и основные тенденции, но не выделит вас на их фоне. А совсем отличающаяся иконка может вызвать непонимание у пользователей.

Приложение-напоминалка про прием лекарств — практически все графические элементы на иконках содержат изображение капсул-таблеток. Но цветовые схемы и дизайн могут заметно отличаться друг от друга.

• Иконка отлично выглядит при любом масштабе

Думайте масштабно, но учтите размеры иконки. Иконка должна быть понятна и читаема при любом масштабе отображения.

• Учитывайте особенности платформыприложений

Перед тем как сделать иконку, тщательно изучайте технические требования платформы под IOS. Не полагайтесь на универсальность. Изучайте иконки конкурентов в App Store и Play Market. Часто иконки в магазинах разные. Учтите это создайте различные иконки под каждый магазин приложений.

• Не забывайте про обновление значка

Пробуйте новое, отслеживайте изменения в магазинах и их основные направления. Не оставляйте работу по обновлению и улучшению иконки приложения iOS.

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

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

Источник