Favicon или фавикон — маленькая иконка, которую пользователи видят перед наименованием страницы во вкладке интернет-браузера. Окидывая взглядом фавиконы, пользователи быстро находят нужные им сайты среди большого количества открытых вкладок.
Если создать удачный фавикон и добавить его на коммерческий сайт, то посетители будут быстрее узнавать бренд и дольше оставаться на сайте. В статье мы расскажем главное об иконке favicon: что это, для чего применяется, как создать и добавить.
Что это такое
Полное название этой иконки по-английски выглядит как favorite icon. Это мелкая картинка, которую интернет-браузер показывает в адресной строке около названия сайта. Фавиконы можно увидеть в списке сохраненных страниц, истории и др.
Стандартный размер фавикона — 16 х 16 или 32 х 32 пикселя. Этот идентификатор может иметь формат ICO, PNG, JPG. То, что изображено на мини-иконке, обычно связано с логотипом компании. Фавиконы используются не только как идентификаторы для быстрого поиска сайта среди вкладок, но и в качестве ярлыков для быстрого перехода на сайт.
Favicon — приятная на вид картинка и в то же время важный маркетинговый инструмент. Эта маленькая деталь повышает узнаваемость бренда и формирует у интернет-пользователей хорошее впечатление о компании. По фавиконам пользователи быстро узнают нужный им сайт, когда открывают сразу много вкладок. Сайт с удачной мини-иконкой дольше удерживает внимание посетителей, ассоциируется с профессионализмом, демонстрирует заботу компании о своей визуальной составляющей.
Отрисовка и добавление фавикона — важный этап в запуске сайта.
Для чего используют favicon
Мини-иконка помогает улучшить пользовательский опыт и визуальное восприятие сайта. Она является нужным элементом по ряду причин:
- Повышение узнаваемости и скорости идентификации сайта. Пользователи смотрят на уникальный favicon в адресной строке и на вкладке интернет-браузера, быстро его запоминают. Это делает бренд более узнаваемым.
- Придание сайту профессионального вида. Когда у веб-ресурса есть красивый фавикон, он воспринимается как целостный объект. Миниатюрная, но тщательно продуманная иконка говорит о внимательном отношении компании к мелким деталям и об усилиях, прилагаемых к оптимизации сайта. Пользователи воспринимают это как часть заботы об их комфорте.
- Совершенствование навигации. У многих интернет-пользователей одновременно открыто большое количество вкладок. Они находят среди них нужный сайт именно по фавикону, если не могут прочитать название страницы целиком. Фавиконы помогают быстро переходить между вкладками и находить искомую информацию без задержек.
- Установка ярлыка на главный экран. Favicon ставят на главный экран планшетов и смартфонов, чтобы пользователь мог мгновенно попасть на сайт без введения URL вручную.
Как создать favicon
При создании мини-иконки учитывают ее дизайн, размер и формат. Рассмотрим подробно каждый аспект.
Дизайн. Фавикон может повторять логотип бренда или другой графический элемент с сайта. Главное — чтобы пользователи с первого взгляда ассоциировали этот элемент с конкретным веб-ресурсом. Картинка должна быть четкой и мгновенно распознаваемой даже при очень маленьком размере. При ее создании желательно использовать несложные формы, яркие цвета и лаконичный стиль. Сочетание таких свойств делает фавикон легко различимым.
Размеры. Как было упомянуто, favicon обычно имеет размер 16 х 16 или 32 х 32 пикселя. Конкретный размер подбирают под особенности сайта и дизайн самой иконки. Если она очень простая, то будет хорошо смотреться в размере 16 х 16 пикселей, а если более детализированная — в размере 32 х 32 пикселя. В целом Google советует подбирать размеры фавиконов, кратные 48. Такое изображение будет масштабироваться браузерами без искажений.
Формат. Favicon создают в формате ICO, PNG и JPG. Первый вариант встречается чаще, поскольку поддерживается всеми браузерами и обеспечивает высокую четкость маленькой картинки. Форматы PNG и JPG подходят для создания детализированных иконок с прозрачной подложкой. Еще один допустимый формат — SVG. Если такая картинка имеет квадратную форму, то она будет правильно масштабирована любым браузером.
В интернете можно найти десятки сервисов и программ для создания мини-иконок. Часть из них предлагают загрузить картинку онлайн и автоматически сгенерировать из нее маленькую картинку в нужном формате.
Подборка сервисов для создания favicon
Рассмотрим самые известные инструменты для создания мини-картинки фавикон. Все они подходят для начинающих, некоторые предлагают более широкий спектр функций.
- io — понятный и простой сервис для создания иконок. Пользователь подгружает файл с картинкой, задает размер и формат. Еще в Favicon.io можно создавать дополнительные иконки для размещения на главных экранах смартфонов и планшетов.
- Favicon Generator — онлайн-инструмент для быстрой генерации фавиконов. Сервис моментально перегоняет загруженную большую картинку в фавиконы интересующего размера и формата. Пользователь может настроить программу так, чтобы она сразу выдала код для вставки иконки на сайт.
- Canva — программа для создания фавиконов по шаблонам и с чистого листа. Это полноценный графический редактор, предлагающий десятки инструментов для работы с мини-изображениями.
- RealFaviconGenerator — сайт с инструментами для генерации фавиконов и других иконок, которые могут понадобиться сайту для быстрой загрузки с разных устройств. Пользователь может добавить картинку и получить комплект фавиконов для Айфона, Макбука, электроники под Андроид, компьютеров с ОС Windows.
- cc — программа для ручного создания мелких иконок. Пользователь может подгрузить или самостоятельно нарисовать картинку, скачать ее в любом из трех форматов и в подходящем размере. Также редактор предлагает редактировать уже существующие картинки.
Фавиконы для Яндекса
Картинка должна быть квадратной. Длина стороны — 16, 32 или 120 пикселей. Наиболее подходящий формат — SVG, но допустимы также JPEG и PNG. Анимация GIF-картинок не поддерживается. Если сайт недоступен, поисковой робот возьмет случайную иконку хостера со страницы-заглушки. Узнать больше о требованиях Яндекса к фавиконам можно в Яндекс.Справке.
Фавиконы для Google
Изображение должно быть квадратным. Длина стороны — любая, кратная 48. Менее предпочтительный размер фавиконки — 16 х 16 пикселей. Из форматов допустим не анимированный GIF, SVG, ICO и JPEG, PNG. При индексации робот Google уделяет внимание соответствию иконки остальной графике на сайте. Корпорация не рекомендует часто менять путь к файлу иконки. Также следует избегать прикрепления оскорбительных и непристойных изображений. Они будут автоматически заменены роботом на шаблонную иконку. Подробное описание требований Google к фавиконам можно посмотреть в документации.
Как разместить favicon на сайте
Алгоритм добавления мини-иконки на веб-ресурс прост и выглядит так:
- Нарисовать или сгенерировать фавикон. Перед загрузкой картинки необходимо привести ее к подходящему размеру и формату. В этом помогут графические редакторы и онлайн-сервисы, описанные выше.
- Загрузить фавикон на сервер. Готовая иконка должна оказаться в корневой папке сайта. Как вариант, можно поместить файл в папку с картинками и стилями. Главное — не забыть путь к фавикону, так как он понадобится на этапе вставки в HTML-код.
- Дать ссылку на изображение в HTML-коде. Для добавления иконки на сайт необходимо указать путь к файлу с картинкой. Чтобы фавикон появился в адресной строке сайта, после тега <head> необходимо добавить такой код: <link rel=»icon» type=»image/ico» href=»/путь/favicon.ico»>.
- Сохранить изменения и обновить сайт. После добавления пути к иконке в HTML-код необходимо загрузить на сервер новую версию страницы.
- Убедиться в том, что пользователи видят фавикон. Для этого нужно открыть сайт в нескольких популярных браузерах и посмотреть на картинку, которая будет стоять во вкладке рядом с названием страницы. Если там пусто, необходимо исправить путь к иконке в HTML-коде или проверить, хранится ли нужный файл на сервере.
Простой способ проверки валидности и отображаемости фавикона — добавление перед URL сайта в браузере строки http://favicon.yandex.net/favicon/ или http://www.google.com/s2/favicons?domain=. Если сайт работает на основе системы управления контентом WordPress, Drupal или Joomla, то относящийся к иконке кусок кода размещают между <head> и </head> в файле шаблона шапки сайта header.php. Если сайт был собран в Тильде или в другом конструкторе, в настройках необходимо найти категорию Favicon, подгрузить картинку в подходящем формате и размере, одобрить применение и обновить страницы.
Почему фавикон не видно?
Причины появления пустого места рядом с названием страницы вместо мини-иконки могут быть разными. Скорее всего, дело в этом:
- Нужно почистить кеш браузера. Проще всего сделать это горячими клавишами CTRL+F5 или через настройки. После очистки кеша страницу обновляют.
- Проверить формат изображения и его размер. Если картинка сохранена не в формате ICO, PNG или JPG, браузер может не увидеть ее. То же касается иконок нестандартного размера. Эти параметры легко отредактировать в бесплатных онлайн-генераторах фавиконов.
- Проверить расположение строки в HTML-коде. Картинка не будет найдена, если расположена вне блока
<head>. - Дождаться повторной индексации. Сканирование фавикона поисковыми роботами занимает 14-60 дней.
- Снять запрет на индексацию фавикона в robots.txt. Если рядом с favicon.ico стоит атрибут Disallow, его следует заменить на Allow.
- Проверить уместность изображения. Иногда поисковые роботы считают картинки похожими на неприличные знаки и атрибутику «18+». В таком случае иконку необходимо перерисовать.
- Убедиться в хорошем качестве и уникальности картинки. Поисковые боты могут игнорировать изображения, скопированные с других сайтов или имеющие слишком низкое разрешение.
Если все перечисленное не помогло вставить фавикон на сайт, его следует проверить специальным онлайн-сервисом. Например, Favicon Checker. Бесплатная программа покажет, видят ли фавикон пользователи всех популярных браузеров. Если сервис найдет проблему, то предупредит о ней.
Главное о фавиконах
Favicon — важный мини-элемент, который делает бренд узнаваемым, а сайт компании — более профессиональным.
Фавиконка должна быть лаконичной, простой и узнаваемой с первого взгляда. Сложные и визуально перегруженные иконки портят впечатление от сайта. Очень мелкий и при этом детализированный фавикон будет непонятным для пользователя.
Существуют десятки онлайн-программ для генерации и создания фавиконов с нуля. Любая из них подходит для изготовления иконки сайта.
Необходимо убедиться, что favicon нормально показывается в популярных браузерах и на разных устройствах. Он должен быть видимым и читаемым.
Фавиконы обновляют одновременно с дизайном сайта, чтобы картинки всегда оставались актуальными.
