Logo

Майя Скиданова

Автор статей

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

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

Фавікон –

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

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

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

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

Поєднуйте канали й підвищуйте ефективність комунікації з клієнтами

Почати

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

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

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

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

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

Багатокольорові зображення не підійдуть

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

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

Краще було зосередитись на чомусь одному

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

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

Головну літеру добре видно

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

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

Яскравий елемент привертає увагу

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

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

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

Місце пустим не буде, але ніякого змісту фавікон не містить

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

У розсилках клієнтів eSputnik за замовчуванням відображається лого сервісу

Такий підхід додає оригінальності, все ж це краще, ніж знеособлений глобус. Але, звичайно, брендована іконка відправника завжди виглядає цікавіше.

Вимоги до картинок

Іконка має бути квадратною. Розмір фавікону рекомендується робити 16х16 пікселів – так він підійде для більшості веббраузерів. Найчастіше іконки роблять у форматах ICO та PNG.

Точніші вимоги ви завжди можете дізнатися у конкретної ESP, яку використовуєте для розсилок. Наприклад, у CDP eSputnik зображення має розмір 16×16 пікселів та формат ICO. Завантажити картинку в систему можна в налаштуваннях у розділі “Лабораторія”.

Де в eSputnik додати зображення фавікону

Індивідуальна іконка з'явиться у вебверсії розсилок одразу, коли зображення буде завантажено. Покрокові рекомендації щодо того, як це зробити, читайте в окремій статті.

Як зробити іконку онлайн

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

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

Last post

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

Приклад створення іконки

Користувачі генератора від Perfectoweb також перед завантаженням побачать, як виглядає фавіконка. Бажаний розмір можна заздалегідь вказати, щоб не завантажувати кілька непотрібних файлів.

Простий у роботі сервіс Perfectoweb

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

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

Можна подивитись, як виглядатиме іконка в різних варіантах

Якщо ж необхідно зробити іконку з нуля, то можна скористатися будь-яким графічним редактором. Наприклад, у Canva виберіть шаблон “Логотип” і зробіть відповідний дизайн. У безкоштовній версії сервісу можна завантажити готове зображення розміром 500×500 пікселів у форматі PNG. Потім пропустіть його через онлайн-генератор фавіконів та отримайте готову іконку.


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

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

 

0.0 з 5 на основі 0 оцінок

Майя Скиданова

Автор статей

Коментарі 0