Клиент присылает логотип в PDF на 4000 пикселей, на белом фоне, с тонкой засечкой и градиентом. На экране дизайнера он выглядит дорого. Я уменьшаю его до размера вкладки браузера и вижу серое пятно с намёком на букву. С этого пятна я начинаю каждую проверку.
Тест на 16 пикселей и телефон на вытянутой руке
Первую проверку я провожу без программ. Экспортирую знак в 16×16, 32×32 и 48×48, кладу три файла рядом и смотрю в натуральную величину, без увеличения. Если в 16 пикселях пропадает главная форма, знаку нужна упрощённая версия для мелких размеров.
Потом беру телефон, открываю тестовую страницу с фавиконом и держу аппарат на обычном расстоянии, как в метро. Мобильная выдача Google показывает фавикон рядом с названием сайта, и человек решает, куда нажать, примерно за то время, пока палец едет вниз по экрану. Помогает ли знак узнать вас среди десяти соседей? Засеките секунды на трёх знакомых, которые логотип ещё не видели. Подставьте свои результаты, у меня они разные от проекта к проекту.
Читаемость: что ломается первым
На маленьком размере первыми пропадают:
Я загружаю знак в Google Lens, Яндекс Картинки и TinEye, причём отдельно цветную версию, монохромную и сам знак без надписи
- тонкие линии и засечки;
- буквы, которые сливаются, вроде «rn», «ш» и «щ»;
- градиент, который превращается в грязь;
- слоган под знаком.
Слоган я убираю из мелких версий сразу и без споров. Вторую проверку делаю в монохроме: чёрный на белом, белый на чёрном. Логотип, который держится только на цвете, развалится в тёмной теме браузера, а её включает заметная часть людей.
Если знак узнаётся в одном цвете и в 32 пикселях, все остальные носители он переживёт.
Уникальность: поиск по картинке до того, как найдут вас
Сгенерировать логотип теперь можно за минуту, поэтому одинаковые домики, листики и стрелки встречаются чаще, чем раньше. Я загружаю знак в Google Lens, Яндекс Картинки и TinEye, причём отдельно цветную версию, монохромную и сам знак без надписи. Похожие результаты я разбираю вручную: у кого этот знак, в какой сфере, в каком городе.
Потом смотрю открытые реестры товарных знаков ФИПС, если бренд собирается работать в России всерьёз. Поиск по картинке юридическую проверку не заменяет. Он лишь показывает очевидное заимствование до того, как его покажет вам чужой юрист.
Фавикон и og-изображение: логотип в чужих интерфейсах
Логотип чаще попадается людям в чужих интерфейсах, чем на вашем сайте: в выдаче, в закладках, в превью ссылки в Telegram. Вот минимальный набор файлов, который я собираю на каждом проекте:
| Файл | Размер | Где показывается |
|---|---|---|
| favicon.ico | 16, 32, 48 px внутри | вкладки, закладки |
| favicon.svg | вектор | современные браузеры, тёмная тема |
| PNG для поиска | кратно 48 px, например 96×96 | выдача Google и Яндекса |
| apple-touch-icon | 180×180 | ярлык на главном экране iPhone |
| og:image | 1200×630 | превью в мессенджерах и соцсетях |
У og-изображения своя ловушка: мессенджеры обрезают картинку по-разному. Логотип я ставлю в центр с запасом полей и проверяю превью в двух-трёх мессенджерах на реальной ссылке.
Логотип в шапке сайта я отдаю в SVG и прописываю ему ширину и высоту. Тяжёлый PNG на мобильном интернете тянет вниз загрузку, а картинка без размеров сдвигает вёрстку и портит CLS в Core Web Vitals. Если такие вещи хочется закрыть один раз и не думать о них, я делаю это в рамках разработки сайта.
Логотип как сущность бренда в поиске и нейросетях
Поисковики и ИИ-ассистенты собирают бренд из кусков: название, сайт, адрес, соцсети, логотип. Если на сайте один знак, в Яндекс Бизнесе другой, а во «ВКонтакте» третий трёхлетней давности, система получает три разные сущности вместо одной компании. Google тогда может подтянуть в панель знаний старую картинку, а Алиса AI или ChatGPT процитируют карточку, где вы ещё под прежним названием.
Поэтому я прописываю логотип в разметке Organization через свойство `logo` с прямой ссылкой на файл. Google просит для такого изображения не меньше 112×112 пикселей. Затем прохожу по всем профилям компании и ставлю один и тот же файл. Работа скучная, но именно из таких следов живого бренда и складывается доверие в духе E-E-A-T. Как проверить, что нейросети в итоге говорят о компании, я разбирал в статье про ИИ-аудит видимости.
Как я укладываюсь в один вечер
Начинаю с теста на 16 пикселей и монохрома. Это двадцать минут, и половина проблем всплывает уже здесь. Дальше иду в поиск по картинке и реестры. Потом собираю набор файлов из таблицы, ставлю его на тестовую страницу и смотрю с телефона. Последний шаг — разметка и сверка профилей.
В нашем словаре «Слоеводство» 144 термина, и слова «красивый» среди них нет. Зато я завёл в проекте файл `logo-check.txt`, куда записываю каждый размер, ссылку и дату проверки. Через год при ребрендинге он экономит мне целый день.