1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Что такое фавикон

Подробное руководство по фавикону для сайта

В статье:

Что такое фавикон

Favicon (сокр. от англ. FAVorites ICON — «значок для избранного») — значок сайта или страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, в табах и в других элементах интерфейса. Лучше всего смотрится изображение, которое можно вписать в квадрат. Стандартные размеры — 16×16, 32×32, для некоторых браузеров и ОС нужны размеры 60×60, 120×120, 192×192.

Обычно используют формат ICO, но еще доступны PNG, GIF, JPEG, SVG. Файл формата ICO содержит несколько версий фавикона, некоторые браузеры могут выбрать не ту версию и использовать значок более низкого разрешения, поэтому некоторые веб-мастера советуют PNG.

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

В России фавиконы в выдаче поддерживает Яндекс:

Сайты с фавиконами в выдаче Яндекса

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

Выдача Google в Великобритании

Хотя в результатах иностранного поисковика фавиконов нет, они все равно отображаются на вкладках браузера и в закладках.

Сайты с фавиконами на вкладках и на панели закладок

Зачем нужен фавикон

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

Разберем, для чего нужен файл favicon.ico и можно ли без него обойтись.

  • Выделяет сайт в выдаче

Favicon привлекает внимание к сайту. Без иконки сниппет меньше заметен взгляду, кажется, что ему чего-то не хватает.

Сайт без фавикона в выдаче среди прочих

  • С фавиконом сайт запоминается лучше

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

Логотип компании в фавиконе

  • Упрощает поиск нужного сайта

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

Закладки в Google Chrome

  • Избавляет от ошибки в лог-файлах

Браузеры запрашивают файл favicon.ico и если не находят строку с указанием фавикона, сервер отмечает в логах ошибку 404.

К примеру, такую:

Фавикон из картинки: какую выбрать

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

Фавикон с чашкой для сайта о кофе выглядит гармоничнее

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

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

Фавикон не будет выделять сайт в выдаче, если у конкурентов будут такие же картинки. Банальные популярные иконки лучше не использовать.

Как создать favicon для сайта

Есть три самых распространенных способа:

  1. Специальный плагин для Photoshop
    Позволяет работать этому популярному редактору изображений с форматом ico.
  2. Специальные программы для изготовления фавиконов
    Они специально «заточены» для изготовления иконок для сайта.
  3. Онлайн генератор favicon
    Самый простой и доступный способ — загрузить картинку в генератор, который сделает иконку для сайта из любого изображения. Иконка получится красивее, если изображение-донор кадрировать до квадрата.
Читать еще:  Как узнать причину отклонения Отзыва

RealFaviconGenerator сделает фавиконы для разных платформ и браузеров. Если вам достаточно одного значка, Генератор от PR-CY отконвертирует изображение в файл ICO 16х16.

Панель бесплатного генератора фавикона

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

Созданную картинку для фавикона нужно сохранить ее в корне сайта и добавить ссылку на размещенный файл в HTML-код главной:

Атрибут «rel» указывает на тип ресурса. Большинство браузеров распознают «icon», для Internet Explorer нужен «shortcut icon».

От формата файла зависит тип передаваемых данных. Для ICO это «image/x-icon» или «image/vnd.microsoft.icon», для PNG — «image/png» и аналогично для других форматов.

Для мобильных устройств часто прописывают отдельные фавиконы, указывая, к примеру, rel=»apple-touch-icon».

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

Фавиконка не появится сразу после установки кода, нужно дождаться, пока поисковик ее проиндексирует.

Размер фавикона для браузеров и устройств

С технической точки зрения быстрее и проще сделать одну иконку ICO, PNG или SVG для всех устройств. С точки зрения юзабилити лучше сделать несколько для разных устройств и браузеров, потому что они могут отличаться внешне — где-то требуется больший размер, где-то достаточно небольшого файла.

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

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

Популярные десктопные браузеры

Стандартно для фавикона делают файл favicon.ico, он поддерживается всеми браузерами, но можно выбрать и другой формат. Обычно рекомендуют установить несколько размеров фавикона для разных случаев: 16×16, 32×32 и 48×48.

Фавикон в HTML5

В HTML5 с помощью расширенного описания можно указать размеры и формат иконки. Для файла ICO, в котором несколько фавиконов, можно указать размеры в атрибуте sizes через пробел. Для фавикона в векторе укажите размер «any».

Android

Для Android рекомендуют сделать иконку в формате PNG 192×192, можно использовать прозрачность.

Указать фавикон и его расположение для Android можно через спецификацию The Web App Manifest. В ней описан простой JSON-файл, в котором веб-мастера указывают иконки, размеры и форматы для сайта или приложения. Его поддерживают Chrome, Opera, Samsung Internet и Firefox.

Манифест указывают с помощью:

Apple

Для iOS рекомендуют делать иконку PNG размером 180×180. В документации Safari такие называются Web Clips, в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах.

Apple поддерживает и другой формат иконок. Для закрепленных вкладок в Safari и кнопок на Touch Bar в MacBook есть возможность указать монохромную векторную маску и цвет, который ее заполнит при наведении.

Настраивают с помощью .

Edge и IE 12

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.

У Microsoft есть «Browser configuration schema reference» — XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файлы конфигурации браузера позволяют задавать настройки с помощью внешних XML-файлов.

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

Ф Фавикон сайта

Favicon – это пиктограмма (иконка) сайта, которая отображается в левой части перед названием страницы. Фавикон можно видеть в сниппетах поисковой выдачи Яндекса и Гугла, в закладках и во вкладках браузера. Нужен ли этот значок сайту, как он влияет на поведенческие метрики посетителей, помогает ли в продвижении? На все вопросы постараемся ответить в этой статье.

Читать еще:  Как расшифровывается АУЕ

Что такое фавикон и зачем он нужен?

Название Favicon произошло от соединения двух английских слов: favorite – избранный и icon – значок. Фавиконка для сайта ассоциируется в сознании пользователей с определенным ресурсом в сети. В конкурентной среде эта небольшая пиктограмма помогает решать важные задачи:

  1. Улучшает отображение сайта в поисковой выдаче. Фавикон делает описание более заметным в визуальном плане, что положительно сказывается на кликабельности сниппета. Эффективно используя фавикон для сайта, можно выгодно выделить свой ресурс на фоне конкурентов. Например, придать картинке свойства СТА (call to action) – призыв к действию, изобразив стрелку, телефонную трубку или другую побуждающую инфографику.
  2. Повышает узнаваемость. У человека в эпоху клипового мышления развита визуальная память. Он не запоминает текст или названия, но очень хорошо откликается на яркую графику. Бренды, раскрученные сайты узнаются, в том числе, по фавикону. В 80% случаев пользователь в поиске кликнет на знакомую пиктограмму, даже если сниппет размещается на низкой позиции в выдаче ПС. Для продвижения компании часто используют маркетинговый прием: совмещают favicon для сайта с логотипом бренда. Это даёт двойной эффект – раскручивает ресурс в онлайн и повышает узнаваемость бренда в офлайне.

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

Если не использовать favicon, то браузер покажет пустой квадратик напротив названия, сниппета вашего сайта. В 90% случаев страдает кликабельность, а соответственно снижается трафик и позиции в выдаче. Если для создания страниц использовались конструкторы, браузер выведет фавикон используемого сервиса. Хорошо это или плохо? Вы рекламируете услуги другого ресурса «забесплатно». Также вы повышаете количество отказов при переходах с поиска или РСЯ – пользователь, кликнув на известную пиктограмму, попадает на «не тот ресурс» и быстро уходит. Поэтому ставьте свою картинку, тем более сделать это не сложно.

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

Пиктограмма для ресурса – это изображение в формате GIF, JPEG, PNG или SVG с разрешением ICO. Favicon для сайта размещается в корневом каталоге. Стандартные размеры – 16Х16, 32Х32, 60Х60 или 120Х120 пикселей. Для корректного отображения длина и ширина иконки должны быть равными. Если используете фавикон из картинки, подбирайте квадратные изображения.

Пиктограмма должна отвечать следующим критериям:

  1. Демонстрировать четкие ассоциации с тематикой сайта, деятельностью компании. Фавикон для сайта должен показывать отличие, вызывать желание кликнуть по нему. Создавая иконку, относитесь к ней, как к логотипу бренда – это поможет эффективно визуализировать концепцию.
  2. Простота, понятность. Не перегружайте фавикон дизайном или сложными формами. Небольшие размеры картинки не дадут рассмотреть всех деталей. Сделайте иконку лаконичной, внятно читаемой при беглом просмотре.
  3. Оригинальность. Не используйте типовые пиктограммы. Оптимальный вариант – закажите favicon дизайнерам или фрилансерам. Трудно переоценить значение узнаваемости и дифференциации бренда для успешного продвижения бизнеса онлайн.

Как разместить favicon на сайте?

В 90% случаев картинка устанавливается с помощью плагинов или встроенных опций, которые используются в CMS. Ручной вариант предполагает размещение иконки в корневой папке сайта. В код между тегами на главной прописывается следующее значение:

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

Как Яндекс работает с фавиконами?

Иконка не сразу появится в результат выдачи ПС. Новая фавиконка проходит индексацию Яндекса 2-3 недели после того, как поисковые роботы найдут ссылки на картинку в коде. Роботы скачивают пиктограмму в свою лабораторию, проверяют и через 10-14 дней добавляется в общую базу иконок.

Для быстрой индексации важно прописать ссылку на фавикон в коде главной страницы сайта. Также проверьте ответ Яндекса – сервер должен вернуть значение 200 ОК. Внимательно проверьте, нет ли запрета индексации в robots.txt.

Сервисы для создания пиктограмм

Для самостоятельного создания иконки сайта используйте:

  • favicon.ru – можно нарисовать картинку самим, использовать готовые решения, преобразовать файл в нужный формат. Есть платные услуги дизайнеров.
  • pr-cy.ru – в специальном разделе сервиса можно обработать картинку под иконку сайта, задать нужный размер и формат.
  • favicon.cc – хороший инструментарий для самостоятельного моделирования пиктограмм, есть платные услуги.

Резюме

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

www.novichkoff.ru

Создай свой сайт!

Что такое фавикон и зачем он нужен

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

Итак, сначала разберемся что такое фавикон. Если Вы посмотрите на адресную строку Вашего браузера, то увидите примерно вот такую картину:

Вот эта маленькая картинка (пиктограмма) рядом с адресом Яндекса и есть фавикон.Фавиконы употребляются еще в нескольких местах, например, на страницах поисках Яндекса и т.д. :

У большинства сайтов перед названием стоят фавиконы. Некоторые фавиконы несут смысловую нагрузку, связаны с тематикой сайта, как например, на сайте Mail.ru:

А некоторые представляют собой просто абстрактные картинки, типа фирменного знака:

Чтобы посмотреть их многообразие, достаточно открыть «Закладки» в собственном компьютере или сделать какой-нибудь запрос.

Немного отвлекусь. На скриншоте представлена картинка с автоновостями и я невольно подумал: хорошо бы, если фавикон хоть немного отображал суть сайта. Однако это не всегда может получиться. Например, Вас интересует (и Вы об этом пишите) Ремонт АКПП Ауди А8 . Нарисовать АКПП — на таком маленьком рисунке никто ничего не разберет. В общем, в этом вопросе я пока не знаю как поступить.

Продолжим. Само слово фавикон происходит от английского favicon, которое в свою очередь является сокращением двух слов – FAVorites ICON, что переводится как «иконка (значок) для избранного». Так она стала называться потому, что первоначально использовалась в Microsoft Internet Explorer в качестве картинки около закладки в «Избранном».

Такие картинки были одного формата 16×16 пикселей, формат таких картинок, как правило, — ico и располагаются они в одном месте – корне сайта.

Что такое фавиконы, я думаю, Вы теперь себе отчетливо представляете. Несколько сложнее ответить на вопрос: а зачем они, собственно, нужны?

Традиционно на этот вопрос отвечают: чтобы выделить свой сайт среди других. Честно сказать, я этого не понимаю. Как можно выделиться, когда иконки есть почти у всех? Вот Вы можете сказать, что внимательно разглядываете фавиконы на странице выдачи какого-нибудь поисковика?

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

Более-менее похоже на правду утверждение – «чтобы было как у всех», «чтобы было не хуже, чем у соседа» и все в таком роде. Ну, не знаю – не знаю, это дело каждого.

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

Кстати, мне гораздо легче искать свои сайты, если у них одинаковая метка (фавикон), поэтому у всех моих сайтов он одинаковый. Поэтому, если увидите где-нибудь такой фавикон, значит, я где-то рядом 🙂

А что Вы думаете, для чего еще нужен фавикон? Напишите в комментариях, буду Вам признателен.

Источники:

http://pr-cy.ru/news/p/7346-rukovodstvo-po-favikonu-dlya-sayta
http://www.calltouch.ru/glossary/favikon-sayta/
http://www.novichkoff.ru/chto-takoe-favikon-i-zachem-on-nuzhen.html

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector