Favicon что это такое

Изучая материалы по маркетингу, вы наверняка не раз встречали термин фавикон. Чтобы понять, что скрывается за этим иностранным словом, необходимо ответить на 2 важнейших вопроса: favicon – что это такое и для чего он предназначен?

Что представляет собой favicon?

Фавиконом (сокращенно от FAVorites ICON – значок для избранных) называют пиктограмму сайта или страницы, которая отображается сразу в нескольких местах:

• Адресная строчка браузера перед адресом;
• Закладки рядом с URL сайта;
• Ярлык на смартфоне при вынесении ресурса на основную панель;
• Десктопная и мобильная поисковая выдача Яндекса;
• Десктопная и мобильная поисковая выдача Google. В десктопе фавиконы появились в начале 2020 года, на мобильных экранах – весной 2019 года;
• Вкладка, соответствующая окну с открытой страницей портала;
• Вкладка с избранным.

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

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

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

• Помогает пользователю лучше запомнить компанию или бренд. Favicon является обязательным элементом имиджа. Большинство пользователей быстрее запомнят картинку, чем название, а увидев ее на других площадках, тут же свяжут ее с вами;
• Отличает ресурс от других в строке выдачи Яндекс и Гугл – без иконки сниппет становится менее заметным, создается впечатление, что ему чего-то не достает;
• Повышает узнаваемость, привлекательность и кликабельность сайта – в качестве фавикона нередко используют уменьшенный или немного видоизмененный логотип. Это может быть заглавная буква вашего названия, графический элемент или любое другое изображение, соответствующее особенностям бизнеса;
• Предупреждает появление ошибки в лог-файлах – алгоритмы браузера Яндекс регулярно запрашивают файл favicon.ico. Если строка с его указанием так и не будет найдена, в логах появится ошибка 404;
• Облегчает поиск нужного портала – в истории, закладках и среди сотни открытых страниц намного удобней искать опознавательную картинку, чем надписи.

Да, фавикон никак не влияет на ранжирование и оптимизацию сайта. При этом он становится неотъемлемой частью его образа и исполняет не только эстетическую, но и практическую функцию.

Какие изображения подойдут для фавиконов?

Роль фавикона могут исполнять несколько видов картинок.

Тематические

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

Контрастные

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

Упрощенные

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

Оригинальные

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

Основные требования к фавиконам

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

• Формат – ICO, JPEG, GIF, SVG, PNG. Первый вариант считается самым известным, но довольно устаревшим. Сейчас большинство браузеров (кроме Internet Explorer 10 и более ранних версий) распознают пиктограммы и с другими разрешениями, но наибольшую поддержку получил PNG. Основная причина такой популярности – он всегда правильно отображается с компьютера и телефона и сохраняет неизменно высокое качество;
• Размещение – корневой каталог;
• Размеры – иконка для сайта 16 х 16, 32 Х 32, 60 Х 60 или 120 Х 120 пикселей.

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

Как создать favicon?

Решив создать фавикон самостоятельно, воспользуйтесь одним из этих способов:

Способ 1. Плагин для Photoshop – благодаря ему редактор изображений может работать с форматом ico.

Способ 2. Специальные программы – «заточены» именно под эти задачи. Если вы хотите попробовать нарисовать иконку для сайта самостоятельно, переходите в следующие редакторы:

• favicon.cc – сервис с простым интерфейсом, позволяет создать простое изображение, во многом похож на работу с Paint. Здесь также есть кисть для исправления и широкая цветовая палитра. Сам рисунок выполняется закрашиванием пиксельных квадратов. Готовую пиктограмму можно скачать на ПК и сохранить в нужной папке. Промежуточный результат высвечивается в процессе творчества в нижней части экрана. Кроме этого в каталоге ресурса есть много готовых предложений;
• favicon.ru – если вы не до конца понимаете, как сделать из картинки фавикон, то заходите сюда. Здесь можно создавать пиктограммы из любых изображений. Просто загрузите его с компьютера или телефона, обработайте системой, преобразуйте в файл favicon.ico, скачайте и сохраните. Также сайт предлагает платные дизайнерские услуги;
• audit4web и iconj – крупные базы с готовыми решениями;
• pr-cy.ru – на этом сервисе есть специальный раздел, предназначенный для обработки картинок, а также придания им нужной формы и пропорций.

Способ 3. Генератор фавикон онлайн – самый легкий способ, с которым справится даже неопытный веб-дизайнер. Для создания пиктограммы достаточно загрузить в генератор донорское изображение и кадрировать его до квадрата. Так иконка будет правильно отображаться со всех гаджетов. Все остальное сделает эта программа. При этом у вас будет выбор из нескольких вариантов (включая ретину).

Как поместить иконку на сайте?

В подавляющем большинстве случаев пиктограмма картинки ставится на сайт посредством встроенных функций или плагинов, используемых в CMS. Есть и ручной вариант, согласно которому иконка переносится в корневую папку ресурса. Для этого в код между тегами на главной необходимо вставить: < link rel="icon" href="http://путь до фавиконки" type=" image/формат картинки" >. В некоторых ситуациях для того, чтобы иконка на гаджетах показывалась правильно, приходится указывать еще один код: rel=»apple-touch-icon»

Яндекс и фавиконы – особенности работы

В поисковике Яндекса есть отдельный бот, который периодически проверяет сайты на наличие фавиконов и обновляет полученную информацию. При этом новая иконка появляется не сразу – сначала она проходит индексацию, которая длится 2-3 недели после того, как ссылки на изображения в размещенном коде будут найдены поисковыми роботами. Затем они скачивают пиктограмму в особую лабораторию, еще раз все проверяют и добавляют в общую базу. Подобная процедура занимает от 10 дней до 2 недель.

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

Чтобы понять, показывает ли Яндекс favicon, найдите свой портал в списке выдачи и проверьте наличие картинки слева от него. Как вариант впишите в адресную строку такую конструкцию: http://favicon.yandex.net/favicon/www.site.ru (вместо www.site.ru укажите домен вашего ресурса). Если все сделано правильно, фавикон покажется на темном фоне. Это значит, что Яндекс его видит. В противном случае проверьте, нет ли каких-то ошибок. Возможно, ваша картинка превышает стандартные размеры, имеет другой формат, является размытой и неуникальной.

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