Фавікон листів: брендування вебверсії для email-розсилок

У email-маркетингу важливо бути оригінальним, запам'ятовуватися клієнтам, щоб вони чекали ваші листи та розпізнавали їх у вкладці “Вхідні” з першого погляду. Крім контенту, для цього в хід ідуть усі можливі методи привернення уваги до емейла: тема, прехедер, емоджі. Але часто забувають про такий цікавий елемент, як фавікон (favicon).

Зі статті ви дізнаєтеся докладніше про варіанти дизайну цього елемента. Ми розповімо, чому варто його додавати до своїх розсилок, а також пояснимо, як зробити фавікон онлайн-версії листа.

Для чого потрібна іконка вебверсії листа

Головне призначення цієї невеликої іконки – виділити вкладку на тлі решти. Важливу роль для впізнаваності компанії грає візуальна складова – шрифт назви, логотип, корпоративні кольори. Часто люди можуть розпізнати відомі бренди лише за цими атрибутами. Для цього елементи брендування повинні регулярно потрапляти в поле зору аудиторії. Тому компанії вкладаються в розвиток власного стилю і скрізь використовують логотип і особливу колірну схему – від дизайну інтернет-магазинів до маркетингових розсилок у всіх каналах. І в цьому також одне з головних завдань фавікону вебверсії листа – підтримка корпоративної айдентики. Він доповнює єдиний стиль, який притаманний усім видам комунікації з підписником.

Ще один момент: іконка показує підписнику, що бренд приділяє увагу кожній деталі. Користувачеві він корисний із суто практичної точки зору: якщо людина відкриває багато вкладок одночасно, то завдяки фавікону можна швидко відшукати відкритий лист.

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

До дизайну фавіконки є кілька особливих вимог через її розмір. Головні характеристики, яким має відповідати іконка:

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

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

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

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

Інша річ, що зображення птаха погано видно. Можливо, варто було обмежитися чимось одним — чи птахом, чи назвою.

Замість повної назви в іконку можна додати одну-дві літери. Так вчинили в Notino – акцент вирішили зробити на великій літері N.

Часто для фавіконки використовують логотип бренду/компанії. Це чудово працює, якщо лого відрізняється лаконічним дизайном з мінімумом деталей і написів. 

Також можна використовувати окремий графічний елемент логотипа. Наприклад, в іконці сервісу “Dreamstime” зображено лише характерну спіраль, що міститься замість крапки літери “і” у назві бренду.

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

Що відображається, якщо не зробити фавікон

Не всі компанії витрачають час і зусилля на створення власної іконки, яку видно користувачам під час перегляду вебверсії листа. Але це не означає, що її місце просто порожнє. У таких випадках людина бачить стандартне зображення – значок земної кулі.

Також деякі 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. Такі аватари точно привернуть увагу до ваших розсилок.