Веб-дизайн
30 июня 2021
172

Что такое 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Редактор сервиса favicon.by

Canva.com

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

Be1.ru

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

Realfavicongenerator.net

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

Bestwebservice.ru/ico_converter/

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

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

Генератор faviconГенератор 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) и плагины, то это происходит практически автоматически.

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

Как стать веб-дизайнером с нуля и работать удаленно на фрилансе
Регистрируйтесь на бесплатный 3-дневный онлайн-интенсив
Рекомендуемые статьи:
Веб-дизайн
19.07.2021
Пагинация страниц сайта — что это и как ее сделать
Когда мы читаем книгу, информация в ней подается постранично. Прочитывая одну страницу, всегда можно перевернуть, чтобы перейти к следующей, поставить закладку на самом важном или интересном месте, открыть сразу на трехсотой или четыреста двадцать шестой. Это принцип не только «бумажных» книг — электронные работают аналогично, потому что подобный формат привычен и удобен всем людям. Что […]
262
Читать статью
Веб-дизайн
20.02.2021
UX-дизайн — что это такое и почему так важен для пользователя
UX-дизайн (от англ. user experience — «опыт пользователя») — это изучение потребностей и задач пользователей, когда мы говорим про их опыт взаимодействия с сайтом или приложением. UX это про то, когда вы пользуетесь сайтом и чувствуете, что все находится в нужном месте, вы не тратите много времени на поиск интересующей вас информации, и все ясно […]
530
Читать статью
Веб-дизайн
7.06.2021
Адаптивный веб-дизайн сайта: что это и зачем нужен
В этой статье мы собираемся разобрать, что такое адаптивность сайта и ее важность в веб-дизайне и интернет-маркетинге. С ростом популярности Интернета многие компании начинают заявлять о своем онлайн-присутствии с помощью сайта или блога. Ежедневно запускается около тысячи интернет-ресурсов. И если раньше пользователи, чтобы заходить на сайты, использовали только настольные компьютеры со стандартным размером экрана, а […]
95
Читать статью
Веб-дизайн
5.04.2021
Мокап – что это и зачем нужен в дизайне
Что такое мокап Мокап – это макет, с помощью которого заказчик может увидеть свой продукт в трехмерном изображении, то есть визуально представить и понять, как будет выглядеть готовый продукт в реальности. Обычно это файл в формате PSD, который заказчик может открыть у себя на компьютере либо телефоне и посмотреть, как будет выглядеть: логотип; дизайн фирменного […]
442
Читать статью
Веб-дизайн
26.05.2021
Лучшие бесплатные и платные фотостоки (фотобанки)
Идеи для контента или готовые изображения и видео легко найти на фотостоках, а уникальные фото и видео с высоким качеством — в фотобанках. Среди сайтов нет четкого разделения, что такое фотобанк, а что такое фотосток. В этой статье примем их за синонимы. В фотобанке можно найти бесплатное изображение, в фотостоке — платное и наоборот. Одни […]
180
Читать статью
Веб-дизайн
4.03.2021
10 основных правил типографики в веб-дизайне
Что такое типографика Типографика является одним из важных элементов веб-дизайна. Она делает контент читаемым с помощью визуальной иерархии, правильно подобранных шрифтов и верстки текста. Плохая типографика может испортить впечатление пользователя о сайте, а с ростом популярности CSS и HTML она стала еще более важной. Как правильно отметил директор дизайнерского агентства Information Architects Оливер Райхенштайн: Веб-дизайн […]
649
Читать статью
Веб-дизайн
19.02.2021
Что такое мудборд в дизайне на конкретных примерах и как его создать
У вас было такое, что вы придумываете какую-то идею, представляете, как это будет выглядеть в действительности, но как только начинаете делиться идеей со знакомыми, каждый раз слышите: «О чем ты, черт возьми, говоришь?». Не волнуйтесь, есть один инструмент, который поможет решить эту проблему, и этот инструмент — мудборд (доска настроения). Что такое мудборд Мудборд — […]
1001
Читать статью
Веб-дизайн
11.07.2021
HEX-код что это и как работает для обозначения цветов
Работа с цветом — это основной инструмент графического и веб-дизайнера. Каждое приложение и сайт подразумевает использование собственных оттенков, даже если выбран максимально лаконичный стиль. На этапе создания макетов подсказки по выбору цветовой гаммы есть во многих редакторах, та же компания Adobe предлагает для своих продуктов основные виды гармоний: колесо; комплементарность; контраст; оттеночные «гибриды» и многое […]
564
Читать статью
Веб-дизайн
9.04.2021
Что такое референсы и для чего они нужны
Что такое референсы Референсами называют фотографии, иллюстрации, картинки, рисунки, к которым обращается дизайнер, начиная новый проект. Это вспомогательный рабочий материал, который использует дизайнер, чтобы начать и настроиться на нужный лад. Для чего нужны референсы Задачи, которые в процессе работы решает дизайнер, вряд ли можно назвать уникальными. На 100% уникальных задач в современном мире осталось немного. […]
276
Читать статью
Веб-дизайн
1.03.2021
Сколько зарабатывает веб-дизайнер в штате и на фрилансе
Профессия веб-дизайнера будет востребована до тех пор, пока людям будут нужны сайты. Основными этапами процесса создания любого сайта являются: веб-дизайн; вёрстка страниц; программирование; наполнение контентом; тестирование. Веб-дизайнер приступает к работе практически первым, сразу после определения концепции и структуры сайта сайта. Что делает веб-дизайнер Веб-дизайнер отвечает за внешний вид сайта. Он заботится о том, чтобы сайт […]
210
Читать статью
Веб-дизайн
18.02.2021
Что такое веб-дизайн и чем занимается веб-дизайнер?
Определение веб-дизайна Веб-дизайн — это один из этапов разработки сайта. Сайты создаются для e-commerce (интернет-магазины), для услуг или для информационных блогов, но все, что связано с внешним видом и визуальной составляющей сайта, подпадает под понятие «веб-дизайн». Чтобы создать полноценно работающий сайт, вам необходимо знать языки программирования: Язык гипертекстовой разметки, состоящий из HTML-тегов для создания структуры […]
512
Читать статью
Веб-дизайн
6.03.2021
Что такое брендбук и как он может помочь бизнесу?
Задумывались ли вы о том, хороша ли визуальная идентичность вашего бренда в интернете? Суть брендинга в его уникальности, что делает узнаваемым продукт среди конкурентов, но владельцы малого и среднего бизнеса в потоке рутинных дел забывают про внешний вид своей компании, откладывая создание брендбука на потом. Наличие брендбука позволит вам: сэкономить деньги; повысить вовлеченность; привлечь больше […]
295
Читать статью
Оставьте ваш комментарий