Иконка и логотип — в чём разница и почему их путают
«Пришлите вашу иконку» — и вам присылают логотип. «Сделайте логотип» — а нужен на самом деле значок для приложения. Иконка и логотип выглядят похоже, часто совпадают физически — и всё же это разные инструменты с разными законами. Путаница между ними — причина половины «размытых» аватарок и нечитаемых значков в доке. Разбираем разницу, пограничные случаи и правила перевода одного в другое.
Логотип — знак идентификации бренда: отвечает на вопрос «кто это?». Иконка — элемент интерфейса: отвечает на вопросы «что это?» и «куда нажать?». Логотип уникален по определению; иконки в массе своей стандартизированы (лупа = поиск, шестерёнка = настройки). Пересечение — иконка приложения: это иконка по формату, но логотип по функции, и проектируется она по своим правилам.
Две профессии: идентификация и навигация
Логотип служит бренду: его задача — отличить компанию от всех остальных и накапливать узнаваемость — какие вообще бывают логотипы, мы разбирали отдельно. Уникальность — его суть: два одинаковых логотипа — это юридический конфликт.
Иконка служит пользователю: её задача — мгновенно объяснить функцию или объект. И здесь уникальность вредна: лупа обязана означать «поиск» везде, корзина — «купить», дискета — «сохранить» (даже для поколения, не видевшего дискет). Иконки — общий язык интерфейсов, и «креативная» иконка настроек — это ошибка проектирования, а не смелость.
Отсюда зеркальные критерии качества: хороший логотип не похож ни на что; хорошая интерфейсная иконка похожа на общепринятый образ своей функции.
Таблица различий
| Логотип | Иконка | |
|---|---|---|
| Вопрос | «кто это?» | «что это? куда нажать?» |
| Уникальность | обязательна | вредна (кроме иконки приложения) |
| Живёт | везде: от визитки до вывески | в интерфейсе |
| Размеры | любой, от фавиконки до билборда | фиксированная сетка: 16‑48 px |
| Штук у бренда | один (с версиями) | десятки–сотни, единым набором |
| Кто делает | бренд‑дизайнер | UI/иконочный дизайнер |
Пограничная зона: иконка приложения и фавиконка
Главный источник путаницы — иконка приложения: по формату это иконка (квадратик в сетке), по функции — логотип (идентифицирует бренд среди других приложений). Такой же гибрид — фавиконка. Для этих носителей у брендов есть три стратегии:
- Компактный знак. Полный логотип не влезает — в квадрат идёт его знаковая часть: «N» Netflix, самолётик Telegram, монограмма для текстовых логотипов.
- Специальная версия. Знак адаптируют под сетку иконок: упрощают детали, утолщают линии, подбирают фон — у Instagram иконка и логотип‑подпись — разные объекты одной системы.
- Иконка ≠ логотип вообще. Игры ставят в иконку персонажа, а не знак — как это устроено у мобильных игр, мы разбирали отдельно; сервисы с сезонными иконками (календарь с живой датой) тоже разводят слои.
Общий принцип: логотип не «уменьшают» в иконку — иконку проектируют из логотипа. Механическое уменьшение полного знака до 48 пикселей — самый частый источник «мыла» и нечитаемости; про остальные причины, из‑за которых логотипы мылятся, мы писали отдельно.
Иконки внутри продукта: система, а не коллекция
Если вы делаете продукт, интерфейсные иконки — отдельная дисциплина со своими правилами, роднящими её с фирменным стилем:
- Единая сетка и размер (обычно 24×24 с выравниванием по пиксельной сетке) — иконки разного «веса» в одном меню выглядят свалкой.
- Единая толщина линий и стиль: контурные или залитые, скругления одинаковые. Смешение стилей заметно даже неспециалисту — как разнобой шрифтов.
- Стандартные метафоры: не изобретайте новую иконку для «поиска» — изобретайте только там, где у функции нет устоявшегося образа.
- Связь с брендом — дозированно: фирменным может быть радиус скруглений или характер углов, но не «уникальность» каждой пиктограммы.
Готовые наборы (Material Symbols, SF Symbols, Feather) закрывают 90% потребностей продукта; рисовать с нуля имеет смысл только фирменные дополнения к ним.
Простой способ понять, что перед вами: уберите объект из контекста. Знак без интерфейса продолжает что‑то значить («это Сбер») — логотип. Пиктограмма без интерфейса теряет смысл (лупа сама по себе — просто лупа) — иконка. Иконка приложения проходит первый тест — потому она и требует бренд‑дизайна, а не только UI‑подхода.
Частые ошибки
- Полный логотип в аватарке/иконке. Текстовая часть превращается в шум — нужен компактный знак, о правильном оформлении аватарок мы писали отдельно.
- «Креативные» иконки функций. Пользователь не должен разгадывать ребусы: конвенции сильнее оригинальности.
- Иконки из разных наборов вперемешку. Дешевле взять один набор целиком, чем собирать «лучшее» из пяти.
- Иконка приложения, забытая в брендбуке. Главный носитель цифрового бренда должен быть спроектирован и зафиксирован наравне с логотипом.
Как выглядит решение этой задачи у сотен брендов, удобно смотреть в каталоге: почти у каждого логотипа там лежит и компактная «иконочная» версия. Пошаговые смежные инструкции: иконка приложения, фавиконка, размеры логотипа для площадок.