Москва +7 (495) 772 97 91

Фавикон для сайта: что это такое, как его сделать

Favicon (сокращение от английского favorites icon, или «знак для избранного») — это значок сайта, который показывается на вкладке браузера и в поисковой выдаче. Простыми словами фавикон - это маленький значок сайта, который помогает пользователю ориентироваться в интерфейсе и быстрее находить нужные сайты. Фавикон давно стал одним из элементов айдентики бренда вместе со шрифтами, цветами и логотипом.

Где отображается фавикон

Фавикон можно увидеть и в поисковой выдаче, и в браузерах. Вот где он отображается:

  1. На открытых вкладках любого браузера:
    Из множества открытых вкладок он поможет «выхватить» взглядом нужную
    Из множества открытых вкладок он поможет «выхватить» взглядом нужную
  2. В закладках браузера, рядом с коротким описанием сайта:
    Функция — помочь пользователю найти нужную страницу быстрее
    Функция — помочь пользователю найти нужную страницу быстрее
  3. В качестве ярлыка на смартфоне:
    Если пользователь вынес сайт на рабочий стол
    Если пользователь вынес сайт на рабочий стол
  4. В разделе «Истории» в браузере:
    Чтобы увидеть фавикон, придется зайти в настройки
    Чтобы увидеть фавикон, придется зайти в настройки
  5. В поисковой выдаче «Яндекса» фавиконы отображаются слева от заголовка на сниппете сайта и делают сайт узнаваемым в поисковой выдаче. Если у сайта нет фавикона, рядом со сниппетом будет отображаться стандартный значок CMS, на которой сайт создан.
    Например, значок WordPress
    Например, значок WordPress
  6. В мобильной выдаче поисковой системы Google:
    Так выглядят сайты в мобильной выдаче Google
    Так выглядят сайты в мобильной выдаче Google

В десктопной версии Google они не отображаются, несмотря на то что с 2020 года Google тестирует эту функцию.

Пока дальше тестирования дело не идет, и сайты, особенно если пользователь привык к выдаче «Яндекса», смотрятся сиротливо
Пока дальше тестирования дело не идет, и сайты, особенно если пользователь привык к выдаче «Яндекса», смотрятся сиротливо

Помимо фавиконов сайта могут существовать и отдельных разделов и даже страниц.

Для чего нужен фавикон

Нет достоверной информации о том, что фавикон влияет на ранжирование сайтов, поэтому его наличие не является обязательным требованием. Но косвенно, через поведенческие факторы, он может позитивно сказываться на продвижении ресурса.

Простая логика: если сайт легко найти в выдаче, в истории, в открытых вкладках, — больше вероятность, что пользователь будет возвращаться на сайт и это отследят поисковые системы.

Есть, как минимум, 4 плюса использования фавиконов:

  1. Сайт становится заметнее и индивидуальнее в поисковой выдаче «Яндекса». Это может увеличивать его кликабельность.
  2. Сайт лучше запоминается. Как и любые другие элементы айдентики сайта, работает на его запоминаемость, особенно если подобран грамотно.
  3. Сайт легче найти в закладках, в избранном, в истории, во вкладках браузера.
  4. Сайт вызывает доверие. Это часть впечатления, которое сайт производит на пользователя. Его наличие говорит о том, что разработчики думали об удобстве пользователей.

Размер фавикона: какие картинки подбирать

При создании учитывают размеры картинки (на маленьких экранах это может быть всего 16х16 пикселей), читаемость с учетом минимального размера и визуальный стиль бренда.

Чтобы фавикон выглядел современно, релевантно сайту и легко для восприятия, картинку важно подбирать:

  1. Например, Google использует мини-логотипы для своих сервисов
    Например, Google использует мини-логотипы для своих сервисов

    Как вариант, можно подбирать картинку по теме сайта: например, собаку при продаже зоотоваров или зеленый росток как фавикон для сайта садово-огородной тематики.

    Иногда для привлечения внимания создают в виде картинки-стрелки, не имеющей связи с логотипом и цветовой палитрой бренда. В поисковой выдаче такой вариант теоретически может привлечь внимание к сниппету сайта...

    Но во вкладках браузера стрелочка будет показывать на следующую вкладку, и это не на пользу бренду
    Но во вкладках браузера стрелочка будет показывать на следующую вкладку, и это не на пользу бренду

    И точно никак не помогает пользователю запомнить сайт.

  2. Яркую. Градиент, пастельные тона притягивают взгляд менее активно, чем яркая картинка в контрастных цветах. Яркий фавикон дает больше шансов на клик в поисковой выдаче; его просто найти и среди открытых вкладок браузера.
  3. Без мелких деталей. Фавиконы отображаются очень миниатюрно, и картинка с большим количеством мелких деталей, с цветовым хаосом или тем более с текстом не будет считываться пользователями. Минимум деталей, 2-3 цвета помогут сделать его понятным и заметным.
    Пример в спокойных тонах, перегруженного деталями, и яркого без мелких деталей. Разница ощутима!
    Пример в спокойных тонах, перегруженного деталями, и яркого без мелких деталей. Разница ощутима!
  4. Оригинальную. Должен быть уникальным — повторяющиеся фавиконы могут привести к путанице и точно не принесут пользы сайту.
  5. Не анимированную. Анимацию не поддерживают ни «Яндекс», ни Google.
  6. Квадратную. Подходит только квадратное изображение. Сервисы-генераторы не примут другие варианты. А если делать самостоятельно, прямоугольные изображения либо придется обрезать, либо пропорции картинки нарушатся.

Требования Яндекса:

  • Возможные размеры: 120х120, 32х32, 16х16 пикселей. «Яндекс» рекомендует размер 120х120 — в этом случае картинка в сервисах поисковой системы будет отображаться максимально четко.
  • Возможные форматы изображений: SVG, ICO, GIF, JPEG, PNG, BMP.

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

Чтобы узнать больше, обретитесь к «Яндекс.Справке».

Требования Google

    Несмотря на то что в десктопной версии поисковой выдачи фавиконы не отображаются, во всех других локациях они будут видны. Требования Google таковы:
  • Возможные размеры: любые кратные 48 пикселям. 48х48, 96х96, 144х144 пикселя. Загружать картинку размером 16х16 пикселей можно, но делать этого Google не рекомендует.
  • Возможные форматы изображений: SVG, ICO, GIF (без анимации), JPEG, PNG.

Google рекомендует выбирать иконки, совпадающие с другими вариантами графического представления бренда. Больше информации — в справке Google.

Как сделать фавикон для сайта самостоятельно

В сети немало генераторов. Они помогают быстро получить не один фавикон, а картинки в разных форматах и размерах для использования в разных поисковых системах и браузерах.

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

При установке на сайт в корневом каталоге создают файл favicon.ico — своеобразный контейнер для нескольких картинок разных размеров. Такой набор обеспечит оптимальный вид на разных платформах.

Рекомендуем следующие онлайн-генераторы :

  1. Генератор от PR-CY. Русскоязычный сервис оперативно создаст архив с файлом ICO в разных размерах:
    Сервис простой и совершенно бесплатный
    Сервис простой и совершенно бесплатный
  2. Генератор Faviconit. Еще один бесплатный русскоязычный минималистичный сервис, принимает исходные картинки в размере не менее 310х310 пикселей и весом не больше 5 мегабайт:
    Помимо набора картинок, сервис выдает текстовый файл с кодом для загрузки на сайт
    Помимо набора картинок, сервис выдает текстовый файл с кодом для загрузки на сайт.

Как проверить фавикон

Проверить, как поисковые роботы видят фавикон сайта, можно с помощью URL и специальной команды:

  1. В «Яндексе». Вставьте в адресную строку поисковой системы вот такой адрес: https://favicon.yandex.net/favicon/имя_домена
    Все в порядке
    Все в порядке.
  2. В Google.Для проверки видимости используйте адрес: https://www.google.com/s2/favicons?domain=имя_домена
    Результат выглядит очень похоже
    Результат выглядит очень похоже

Делаем выводы

Чтобы сделать хороший фавикон для сайта:

  • Выберите картинку уменьшенного логотипа или его элемента.
  • При необходимости уберите с картинки лишние мелкие детали.
  • Проверьте цветовую гамму картинки, чтобы она совпадала с визуальным стилем бренда.
  • Кадрируйте картинку до квадратной формы.
  • Обратитесь к одному из генераторов и получите готовый набор в разных размерах.

Оценить статью
2 ответов

Комментарии

Написать комментарий
Популярные статьи автора
Кокос.com в рейтингах
Узнайте стоимость продвижения сейчас
Выберите удобный способ связи:
Выберите удобный способ связи:
Введите Ваш номер телефона:
Введите адрес Вашего сайта:
Нажимая кнопку «Получить предложение» вы соглашаетесь с Политикой конфиденциальности.
Введите Ваш Email:
Введите адрес Вашего сайта:
Нажимая кнопку «Получить предложение» вы соглашаетесь с Политикой конфиденциальности.
Оперативно отвечаем в рабочее время: с 10:00 до 19:00
Оперативно отвечаем в рабочее время: с 10:00 до 19:00
Вы уже проголосовали
+7 (495) 772 97 91
Возьмем ТОП вместе?
Здравствуйте, меня зовут
,
я представляю компанию
.
Со мной можно связаться по телефону
Со мной можно связаться по тел.
,
Спасибо!
Нажимая кнопку «Оставить заявку» вы соглашаетесь с Политикой конфиденциальности.
Цена лидов в различных нишах
Тематика Стоимость лида (Москва/Россия)
Отдых 500
Мебель 350
Оборудование 500
Бансковские услуги 500
Безопасность 500
Организация мероприятий, концерты, праздники 500
Недвижимость 500
Строительство и отделка 500
Грузоперевозки 500
Доставка еды 350
Юридические услуги 500
Бухгалтерские услуги 500
Пластиковые окна 500
Детские товары 350
Автозапчасти 350
Образование 500
Подпишитесь на рассылку
Не пропустите самое интересное из мира SEO и Digital. Только актуальные и самые крутые статьи.
Заявка успешно отправлена!
Наши сотрудники уже приступили к анализу Вашего сайта. Наш менеджер свяжется с вами в течении дня, спасибо!