Логотип и фавикон для сайта: размеры и форматы
Логотип на сайте выглядит мутным, а во вкладке браузера вместо значка — серый глобус: две частые мелочи, которые портят впечатление. Разбираю, в каком формате и размере нужен логотип для сайта, какие файлы фавикона подготовить и как проверить результат.
- Логотип для сайта — в SVG; запасной вариант — PNG с прозрачным фоном в 2 раза больше размера на макете.
- Нужны версии для светлого и тёмного фона.
- Фавикон: SVG, PNG 32×32 и apple-touch-icon 180×180; для Яндекса удобно 120×120.
Логотип для сайта: формат
| Формат | Когда использовать |
|---|---|
| SVG | Основной вариант: вектор, чёткий на любом экране, весит килобайты |
| PNG | Если нет вектора: прозрачный фон, в 2 раза больше размера на макете |
| WebP | Для логотипов-картинок со сложной графикой |
| JPG | Не подходит: нет прозрачности, появляется белый прямоугольник |
Попросите у дизайнера логотипа исходники в векторе (SVG, AI, PDF или EPS). Растровая картинка из мессенджера для сайта не подойдёт: на хороших экранах она будет мутной.
Размер логотипа в шапке
Ориентиры для шапки сайта
- Высота логотипа на компьютере32–56 px
- Высота на телефоне24–40 px
- PNG-файл×2 от размера
- Версиисветлая и тёмная
Логотип в шапке не должен быть огромным: его задача — узнаваемость, а не главная роль на первом экране. На телефоне шапка узкая, поэтому иногда вместо полного логотипа ставят знак.
Что такое фавикон
Фавикон — маленький значок сайта во вкладке браузера, в закладках и в результатах поиска Яндекса рядом с адресом. В выдаче он помогает узнать сайт среди десяти похожих ссылок, поэтому значок должен читаться даже размером 16 пикселей.
Размеры фавикона
Файлы кладут на сайт и указывают в коде страницы тегами link rel="icon". На конструкторах фавикон загружают в настройках сайта. Этот набор входит в мой чек-лист SEO-настройки при запуске.
Как проверить
- Откройте сайт в разных браузерах и посмотрите вкладку.
- Добавьте сайт на экран телефона — появится apple-touch-icon.
- Проверьте логотип на телефоне: не мутный ли он и не обрезан ли.
- В поиске Яндекса фавикон появится не сразу — подождите обновления.
Если логотипа ещё нет, начните со статьи «Что входит в фирменный стиль».
Частые вопросы
Какой формат логотипа лучше для сайта?
SVG: векторный файл чёткий на любом экране и весит мало. Если SVG нет, PNG с прозрачным фоном в два раза больше, чем логотип на макете.
Почему не показывается фавикон в Яндексе?
Яндекс обновляет фавиконы не сразу — от нескольких дней до недель. Проверьте, что файл открывается по прямой ссылке, указан в коде страницы и не закрыт в robots.txt.
Можно ли сделать фавикон из логотипа?
Да, но часто логотип нужно упростить: в квадрат 32×32 пикселя длинное название не поместится. Берут знак или первую букву.
