Практически все владельцы бизнеса ставят перед собой цель — вывести свой ресурс в топ поисковой выдачи Google или Яндекса. Однако без качественной проработки сниппета вам вряд ли удастся прийти к желаемому результату по трафику, так как неприметная и неоптимизированная карточка, мелькающая в выдаче, только снизит CTR и не даст вам успешно продвигаться. Для улучшения кликабельности существует favicon, который помогает сайту выглядеть заметнее и узнаваемее в поиске, поэтому в этой статье мы поговорим именно о favicon, разберем, что это такое и какие размеры и форматы иконок лучше использовать.
Определение термина
Это миниатюрное изображение, которое отображается рядом с заголовком страницы в адресной строке браузера, на вкладках, в закладках, истории посещений и в поисковой выдаче Яндекса, а в Google — в ряде поверхностей и сценариев отображения. Кроме этого, такой значок присутствует в закладках, истории посещений и других разделах, где требуется визуальное обозначение площадки.
Если говорить проще, favicon — это маленькая иконка сайта, по которой пользователь быстрее узнает ваш ресурс среди вкладок, закладок и поисковых результатов.
Зачем нужен
- Повышает узнаваемость бренда. Человек лучше запомнит ваш портал, если вы разместите логотип компании. Так как юзер его сначала увидит в выдаче, затем на экране своего ПК, и, если информация будет для него полезной, он добавит страницу к себе в избранное, где также будет замечать рисунок и идентифицировать его с вами.
- Создание привлекательного внешнего вида с помощью фавикона. Такая маленькая деталь демонстрирует внимание к мелочам, делая ресурс удобным.
- Улучшение навигации. Это особенно полезно, когда открыто много вкладок — пользователь легко найдёт необходимую страницу, ориентируясь по визуалу, не переходя на каждую по очереди.
- Выведение ярлыка на главный экран мобильного устройства. Он также может быть использован для быстрого доступа на смартфонах.
Дополнительно фавикон полезен тем, что повышает визуальную заметность сайта в окружении конкурентов. Даже если он сам по себе не влияет на ранжирование как отдельный фактор, он может косвенно влиять на кликабельность сниппета и удобство взаимодействия с сайтом.
Требования к favicon от поисковых систем
Оба поисковика поддерживают данный функционал и автоматически его индексируют. Обычно процесс занимает несколько дней, но иногда растягивается на недели.
Для популярных и часто посещаемых площадок изображения обрабатываются быстрее, а также оперативно обновляются при изменении.
Параметры для Google
Некоторые сайты постепенно отказываются от традиционных графических файлов размером 16×16, так как их отображение бывает некорректным. Однако Гугл не имеет против них ничего, учитывайте этот факт.
- иметь квадратное соотношение сторон 1:1;
- быть не меньше 8×8 пикселей;
- желательно иметь размер от 48×48 и больше, чтобы хорошо отображаться на разных поверхностях;
- быть доступным для обхода Googlebot;
- иметь стабильный URL, который не меняется слишком часто.
- отсутствие неприемлемого контента;
- соответствие визуальному стилю и товарному знаку;
- уникальность и отсутствие вводящего в заблуждение сходства с чужими брендами.
Процесс индексации в Гугл занимает довольно много времени, а обновление происходит с задержкой.
Требования Яндекса
Здесь предъявляется еще меньше условий. Более того, Yandex способен автоматически создать иконку для вкладки, если она отсутствует на вашем сайте. Для этого он задействует свои алгоритмы.
Однако мы не рекомендуем пользоваться данным функционалом, если у вас есть возможность разработать и оптимизировать своими силами или обратиться к дизайнерам. Такие сгенерированные символы часто не соответствуют тематике бизнеса, имеют оттенки, которые отличаются от корпоративных и не совпадают с общей стилистикой.
- размещать файл favicon в корневом каталоге сайта;
- использовать размер 120×120, 32×32 или 16×16 пикселей;
- по возможности выбирать SVG или 120×120, так как такие варианты выглядят четче и заметнее на сервисах Яндекса;
- учитывать, что анимация не поддерживается.
Как выбрать картинку
Мы уже привыкли к поиску и знаем, что favicon выводится рядом с адресом портала и заголовком страницы. Сначала такую функцию ввел Яндекс, затем она появилась и у Google в ряде сценариев отображения не только при использовании десктопов, но и мобильных устройств тоже. Часто владельцы сайтов не разрабатывают уникальный значок, а просто уменьшают логотип до нужного размера.
Однако такой подход работает тогда, когда изображение выглядит как цельный элемент. Если же на нем есть буквы или фразы, он будет некорректно показываться в выдаче и теряться на фоне конкурентов.
- Подходит тематике бизнеса. Хорошо, когда она связана с названием компании. Рекомендуем обрезать имеющуюся айдентику или взять первую букву.
- Выполнена в ярких цветах. Подбирайте контрастные оттенки, такие как красный, оранжевый, темно-синий, чтобы привлекать внимание.
- Интегрируется в хорошем разрешении. Лучше загружать векторную графику, так как она легко масштабируется.
- Имеет простое исполнение. Делайте логотип лаконичным, но в то же время следите за тем, чтобы он соответствовал фирменному стилю.
- Является уникальной и креативной. Ваша цель – выделяться на фоне других. Оригинальный и привлекательный дизайн особенно важен.
- простые геометрические формы;
- одна буква или монограмма;
- цельный знак без мелких деталей;
- контрастные, но не кислотные цвета;
- понятный силуэт, который не «распадается» при уменьшении.
Какой размер и формат должен быть у favicon
Наиболее распространенным является тип.ico 16×16 пикселей. Он корректно отображается почти во всех браузерах.
- Например, Google поддерживает квадратные изображения от 8×8 пикселей, но рекомендует использовать размер больше 48×48, чтобы иконка лучше выглядела на разных поверхностях. Для .svg нет фиксированных требований по габаритам, здесь позволено размещать любой квадратный значок.
- Многие смартфоны, такие как Apple с iOS , используют отдельные иконки для добавления сайта на главный экран, которые отличаются от классического favicon для браузера.
- Для iPhone и iPad сейчас логичнее ориентироваться не на старые минимальные размеры, а на отдельные touch icons для Apple, а для Android — на иконки из manifest.
- Для Android часто используют PNG 192×192 и 512×512, а для Apple — 180×180 как один из самых практичных универсальных размеров.
Таким образом, точного универсального размера не существует — его нужно подбирать в зависимости от поисковика или устройства.
Изначально единственным типом был .ico, который поддерживался Internet Explorer. Файл размещался в корневой папке сайта и назывался favicon.ico.
Его преимущество заключается в том, что он позволяет хранить в одном месте вариации с разными параметрами и глубиной цвета. Однако иногда веб-обозреватели неправильно определяют габариты и отображают значки меньше, чем надо.
- .png является стандартом для большинства сценариев;
- .svg особенно удобен как современный векторный вариант, а Яндекс прямо рекомендует его среди предпочтительных форматов;
- .ico по-прежнему полезен для совместимости.
| Устройства и программы | Размеры | Формат | Прозрачность фона |
| Браузеры на десктопах | 16×16, 32×32, 48×48 | PNG, ICO, SVG | Прозрачный |
| Safari / современные браузеры | 16×16, 32×32, 48×48 и SVG | PNG, SVG | Прозрачный |
| Браузеры на мобильниках | 48×48 и выше; для Android-иконок сайта — 192×192, 512×512 | PNG, SVG | Зависит от сценария |
| Windows 10, 11 | 16×16, 32×32, 48×48, 256×256 | PNG, ICO | Прозрачный |
| Apple (добавление на экран) | 180×180 | PNG | Лучше без сложной прозрачности и с учетом скругления |
| Android | 192×192, 512×512 | PNG | Допустима, но лучше проверять реальное отображение |
| Мобильные приложения / web app manifest | 192×192, 512×512 | PNG | По необходимости |
- favicon.ico для совместимости;
- favicon.svg или favicon.png для современных браузеров;
- отдельные PNG для мобильных иконок и manifest.
Как добавить favicon после создания
Давайте теперь разберем, как загрузить изображение.
Чтобы выбрать подходящий способ, необходимо проанализировать особенности вашего ресурса. Например, когда у портала есть CMS, то для внедрения эмблемы допускается использовать специальные плагины. Если у вас самописная система или вы не хотите заморачиваться с поиском различных расширений, то советуем воспользоваться универсальным методом — внести изменения в код. Такой приём подойдет для любых интернет-площадок.
Через HTML-код
После того как вы создали фавикон, для его загрузки на сайт необходимо сначала разместить его на сервере и запомнить точный путь к файлу.
После вносите следующую запись в HTML-разметку в раздел <head>:
<link rel=»icon» type=»image/png» href=»/favicon.png»>
Также часто добавляют отдельные варианты:
<link rel=»icon» href=»/favicon.ico» sizes=»any»>
<link rel=»icon» type=»image/svg+xml» href=»/favicon.svg»>
<link rel=»apple-touch-icon» href=»/apple-touch-icon.png»>
Затем обязательно сохраните работу и проверьте отображение во вкладках браузера. Если используете несколько файлов, важно, чтобы все пути были рабочими, а сами изображения отдавались с кодом ответа 200 OK.
Через WordPress
- через плагин;
- через CMS.
Начнем с первого! Отличным расширением будет RealFaviconGenerator. Чтобы его найти, необходимо перейти в раздел «Плагины» в административной панели WordPress и кликнуть на кнопку «Добавить».
Следующим шагом будет его установка и активация.
После этого вам необходимо открыть раздел «Внешний вид» → «Фавикон» и загрузить туда рисунок. Затем вы попадете на площадку. Там вам стоит нажать на кнопку «Создать», и после этого снова откроется ваш портал с уведомлением о том, что настройка прошла успешно.
Второй способ заключается в применении стандартной методики:
- Переходим в административной панели в раздел «Внешний вид» и кликаем на «Настроить».
- Открываем вкладку «Общие свойства сайта» и находим «Иконка».
- В соответствующее поле загружаем изображение и сохраняем изменения. Для большинства сайтов на WordPress встроенного способа уже достаточно, если вам не нужны сложные наборы иконок под множество платформ.
Как добавить на смартфоны
Важно разделять обычный favicon для браузеров и иконки для добавления сайта на главный экран. Это не всегда один и тот же файл.
Читайте также
SEO на Tilda: как продвигать сайты на Тильде, советы и особенности
Android
Для этой системы стандартным считается .png 192×192 пикселей, а также часто добавляют 512×512 для manifest. Параметры указываются с помощью спецификации Web App Manifest, представляющей собой файл .json, где задаются путь к иконке и другие параметры.
Apple
На iOS обычно используют .png со сторонами 180×180. Лучше учитывать, что такая иконка будет выводиться на домашнем экране, поэтому нужно избегать слишком мелких деталей и помнить про визуальное скругление углов.
Edge и IE 12
Цвет фона значка задается в коде с помощью тега meta:
Пример: <meta name=»msapplication-TileColor» content=»html-код цвета»>
Microsoft предоставляет возможность адаптации для различных интерфейсов через внешний XML-файл, в котором содержится информация о настройках веб-обозревателя. Но для большинства современных проектов этот сценарий уже не является приоритетным: обычно достаточно корректно настроить favicon, touch icon и manifest.
Для добавления эмблемы достаточно трех примеров отличающихся характеристик. Однако рекомендуется указывать отдельные объекты для разных поисковиков и устройств, чтобы обеспечить верный вывод в каждом из них.
Как проверить на ошибки
Мы уже разобрали, что такое фавиконка и как сделать favicon иконку для сайта. Теперь поговорим о его проверке.
- изображение имеет корректный тип и размещено по рабочему адресу;
- ссылка в HTML-коде не содержит ошибок;
- картинка высокого качества, является оригинальной, а не заимствованной с другого портала;
- документ доступен для индексации поисковыми роботами;
- файл favicon не закрыт от обхода и отдается с кодом ответа 200;
- URL favicon стабилен и не меняется слишком часто.
Важно помнить, что графика отображается только при правильном указании пути. Для удаления или замены достаточно внести корректировки в соответствующий файл.
Если вы уверены, что все сделано правильно, то, вероятно, поисковики еще не успели его проиндексировать. Индексация выполняется роботом, который сохраняет рисунок на своем сервере, и этот процесс занимает несколько недель.
- открыть сам файл в браузере по прямому URL;
- убедиться, что путь к нему указан в <head> без ошибок;
- посмотреть, как он отображается на вкладке, в закладках и на мобильном устройстве;
- для Яндекса — ориентироваться на рекомендации Вебмастера по favicon;
- для Google — учитывать, что обновление в поиске может происходить не сразу.
Подборка генераторов
Если не хотите рисовать favicon с нуля, можно использовать генераторы. Но лучше воспринимать их как вспомогательный инструмент, а не как замену нормальному дизайну.
Favic-o-matic — простой генератор favicon, который создает набор иконок для браузеров и мобильных устройств из одного исходного изображения.
Real Favicon Generator — более продвинутый сервис, который помогает собрать favicon и иконки под разные платформы: браузеры, Android, iOS и Windows.
Favicon Generator — базовый онлайн-инструмент для быстрого создания favicon из загруженной картинки без сложных настроек.
Заключение
В этой статье мы рассказали, что такое фавикон (так называется иконка, находящаяся на вкладке браузера), простыми словами объяснили, зачем он нужен и как его сделать через HTML-код, а также указали, в каком формате и размере в пикселях должен быть значок логотипа для сайта, чтобы он корректно отображался.
Favicon помогает сайту выглядеть заметнее и повышает узнаваемость бренда.
Он должен быть простым, четким и хорошо читаться в маленьком размере.
Важно проверить, как значок отображается в разных браузерах и на разных устройствах, и обновлять его при изменении фирменного стиля.
Практический минимум для большинства сайтов:
- сделать простой favicon в фирменном стиле;
- подготовить favicon.ico, favicon.png или favicon.svg;
- добавить иконку для Apple и при необходимости manifest для Android;
- убедиться, что файлы доступны роботам и корректно отображаются.
Итог: фавикон — маленький элемент, который делает сайт аккуратнее, заметнее и профессиональнее.
Вопросы — ответы
Она улучшает восприятие веб-ресурса, делает его более узнаваемым и облегчает навигацию между открытыми вкладками. Также придаёт ресурсу более профессиональный вид.
Её можно сделать в графическом редакторе или с помощью онлайн-сервисов. Важно, чтобы изображение было простым, чётким и хорошо выглядело даже в маленьком размере (например, 16×16 или 32×32 пикселя).
Нет, большинство браузеров не поддерживают анимацию для таких значков. Рекомендуется использовать статичное изображение.
Технически сайт будет работать и без неё, но её отсутствие ухудшает внешний вид и может снизить удобство использования.
