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