Что такое фавикон?
Фавикон (favicon) — это небольшая иконка, которая отображается рядом с названием сайта во вкладке браузера, в закладках, истории посещений и на панели быстрого доступа. Название происходит от слов favorite icon — «избранная иконка».
Примеры, где видно фавикон:
- Вкладки браузера
- Панель закладок
- История посещений
- Результаты поиска в некоторых браузерах
Фавикон помогает пользователям быстро узнавать ваш сайт среди других, улучшает восприятие бренда и добавляет профессионализма.
Требования к фавикону
Фавикон должен быть:
- квадратным (например, 16×16, 32×32, 48×48, 64×64, 96×96 или 512×512 пикселей)
- сохранён в одном из форматов: .ico, .png, .svg, .gif, .jpg (наиболее совместим — .ico или .png)
- простым и легко узнаваемым даже в маленьком размере
Как создать фавикон
Есть несколько способов создать фавикон:
1. Онлайн-генераторы
Можно использовать бесплатные онлайн-сервисы:
Вы можете загрузить готовое изображение, нарисовать иконку с нуля или сгенерировать её из текста (например, из первой буквы бренда).
2. Графические редакторы
Можно создать иконку в редакторе вроде Photoshop или Figma, а потом сохранить её в нужном формате (например, 64×64 .png) и конвертировать в .ico через онлайн-сервис.
3. Конструктор от Megagroup
Если ваш сайт создан на платформе Megagroup, вы можете воспользоваться встроенным генератором фавикона, который доступен прямо в личном кабинете. Он позволяет:
- создать иконку на основе логотипа, текста или изображения
- быстро загрузить готовый файл
- автоматически адаптировать фавикон под нужные размеры
Как добавить фавикон на сайт
Шаг 1: Сохраните фавикон
Поместите файл favicon.ico или favicon.png в корень сайта или в папку /images/.
Шаг 2: Добавьте ссылку в <head> вашего HTML-файла:
Для .ico:
Для .png:
Для адаптивных иконок (мобильные устройства, iOS и т.д.):
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
Разместить фавикон на сайте на базе платформы Megagroup можно всего в два клика — без редактирования кода и сложных настроек. Инструкция
Проверка фавикона
После добавления фавикона:
- очистите кэш браузера (или откройте сайт в режиме инкогнито)
- обновите страницу
- проверьте отображение во вкладке, в закладках и при добавлении сайта на главный экран смартфона
Полезные советы
- Используйте простой, контрастный дизайн
- Проверяйте, как иконка выглядит на тёмном и светлом фоне
- Делайте фавикон частью фирменного стиля сайта
- Генерируйте иконки сразу под разные устройства (favicon, apple-touch-icon, Android)
Заключение
Фавикон — это маленькая, но важная деталь любого сайта. Он делает ваш сайт узнаваемым, улучшает пользовательский опыт и добавляет профессионализма. Создать и подключить фавикон легко — достаточно следовать простым шагам.