Что такое favicon и зачем он нужен вашему сайту

Внешний вид вашего сайта может сыграть важную роль в повышении узнаваемости бренда и того, как пользователи воспринимают ваш бизнес. Хороший сайт — это сочетание множества элементов веб-дизайна, которые вместе создают профессиональный внешний вид.

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

Оформление, специфика дизайна, уникальные торговые предложения, «напоминалки» с призывом подписаться, рассылка на имеющиеся адреса – это все невозможно переоценить, но иногда важной становится «мелочь». Такой мелочью можно назвать как раз favicon.

Фавиконки во вкладках браузера

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

Что такое favicon?

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

Само название происходит от английских favorite – любимый и icon – значок, иконка. Изначально использовались фавиконы при добавлении в избранное, но сейчас область применения значительно расширилась, миниатюрное изображение считается достаточно важным инструментом SEO-оптимизации.

Значок также можно найти в любом месте, где отображается ваш сайт, например:

• в адресных строках, вкладках и закладках;
• в результатах истории;
• в поиске Яндексе или Google – поисковые системы требуют специализированной настройки, тогда они начнут показывать не только сами ссылки, но и иконки;
• в закладках.

Фавиконка в истории просмотров браузера

Favicon также отображается в поисковых системах напротив сниппета сайта в выдаче. ‍Favicon может состоять из:

• логотипа компании;
• инициалов;
• других идентифицирующих изображений.

Какая польза от фавиконов

Устанавливать маленькую иконку необязательно. По умолчанию браузер показывает собственное изображение: 4-цветный шар в Chrome, изображение рыжей лисы в Firefox, букву O – в Opera. У использования фавиконов есть целый ряд преимуществ:

Делает сайт более заметным в поисковой выдаче Яндекса и Google

При поиске люди «фильтруют» глазами большой объем информации, зачастую торопятся, поэтому не всегда вчитываются в текст. Графика всегда выигрывает в этом плане: на то, чтобы просмотреть картинку, тратится доля секунды, мозг обрабатывает поступившие данные еще быстрее.

В результате, если сделать фавикон узнаваемым, придать ему форму «призыва к действию», например, в виде трубки телефона, то будет улучшена конверсия по звонкам и обращениям.

Фавиконки в поисковой выдаче Яндекса у сайтов

В целом узнаваемость значительно повышается

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

По статистике, до 80% пользователей не могут вспомнить, «о чем был» тот или иной сайт, но легко вспоминают после того, как видят картинку.

Узнаваемость улучшается и для офлайн-сферы

Логотип запоминается даже тем, кто просто просматривал информацию, сравнивал аналогичные товары и искал наиболее подходящий для себя товар. В дальнейшем, если человек увидит этот логотип в «обычном» магазине, то невольно всплывет ассоциация с предложениями, которые видел в интернете. Вероятность совершения покупки повышается в несколько раз.

Пользователю легче ориентироваться в закладках

Браузеры сохраняют достаточно неудобно, может быть название конкретного материала (например, заголовка статьи). Найти потом что-то нужное не так уж просто, а тем более, вспомнить, на каком именно сайте была важная информация. Иконка позволит отыскивать нужные данные намного быстрее, поэтому любой посетитель сайта скажет «спасибо» за фавикон.

Конечно, фавикон – это не «универсальное волшебное средство», а всего лишь небольшое дополнение к общему имиджу сайта и компании, которой этот веб-ресурс принадлежит. Он не заменит ни качественного дизайна, ни выгодных предложений, но увеличит шанс того, что покупатель запомнит этот сайт и это предложение, а потом вернется сделать покупку или заказать услугу снова и снова.

Есть еще один важный момент: если при создании сайта использовался конструктор, то по умолчанию выводится фавикон самого сервиса. Это не очень хорошо, потому что вместо того, чтобы продвигать свои товары или услуги, фактически, вы дополнительно рекламируете конструктор сайтов. Поэтому при создании своего ресурса таким способом фавикон нужен еще и чтобы трафик не «утекал» на нецелевые расходы. Меньше будет и отказов от тех, кому нужен сам конструктор.

Нужен ли фавикон лендингам и другим одностраничным сайтам

Одностраничники, посадочные страницы или landing page – это, как правило, рекламный инструмент, используемый для продажи определенного товара, продвижения услуг, информации о событии. Может возникнуть вопрос: нужен ли фавикон для такого «одноразового» ресурса, если не планируется его развивать, он должен отработать только на заявках в течение определенного времени.

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

• узнаваемость – если вы планируете запускать и другие рекламные кампании, дальше будет проще;
• лучшее «отношение» в рекламных кампаниях – многие специалисты по SEO отмечают, что поисковые системы предлагают более выгодные ставки по контекстной рекламе сайтам с фавиконами;
• доверие – ресурс выглядит более профессиональным и серьезным, а для лендинга это особенно важно, потому что посадочные страницы зачастую делают мошенники;
• презентабельный внешний вид – то же самое, как и на «большом» сайте;
• улучшенные поведенческие факторы – пользователь может открыть вкладку, а покупку сделать позже, с фавиконом ему будет проще вернуться и закончить заказ.

Нельзя забывать и о правиле «не рекламировать чужие сервисы». Лендинги часто делают на популярных конструкторах, таких как Tilda, uKit и других. Фавикон поможет сконцентрировать внимание пользователя на ваших товарах и услугах, а не на том, что предлагают сами ресурсы для создания одностраничников и мини-магазинов.

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

Иконка для браузера – это просто небольшая картинка, которая размещается и «опознается» браузером. Сделать ее можно в любом графическом редакторе, который позволяет работать с картинками на прозрачном фоне (формат PNG). Оптимальным считается Adobe Photoshop или Adobe Illustrator – программа для векторной графики, но можно воспользоваться Corel Draw или даже Paint.

Для создания фавикона надо:

1. Создать квадратный файл с прозрачной подложкой. Если вы используете Adobe Photoshop, то прозрачность отображается белыми и серыми квадратами, в Illustrator – белый фон означает прозрачность по умолчанию. Размер квадрата любой, но лучше сразу делать не слишком крупным.
2. Размер самого фавикона может быть от 16 на 16 пикселей. Поэтому картинку стоит подобрать такую, которая бы помещалась в квадрат, чтобы в ней не было мелких деталей, а она оставалась узнаваемой даже при таком уменьшении.
3. Как правило, используют логотип компании. Если логотипа нет, можно подобрать что-нибудь тематическое из айдентики или брендбука. В крайнем случае придется воспользоваться одним из сайтов-генераторов лого.
4. Получившуюся картинку нужно сохранить с размером от 16 на 16 пикселей в формате PNG с прозрачным фоном. Это и будет фавикон, но для того, чтобы системы его распознавали, надо будет преобразовать в формат ico. Проще всего воспользоваться специально созданными для такой конвертации онлайн-сервисами.

Нюансы про размеры favicon

Стандартный размер значка составляет 16 пикселей, однако современные браузеры требуют, чтобы вы создавали значок в различных разрешениях, чтобы они лучше всего выглядели на всех платформах. Вот несколько общих рекомендаций по размеру значка в разных браузерах:

• 16 пикселей: это классический размер значка, работающий во всех браузерах. Этот размер легко отображается в закладках, вкладках и адресных строках;
• 32 пикселя: этот размер отлично подходит для кнопки панели задач и для боковой панели «Прочитать позже» в Safari;
• 72 пикселя: если вы хотите, чтобы ваш значок лучше всего выглядел как значок на главном экране iPad, это именно тот размер, который вам нужен;
• 96 пикселей: этот размер лучше всего подходит для использования в Google TV;
• 114 пикселей: для последних моделей iPhone этот размер — лучший значок на главном экране. Дисплей Retina здесь в два раза больше стандартного размера;
• 128 пикселей: этот размер лучше всего подходит для презентации вашей компании в интернет-магазине Chrome;
• 195 пикселей: используйте этот размер для лучшего отображения на Opera Speed ​​Dial.

Нюансы про форматы изображения

Еще один важный момент — это формат вашего значка. В прошлом формат Windows ICO был популярным требованием для значков. Но сегодня у компаний есть еще несколько вариантов выбора. В следующем списке представлена ​​информация о наиболее распространенных вариантах форматирования значков:

• Windows ICO: как наиболее универсально поддерживаемый тип файла, формат ICO включает 32-пиксельный значок, который поможет вам выделиться на панели задач Internet Explorer в Windows 7. Он также имеет несколько значений глубины цвета и разрешения. Формат ICO остается единственным типом файлов значков, в коде которого не используется компонент «ссылка».
• PNG: вы можете создать значок в формате PNG без каких-либо специальных программ или цифровых инструментов, и он обеспечивает отличную кроссплатформенную совместимость. Этот формат очень удобен для пользователя, хотя он не поддерживается Internet Explorer 10 и более ранними версиями. PNG предлагает наименьший доступный размер файла и поддерживает альфа-прозрачность.
• APNG: анимированная версия формата PNG, APNG хорошо работает в Firefox и Opera. Однако из-за своего движения он часто может рассматриваться как слишком «занятый» или отвлекающий пользователей при использовании в качестве значка.
• SVG: для браузеров Opera лучше всего подходит формат SVG. Многие браузеры в настоящее время не поддерживают этот формат, но ожидается, что ситуация изменится. Этот формат, вероятно, станет доминирующим, поскольку избавит от необходимости создавать разные значки разных размеров.
• GIF: как и SVG, значки в формате GIF лучше всего работают в современных браузерах. Это контрастирует с тем, что многие пользователи считают их несколько устаревшими. Однако у форматов GIF есть то преимущество, что они привлекают большое внимание.
• JPG: формат JPG сегодня не так широко используется, как в прошлом, из-за более низкого качества разрешения по сравнению со стилями PNG. Поскольку значки очень маленькие, JPG (традиционно более крупный формат файлов) может потерять некоторые из своих преимуществ при использовании для этой цели.

Другие полезные советы по использованию значков

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

• Квадратные иконки обычно идеальны;
• Google рекомендует для значков наибольшее разрешение 192 на 192. Это значок с высоким разрешением;
• Формат файла Microsoft ICO может содержать несколько разрешений, что делает его одним из лучших форматов для использования;
• Неподходящие символы не будут отображаться Google.

Сайты для создания фавиконов

Photoshop или его аналоги необязательны. Существуют сайты, которые помогут создать фавиконку онлайн. Среди самых удобных:

Favicon.by

Этот ресурс предлагает интерфейс визуального редактора, поэтому если умеете рисовать, то можно прямо в нем изобразить фавиконку, а потом сохранить в подходящем формате. Поле сразу же размечено по пикселям, как и полагается, 16 на 16 или другой подходящий под миниатюру для сайта, но каждый «пиксель» увеличен в десятки раз, поэтому рисовать довольно удобно. Также можно загрузить имеющуюся.

Редактор сервиса favicon.by

Canva.com

Это один из крупнейших сайтов для создания «виртуального дизайна». В нем можно нарисовать или загрузить фавикон, но также есть множество шаблонов. Они легко кастомизируются при необходимости, позволяя создать красивую и оригинальную иконку, основа для которой нарисована профессиональным дизайнером. Этот ресурс пригодится и под многие другие задачи, например, оформление постов в Инстаграм, поэтому его в принципе стоит запомнить.

Be1.ru

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

Realfavicongenerator.net

Англоязычный сервис с отличной стабильностью и интуитивно понятным интерфейсом.

Bestwebservice.ru/ico_converter/

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

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

Генератор favicon онлайн

Все эти инструменты бесплатны, хотя в самых профессиональных, таких как Canva, есть и платные тарифы.

Как поставить фавикон на сайт

Фавиконка с расширением ico – это то, что надо «показать» и установить. Сам способ будет разниться в зависимости от того, каким образом написан сайт. В самых простых «самописах» необходимо будет вписывать параметр фавиконки в теге HEAD.

Также потребуется загрузить картинку на сайт, например, воспользовавшись FTP-доступом либо прямым веб-доступом. Можно выделить отдельную категорию под этот значок.

Затем необходимо получить ссылку на саму иконку вида: http://имясайта.ru/favicon.ico и вписать код, который выглядит так:

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

Способ подходит для тех ресурсов, которые редактируются «вручную», но большинство сайтов сейчас работают под системами управления контента, такими как WordPress, OpenCart и другими.

Установка производится плагинами, автоматически, нужно просто будет подгрузить иконку туда, куда «скажет» конструктор, но может потребоваться еще и такой метод:

Загрузить фавиконку на сайт в любую из директорий. В основной код прописывается такое значение:

<link rel=»icon» href=»http://путь к иконке» type=» image/используемый формат»>

В некоторых случаях добавляется дополнительный элемент вида:

rel=»apple-touch-icon»

Последний необходим, чтобы фавиконка корректно отображалась на мобильных устройствах, особенно на довольно «капризных» Айфонах. Поскольку более 80% всего трафика сейчас идет со смартфонов, то этот параметр учесть крайне желательно.

Как «объяснить» фавикон Google и Яндекс

Обе поисковые системы отлично «распознают» фавиконы на сайте и индексируют их автоматически. Процесс индексации занимает несколько дней, реже – недель. Чем более известен и чем больший «вес» имеет веб-ресурс, тем быстрее Google и Yandex распознают иконку, в том числе, если ее меняют на новую.

Кроме того, у обоих «гигантов поиска» есть свои требования к фавиконкам. Они довольно простые.

Требования Google

Эта система сейчас «предпочитает» отходить от стандартных прежде иконок 16 на 16. Google распознает и такую, но она может отображаться не так красиво. Основное требование – кратность 48, например 48 на 48 пикселей или 96 на 96. Некоторые специалисты советуют при изготовлении иконки ориентироваться на Google. Остальные требования намного проще:

• отсутствие непристойного содержания;
• соответствие общему стилю сайта, бренду, айдентике;
• уникальность – то есть, нельзя копировать лого известных брендов, если не являетесь представителем.

Google распознает и индексирует иконки сравнительно медленно, кроме того, «не любит», когда картинки часто меняются.

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

У Яндекса требования еще проще. Более того, этот поисковик еще и предлагает собственную «услугу»: если фавиконка не определена, то он возьмет любую, которая показалась ему «подходящей». Конечно, вряд ли стоит позволять ему такое: подбирается замена не живыми людьми, а роботами, то есть – случайно.

По поводу обеих систем стоит запомнить:

• Google «предпочитает» формат ico, svg, понимает gif и png;
• Яндекс рекомендует svg, но разберется и с ico, png и даже bmp, хотя он нежелателен;
• в фавиконку нельзя добавить анимацию, поэтому анимированные gif-картинки не распознаются.

Иконки отображаются не только в стандартном поиске, но и в новостях.

Несколько актуальных советов по созданию фавиконов

Реализация простой пиктограммы тоже имеет свои тонкости. Специалисты в области раскрутки сайтов и SEO готовы дать полезные советы, которые относятся к фавиконкам в 2021 году:

• формат ico используется чаще всего, но уже можно переходить на svg, png – с последним вообще не будет никаких проблем, ведь это стандартная графика с прозрачным фоном;
• желательно делать сразу же несколько фавиконов – браузеры умеют распознавать, но не всегда отображают корректно, особенно если приходится растягивать маленькую картинку 16 на 16 до довольно крупного 120 на 120 пикселей;
• дополнительно стоит создавать фавиконки с непрозрачным фоном, потому что в некоторых форматах мобильных телефонов они отображаются лучше, чем стандартные «прозрачные»;
• специальные сервисы помогут сделать картинку, но для начала стоит продумать ее внешний вид, ведь по сути маленькое изображение – основа узнаваемости ресурса;
• дополнительно стоит посмотреть, как смотрится фавиконка в Google и Яндексе.

Наличие фавиконки улучшает показатели в «глазах» роботов поисковых систем в несколько раз, поэтому отказываться от лишней возможности продвижения не стоит. Сделать иконку достаточно несложно, если есть специальные системы управления контентом (CMS) и плагины, то это происходит практически автоматически.

Если сайт самописный, придется указать параметры кода вручную либо обратиться к программисту, который занимался разработкой этого веб-ресурса.