Создание фавикона, который не выглядит как мусор
Эта крошечная иконка во вкладке браузера важнее, чем ты думаешь.
Открой свои вкладки браузера прямо сейчас. Сколько из них ты можешь идентифицировать только по фавикону?
Вероятно, большинство. Этот квадрат 16x16 пикселей делает серьёзную работу для узнаваемости бренда. Разноцветная G от Google. Птица Twitter. Осьминог GitHub. Ты знаешь их мгновенно.
А потом твой сайт с иконкой пустой страницы по умолчанию. Или хуже — логотип, который отлично выглядел при 500 пикселях, но превращается в неузнаваемое пятно при 16.
Почему фавиконы игнорируют
Большинство людей проектируют свой логотип, строят свой сайт и вспоминают о фавиконе в последнюю минуту. "Просто уменьшить логотип" кажется разумным. Это редко работает.
Детализированный логотип при 16x16 пикселях становится грязью. Текст нечитаем. Тонкие линии исчезают. Цвета смешиваются.
Хорошие фавиконы спроектированы для маленьких размеров, а не адаптированы из больших.
Что работает при крошечных размерах
Простые формы. Одна буква. Базовая геометрическая форма. Что-то узнаваемое за 2 секунды.
Высокий контраст. Тёмное на светлом или светлое на тёмном. Тонкие градиенты исчезают при маленьких размерах.
Жирные линии. Тонкие штрихи исчезают. Толстые, чёткие формы выживают при уменьшении.
Ограниченные цвета. Два или три максимум. Сложные палитры превращаются в шум.
Размеры, которые тебе действительно нужны
Браузеры, операционные системы и устройства запрашивают разные размеры:
- 16x16 - Вкладки браузера (критический)
- 32x32 - Панель задач, ярлыки
- 48x48 - Рабочий стол Windows
- 180x180 - Apple touch icon
- 192x192 - Android Chrome
- 512x512 - PWA экраны загрузки
Ты можешь создать каждый размер вручную. Или использовать генератор, который выводит все из одного исходного изображения.
Частые ошибки
Использование полного логотипа. "RunToolz" как текст при 16 пикселях? Нечитаемо. Используй часть с иконкой или создай упрощённую версию.
Забываешь про тёмный режим. Твоя чёрная иконка исчезает на тёмных темах браузера. Рассмотри добавление тонкой рамки или создание светлой версии.
Игнорирование фона. Некоторые контексты показывают фавиконы на белом, другие на тёмном, другие на выбранном тобой цвете. Тестируй все три.
Низкое разрешение источника. Начинай с хотя бы 512x512. Масштабирование вниз работает. Масштабирование вверх создаёт размытие.
Быстрый процесс
- Начни со своего логотипа или фирменного знака
- Упрости до самого узнаваемого элемента
- Сделай так, чтобы это работало при 16x16 сначала
- Масштабируй вверх оттуда, добавляя детали только там, где это помогает
- Тестируй в реальных вкладках браузера, а не только в своём инструменте дизайна
Фавикон — одна из тех маленьких деталей, которые отделяют отполированные сайты от любительских. Занимает 10 минут, чтобы сделать хорошо. Имеет значение каждый раз, когда кто-то бросает взгляд на свои вкладки.