Лучшие практики favicon

Длина текста

Лучше всего работает один символ. Favicon показывают очень мелким (16×16–32×32 пикселей), поэтому один-два знака читаются. Длинный текст сливается и выглядит грязно.

Выбор шрифта

Берите шрифты, которые остаются читаемыми в малом размере:

• Жирные начертания: Работают лучше тонких и light
• Гротески (sans-serif): Обычно читаются лучше на малом размере
• Избегайте декоративных и рукописных шрифтов: при уменьшении они разваливаются
• Проверьте читаемость: Всегда смотрите превью в реальном размере 16×16 пикселей, прежде чем утверждать макет

Контраст цвета

Текст и фон должны сильно отличаться. Значок попадает на светлый, тёмный и цветной фон вкладок — дизайн должен читаться везде. Близкие оттенки на 16 пикселях сливаются.

Простота

Держите композицию простой. Сложные детали пропадают. Один ясный элемент, который узнаётся как ваш бренд или сайт, лучше перегруженной сцены.

Какой формат брать

Какие размеры нужны

Отдайте несколько размеров, чтобы значок хорошо выглядел на всех устройствах и в разных контекстах:

• 16×16 пикселей: Обычный размер вкладки
• 32×32 пикселей: Экраны высокой плотности и часть сценариев в браузере
• 180×180 пикселей: Apple touch icon для домашнего экрана iOS
• 192×192 и 512×512 пикселей: Иконки Android и поддержка PWA

Примечание: рисуйте в самом большом размере (512×512) и уменьшайте, а не увеличивайте мелкий макет. Так качество лучше на всех размерах.

Совместимость браузеров

Проверьте значок в Chrome, Firefox, Safari и Edge и на десктопе, телефоне и планшете. Браузеры ведут себя чуть по-разному, поэтому широкая проверка даёт стабильный вид.

Полный логотип

Не ставьте полный логотип компании, если он не предельно простой. На 16×16 пикселей деталей слишком много. Лучше упрощённая версия, монограмма или ключевой символ бренда.

Слабый контраст

Слабый контраст на малом размере делает значок невидимым. Запас по контрасту нужен для светлых и тёмных тем браузера.

Неверное расположение файлов

Файлы должны лежать в нужном каталоге (обычно public или static), а теги link — указывать на эти пути.

Один размер

Один файл ограничивает совместимость. Держите набор (16×16, 32×32, 180×180, 192×192, 512×512), чтобы значок нормально смотрелся везде.

Без проверки

Перед выкладкой смотрите значок в нескольких браузерах и на устройствах. То, что хорошо в одном, может сломаться в другом. В инструментах разработчика проверьте, что файл реально загружается.