Что такое фавикон для сайта: зачем нужен и как создать фавикон самостоятельно или с помощью генератора фавиконов

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

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

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

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

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

Так отображается фавикон в поисковой системе Google

Для чего нужен фавикон, какую функцию он выполняет

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

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

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

Сайты и фавиконы в истории браузера

Требования к фавикону

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

• Какой фавикон используют конкуренты? Иконки разных сайтов, особенно близких по тематике и сфере деятельности, не должны совпадать ни по цвету, ни по оформлению. Если повторы есть, то можно потерять клиентов, которые начнут переходить в другой интернет-магазин или блог.
• Ассоциируется ли фавикон с бизнесом? Фавикон, как логотип или фирменные цвета, должен перекликаться с философией и общей концепцией упаковки бизнеса. Взглянув на картинку, пользователи должны легко понимать, какой компании или бренду она принадлежит, а также что они получат после выполнения перехода на сайт.
• Есть ли удобочитаемость? Фавикон – маленькое изображение, которое нельзя увеличить или развернуть на весь экран. В связи с этим не стоит внедрять в дизайн длинные фразы и мелкие детали – пользователи просто не смогут их рассмотреть.
• Сможет ли фавикон использоваться на протяжении длительного времени? Пользователи привыкают к дизайну иконок, которые являются элементом брендинга, поэтому изменять оформление часто не получится (исключение – проведение редизайна сайта). Не найдя знакомую картинку в закладках или выдаче, человек просто уйдет на другой сайт. Некоторые компании иногда видоизменяют фавиконы, но основной визуальный образ и палитра остаются узнаваемыми.

Разработку фавикона можно доверить дизайнеру, альтернатива – использование платных и бесплатных онлайн-сервисов, которые автоматизируют процесс и дают подсказки по оптимизации иконок.

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

Формат

Первые фавиконы появились в браузере Internet Explorer, они имели формат .ico и требовали загрузки в корневой каталог. Формат .ico используется и сегодня, он достаточно удобный: доступно указание иконок разной битности и размера. Выделим другие форматы:

• .png, который поддерживают практически все операционные системы и платформы;
• .svg, характерный для браузера Safari (macOS и iOS);
• .jpeg и .gif, которые разрешено использовать, но могут возникнуть сложности с поддержкой разными браузерами. Например, Firefox и Opera допускают применение анимированных иконок, но не рекомендуют их: движущиеся элементы перетягивают внимание, раздражают пользователей, просматривающих сайт.

Размеры фавикона

Каждый браузер имеет ряд ограничений:

• Google Chrome. Поддерживает ICO, а также PNG, JPEG, SVG и GIF, не поддерживает – APNG и GIF-анимацию;
• Opera. Поддерживает ICO, PNG, JPEG, GIF, GIF-анимацию и APNG, не поддерживает – SVG;
• Firefox. Поддерживает ICO, GIF и PNG, JPEG, SVG и GIF-анимацию, APNG (от 3.0);
• Яндекс. Рекомендуемый формат – SVG, поддерживает ICO, GIF, JPEG, PNG, BMP, но не анимацию;
• Safari. Поддерживает ICO и SVG, а также PNG, JPEG и GIF, не поддерживает – APNG и GIF-анимацию.

Универсальный формат – ICO (предпочтителен) и PNG (поддерживает прозрачность). Можно тестировать JPG (весит меньше PNG, но прозрачности нет), а для Safari больше подходит SVG, остальные варианты стоит использовать с осторожностью ввиду возможных проблем с отображением.

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

Универсальный размер фавикона – 16х16 пикселей, иногда используются иконки 32х32 пикселя. Размер выбирается исходя из особенностей сайта и дизайна мини-изображения. Например, размер 16х16 оптимален для иконок с простым оформлением, 32х32 и больше – для фавиконов, в которых важна детализация и реализован более сложный дизайн. Помимо размера, нужно обращать внимание на прозрачность:

• прозрачный фон. Отображается в непосредственной близости к URL-адресу – это адресная строка, закладки, прочее;
• непрозрачный фон. Виден в зонах, где используются маски для фона при достижении единообразия, например, в сетчатых закладках или контекстном меню.

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

Дизайн favicon

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

• фирменная атрибутика. Можно пойти по простому пути, используя для создания фавикона логотип компании. Альтернатива – фирменные цвета, дополненные интересно обыгранными 1-2 буквами из названия сайта, бизнеса, блога – ассоциирующиеся с компанией. Например, иконка на сайте М.Видео – красный круг на прозрачном фоне, в центр которого заключена белая буква «М», у «Вайлдберриз» – оттеночный фиолетовый круг с WB;
• понятность. Фавикон – маркер, он помогает клиентам узнавать сайты, но ничего не продает. Не стоит использовать маркетинговые посылы «new», «ТОП», «sale» и подобные, если они не фигурируют в названии бренда. Рекомендуется в принципе отказаться от текста, который в маленьком квадрате выглядит неразборчиво, исключение – пара релевантных компании букв (как в примерах выше). Фотографии тоже работают плохо в маленьком разрешении, как и многоцветные иконки;
• минимализм. Четкие формы, гармоничные оттенки, простота в деталях делают фавикон более запоминающимся, выделяют его на фоне остальных.

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

Заметный фавикон в поисковой выдаче Google

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

В вопросе о том, как сделать бесплатный фавикон для сайта, на помощь придет программа Photoshop (универсальный инструмент для графического дизайна). Можно использовать как десктопную, так и онлайн-версию, для первой существуют плагин, упрощающий процесс формирования иконок в нужном формате и разрешении. Если навыков работы с «Фотошопом», а также времени на обучение нет, то проще автоматизировать процесс, используя специальные онлайн-сервисы. Они дают подсказки, предлагают базы готовых идей и способны преобразовать картинку в нужный формат.

ТОП-3 генератора favicon

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

Wizlogo

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

• бизнес-категории, например, продажи, мода, образование или спорт;
• выбранных оттенков (каждый дополнен описаниями согласно психологии цвета);
• указанного названия компании.

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

• файл 32x32 favicon (ICO);
• иконки для сайта, iOS, Windows, Android (пакетно в разных форматах и размерах).

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

Внешнее оформление генератора фавиконов

Favicon.by

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

В редакторе легко создавать простые иконки

Favicon.io

Сервис Favicon.io – англоязычный, если есть языковой барьер – достаточно использовать встроенный в браузер переводчик. Функционал сервиса доступен бесплатно, есть следующие возможности:

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

Дополнительно – инструкция для пользователей, которые хотят самостоятельно добавить фавикон на сайт + HTML-код.

Редактор для создания иконки с цветом и текстом

Как добавить фавикон на сайт: пошаговая инструкция

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

• создание фавикона. Нужно убедиться, что иконка соответствует всем требованиям, имеет правильное название (рекомендовано favicon.ico), является четкой и будет корректно отображаться;
• размещение на сервере. Рекомендуется осуществлять сохранение файла в корневой папке сайта, альтернатива – папки с изображениями/стилями. Путь к иконке следует заполнить (он указывается между тегами <head></head>), чтобы облегчить процесс работы с кодом;
• вставка кода в HTML. На финише необходимо добавить код в HTML-разметку (пример кода для вставки – на фото ниже).

Пример кода вставки фавикона

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

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

Ошибки, с которыми можно столкнуться при создании и загрузке фавикона

Существует много причин, из-за которых фавикон не отображается после загрузки. Первая – кэширование, при котором страницы или элементы сайта хранятся во временной памяти браузера (настраивается для повышения скорости загрузки при повторных посещениях). Для устранения проблемы достаточно очистить кэш (в настройках браузера или нажатием CTRL + F5), после чего страницу нужно обновить. Выделим другие проблемы:

• неправильный формат или размер иконки, нужно выполнить замену;
• ошибки, допущенные при ручном размещении кода, например, пропущен тег <head></head>;
• мало времени после загрузки, индексация иконок занимает до 2 недель, но все зависит от поисковой системы (в Яндексе процесс более долгий);
• установлен запрет на индексацию в robots.txt. Если доступна строка «Disallow: favicon.ico», то «Disallow» нужно заменить на «Allow»;
• изображение не соответствует правилам поисковиков, например, содержит запрещенные элементы 18+ и подобные;
• качество иконки низкое или же она является неуникальной, в этом случае поисковики могут ее не отображать.

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

100 - Надпись видна в том случае, если иконка сильно увеличена: не ошибка, но для пользователей неудобно

В заключение

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