Фавикон писем: брендирование веб-версии email-рассылок

В email-маркетинге важно быть оригинальным, запоминаться клиентам, чтобы они ждали ваших писем и распознавали их во вкладке “Входящие” буквально с одного взгляда. Помимо контента, для этого в ход идут все возможные методы привлечения внимания к емейлу: тема, прехедер, эмоджи. Но часто забывают о таком интересном элементе, как фавикон (favicon).

Из статьи вы узнаете подробнее о вариантах дизайна этого элемента. Мы расскажем, почему стоит его добавлять в свои рассылки. А также объясним, как сделать фавикон онлайн-версии письма.

Для чего нужна иконка веб-версии письма

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

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

Как подобрать дизайн для фавиконки

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

• четкость формы;
• простота изображения;
• запоминаемость.

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

Остановитесь на 1-2 цветах, которые используют в вашем брендировании. Отдайте предпочтение контрастам, и тогда ключевой образ будет разборчиво виден. 

Не рекомендуем добавлять в фавиконку название или другой текст, ведь его сложно будет читать. Исключение – если название бренда состоит из трех-четырех букв. Посмотрите на пример рассылки от компании JYSK. Бренду удалось создать фавикон, используя название и даже лого.

Другое дело, что изображение птицы плохо видно. Возможно, стоило ограничиться чем-то одним — или птицей, или названием.

Вместо полного названия на иконку можно добавить одну-две буквы. Так поступили в Notino — акцент решили сделать на заглавной букве N.

Часто для фавиконки используют логотип бренда/компании. Это прекрасно работает, если лого отличается лаконичным дизайном с минимумом деталей и без надписей. По такому пути пошла компания Every Health.

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

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

Что отображается, если не сделать фавикон

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

Также некоторые ESP добавляют собственные иконки, которые отображаются над рассылаемыми через них письмами. И когда пользователь открывает браузерную версию емейла, то видит именно их логотип. Так, например, выглядит фавиконка CDP eSputnik в рассылке украинской авиакомпании.

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

Требования к картинкам

Иконка должна быть квадратной. Размер фавикона рекомендуется делать 16×16 пикселей — так он подойдет для большинства веб-браузеров. Чаще всего иконки делают в форматах ICO и PNG. 

Более точные требования вы всегда можете узнать в конкретной ESP, которую используете для рассылок. Например, в CDP eSputnik изображение должно иметь размер 16×16 пикселей и формат ICO. Загрузить картинку в систему можно в настройках в разделе “Лаборатория”.

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

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

Даже если у вас нет возможности заказать фавиконку дизайнеру, в интернете есть масса онлайн-сервисов, которые помогут ее сделать. Самый простой вариант — если у вас есть готовый логотип или другое изображение, которое годится для преобразования в иконку. Тогда используйте любой удобный вам бесплатный сервис для создания фавиконов. Это могут быть генераторы: 

• realfavicongenerator.net
• genfavicon.com
• perfecto-web.com

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

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

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

Готовое изображение будет доступно только в формате ICO. 

А в realfavicongenerator на выходе вы получаете файлы в ICO- и PNG-форматах. В скачанном архиве найдете несколько изображений в разных размерах, в том числе и 16×16 пикселей. Также на сайте сразу демонстрируется, как будет смотреться ваш фавикон. Причем даже есть вариант просмотра для темной темы браузера.

Если же необходимо сделать иконку с нуля, то можно воспользоваться любым графическим редактором. Например, в Canva выберите шаблон “Логотип” и сделайте подходящий дизайн. В бесплатной версии сервиса вы можете скачать готовое изображение размером 500×500 пикселей в формате PNG. Затем пропустите его через онлайн-генератор фавиконов и получите готовую иконку.

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

А если вы размышляете над тем, как еще выделиться в папке “Входящие”, то почитайте статью про BIMI для email. Такие аватары точно привлекут внимание к вашим рассылкам.