Favicon – что это такое, знает далеко не каждый владелец сайта. А ведь эта иконка играет важную роль в узнавании бренда и повышении кликабельности ссылок на ресурс в поисковой выдаче. Зачем вам нужен фавикон, как его создать и самостоятельно загрузить на сайт – читайте в этой статье.
Фавикон: что это такое и где его можно найти
С английского упомянутый термин переводится как “значок для избранного”. Фавиконы, или, как их еще называют, “фавиконки”, мы видим постоянно при интернет-серфинге. Просто не все знают, что именно эта иконка так называется.
Увидеть favicon можно:
- когда просматриваете свою панель закладок или историю просмотров в браузере;
- когда листаете поисковую выдачу (иконка отображается и для сайтов, купивших контекстную рекламу по конкретному запросу, и для ресурсов из органической выдачи).
Зачем создавать favicon
Нарисовать значок для сайта стоит по следующим причинам:
- результаты с сайта в поисковой выдаче становятся узнаваемыми для пользователей, что автоматически повышает кликабельность ссылок;
- сайт, добавленный в закладки, не затеряется в панели браузера, так как пользователь сразу понимает, на какой именно ресурс он попадет;
- иконка корпоративного сайта, совпадающая с логотипом компании или частично его дублирующая, улучшает навигацию (при открытии в браузере множества вкладок вы не будете видеть названия страниц, поэтому найти нужную вкладку можно будет только по значку).
Что следует учесть при создании фавикона
При разработке иконки для сайта обязательно учтите следующие моменты:
- Сайты, сверстанные в конструкторе без добавления собственного фавикона, получат в наследство значок используемого сервиса. Конечно же, это вводит в заблуждение пользователей, что отражается на проценте отказов и, как следствие, косвенно влияет на ранжирование. Поэтому разрабатывайте свой фавикон, даже если хотите сделать сайт по-быстрому.
- Изображение на иконке должно четко ассоциироваться с брендом, которому принадлежит сайт. Это может быть логотип компании, первая буква названия ресурса или индивидуально разработанный тематический значок. Помните о том, что за некоторыми символами уже закрепились устойчивые ассоциации. Речь о таких элементах, как красный крест, календарный лист, часы, телефонная трубка и т. п. В принципе, их можно использовать для значка сайта, но вероятность повторов в нише достаточно велика. Так что лучше отдать предпочтение уникальной картинке без сложного дизайна и отвлекающих элементов.
- Пиктограмма картинки должна иметь стандартные размеры и быть квадратной формы – это гарантирует правильное отображение в панели браузера.
- На индексацию загруженного в админке фавикона уходит от нескольких дней до 2-3 недель. Поэтому, если значок не отображается в поисковой выдаче сразу после загрузки, просто подождите.
Как сделать фавикон самостоятельно
Пиктограмму следует нарисовать в формате ICO, JPEG, GIF или PNG. Однако разработчики предпочитают значки в PNG-формате, так как его правильно отображают все браузеры и любые платформы.
Допустимые размеры фавикона для сайта: 16×16, 32×32, 60×60 и т. д. Иконка для сайта 16×16 пикселей считается классическим вариантом. Хотя в последнее время Google рекомендует загружать картинки не только стандартных размеров, но и покрупнее для лучшей визуализации и четкого отображения всех элементов.
Есть несколько способов быстро сделать фавикон без привлечения дизайнера:
- Сделайте фавиконку в графическом редакторе. Для этого добавьте в Photoshop специальный плагин для работы с ICO-форматом.
- Используйте специальные сервисы, чтобы создать фавикон онлайн. Нарисовать иконку можно на favicon.cc или favicon.by, а преобразовать изображение – с помощью Favicon Generator, генератора от PR-CY или Inettools.net. В каждом из них есть пошаговая инструкция, как сделать из картинки иконку. Когда значок будет готов, скачайте его и загрузите на сайт.
Как легко разместить фавикон
На сайтах с CMS фавикон устанавливается при помощи плагина, встроенной опции платформы или загрузки в корневую директорию файла favicon.ico. На сайтах без CMS favicon надо загрузить прямо в корневой каталог. Для этого:
- откройте html-код шаблона сайта (но прежде создайте резервную копию);
- внутри тега <head> внесите такой код: <link rel="icon" href="http://путь до фавикона" type="image/формат картинки">.
Важно!
На разных устройствах, фавиконки отображаются по-своему, поэтому сразу укажите их корректно:
- Для десктопного просмотра сайта: <link rel="icon" type="image/ico" href="favicon.ico"> (для картинки в ICO) или <link rel="icon" type="image/png" href="favicon.png"> (для картинки в PNG).
- Для просмотра сайта на смартфонах и планшетах с Android: <link rel="shortcut icon" href="favicon.png">.
- Для просмотра сайта на смартфонах и планшетах с IOS: <link rel="apple-touch-icon" href="apple-touch-favicon.png">.
Как узнать, сохранился ли добавленный значок
Сделать это легко. Введите в поисковую строку браузера название своей компании и посмотрите, отображается ли установленная иконка. А вот индексацию фавикона проверяйте по таким ссылкам:
- в Google – https://www.google.com/s2/favicons?domain=адрес сайта;
- в “Яндексе” – https://favicon.yandex.net/favicon/адрес сайта.
Дополнительно отследить видимость своего значка можно в специальных сервисах, таких как Favicon checker.
Как поступить, если favicon не виден в браузерах
Не нашли загруженную фавиконку? Возможно, вы допустили ошибку при ее генерации или добавлении на сайт. Чтобы найти проблему, проделайте следующее:
- Удостоверьтесь, что значок загружен в PNG, JPEG, GIF или ICO.
- Убедитесь, что код иконки прописан в html-коде для всех страниц сайта, в нем нет ошибок, указан правильный путь к выбранной картинке.
- Посмотрите, доступен ли файл с фавиконкой для индексации, не закрыт ли он тегом noindex.
- Проверьте ответ сервера при введении ссылки на значок (корректный ответ – HTTP 200).
Если со временем вы надумаете поменять favicon, просто загрузите новый значок туда, где прописан предыдущий, и почистите кеш сайта, чтобы увидеть обновление. Однако поисковикам все равно понадобится время на индексацию новой иконки, значит, и в браузере она отобразится не сразу.