Средств для наделения собственного интернет-портала уникальностью среди большого количества иных web-страниц в выдаче поисковика достаточно мало. Одним из подобных средств считается favicon. Фавикон — это пиктограмма страницы, отображаемая браузером во вкладке около названия, в качестве изображения около закладки. Есть браузеры, которые показывают его в строке ввода адреса.
Что такое фавикон?
Favicon – это небольшой значок, сопровождающий веб-ресурс в Сети. Он показывается на вкладках, в поисковой выдаче, повышает узнаваемость портала. Зачастую фавикон целиком либо частично повторяет логотип фирмы с адаптацией к небольшому размеру – иконка должна быть читаемой.
Зачем нужен фавикон?
Фавиконка может казаться не значимым компонентом веб-ресурса. Однако в действительности она выполняет такие функции:
— улучшение вида портала в выдаче поисковиков;
— повышение узнаваемости веб-ресурса и организации;
— помощь людям в ориентировании по закладкам, вкладкам.
Помогает в навигации
Пользователю легче отыскать требуемый сайт в разделе избранного по иконке, чем прочитывать название/описание.
Вызывает доверие
Многие популярные сайты запомнились людям именно благодаря фавиконам. Вероятна ситуация, что человек нажмет по ссылке, которая занимает невысокую позицию, если заметит знакомый ярлык. Favicon обычно пересекается с логотипом бренда, а значит, при взгляде на него запоминается и организация, которая стоит за сайтом.
Увеличивает кликабельность
Отсутствие фавиконки снижает визуальную заметность сниппета, что отрицательно отражается на числе кликов. Для выделения сайта можно применять различные визуальные приемы. Так, можно сделать ярлыки в форме стрелки, которая привлекает внимание к заголовку.
Технические требования к изображению
В прошлом фавиконки имели ICO-формат. Современные программы для посещения сайтов совместимы со следующими форматами:
— SVG (рекомендованный вариант);
— ICO;
— GIF;
— JPEG;
— BMP;
— PNG.
Рекомендуемый размер Favicon в различных поисковиках отличается. Так, фавикон для Yandex должен иметь параметры 120х120, 32х32, 16х16 px. Для «Гугл» у фавикона размер должен быть кратен 48.
Создание favicon
Создать фавиконку возможно в любом редакторе графике, где вам нравится работать. Можно использовать даже «Пэйнт». Главное – соблюдение требуемых параметров, конвертирование картинки в один из подходящих форматов.
Визуальная составляющая
Разбираясь, что такое Favicon для сайта и создавая подобную пиктограмму, нужно принимать во внимание такие параметры:
Величина. Для определенных интерфейсов и небольших дисплеев она может быть равна 16х16 px.
Читаемость. Ярлык должен быть заметен в различных окружениях: на вкладках, в журнале браузера, в поисковой выдаче.
Стиль сайта. Пиктограмма должна соответствовать общему стилю интернет-ресурса.
Требования «Яндекс» к фавиконке
Yandex рекомендует следующие форматы Favicon:
— SVG;
— ICO;
— GIF;
— JPEG;
— BMP;
— PNG.
Поисковик использует любую из доступных фавиконок, подходящих под требования Yandex. Если веб-ресурс не работает, поисковик применяет случайный фавикон хостинга со страницы-заглушки.
Требования Google к фавиконке
«Гугл» рекомендует делать ярлыки следующих форматов:
— SVG;
— GIF;
— ICO;
— PNG;
— JPEG.
Пиктограмма должна соответствовать остальной графике веб-портала. Не рекомендуется частая замена адреса, по которому хранится фавикон сайта. Кроме того, он должен иметь приемлемый, пристойный вид. В противном случае «Гугл» поменяет его на стандартный ярлык.
Сервисы для создания фавиконки без программиста
Фавиконка – это элемент, который вполне можно создать без знания программирования. Достаточно понимать, каким из интернет-сервисов воспользоваться для создания пиктограммы. Онлайн-сервисы служат для генерации набора необходимых фавиконов и кода, посредством которого их можно вставить на страницу.
Realfavicongenerator
Для использования данного сервиса потребуется исходное изображение с одинаковыми длиной и шириной. Лучший вариант – 260х260 px. Есть возможность самостоятельной настройки иконки: изменение фона, отступов, гаммы цветов. Результат работы сервиса – это набор файлов для загрузки и код для интеграции на веб-страницу.
Favic-o-matic
Для того чтобы использовать сервис, вам потребуется загрузить квадратную исходную картинку с параметрами 310х310 px. Возможности настройки не предусмотрено. После того как изображение будет обработано, начнет скачиваться готовый набор. Также будет выполнена генерация кода для вставки.
Favicon.ico & App Icon Generator
Точные параметры исходной картинки не регламентируются, однако, если загрузить не квадратное изображение, будет показано предупреждение. Возможности настройки не предусмотрено.
Faviconit
Для использования сервиса необходим исходный файл размером хотя бы 310х310 px, вес которого не превышает 5 мегабайт. После того как сервис обработает изображение, вы получите набор пиктограмм. Также в пакет файлов входит текстовый файл с кодом для интеграции на веб-страницу.
Как добавить фавикон на сайт
Изучая, Favicon ICO что это, нужно разобраться в порядке добавления пиктограммы на интернет-страницу. Метод добавления иконки на сайт зависим от того, где создан веб-ресурс. Так, для CMS существуют расширения, существенно облегчающие задачу. Простейший вариант – добавление ярлыка через код.
Загружаем иконки на сайт
Сначала вам нужно дать значку сайта название «favicon». После этого выполните загрузку файла с ярлыком в корневую папку веб-портала.
Редактируем код
В рассматриваемом далее примере «example.com» – это сайт-образец. Данный адрес необходимо заменить на тот, который соответствует вашему интернет-порталу. Прежде всего, необходимо дополнить код основной страницы веб-ресурса адресом фавиконки. Он должен размещаться в элементе <head>:
<head>
<link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="https://example.com/favicon.ico" type="image/x-icon">
</head>
В атрибуте rel значение icon считывается большей частью программ для посещения сайтов. Значение shortcut icon предназначено непосредственно для Internet Explorer. В атрибуте type необходимо прописывать значение image, соответствующее формату. При этом в случае с форматом ICO значение должно быть x-icon либо vnd.microsoft.icon. Для формата SVG значение должно быть svg+xml.
Разбираясь, favicon для сайта что это, нужно помнить – если страница должна работать по разным доменным именам, необходимо прописывать в коде не весь путь, а лишь его часть, к примеру, /favicon.ico. Если доменное имя основано на кириллице, то в атрибуте href требуется применять Punycode.
В WordPress предусмотрено большее количество способов добавления ярлыка на веб-страницу. Можете воспользоваться расширением либо встроенными настройками CMS. Так, для добавления пиктограммы можно воспользоваться расширением RealFaviconGenerator. Алгоритм действий следующий:
— Авторизуйтесь в аккаунте администратора CMS.
— Зайдите в раздел плагинов, кликните по кнопке добавления нового расширения.
— Отыщите в поиске указанное выше расширение. Инсталлируйте его и выполните активацию.
— Зайдите в раздел внешнего вида, выберите фавиконку.
— Выполните загрузку пиктограммы. Кликните по клавише генерации фавикона. Вы будете переадресованы на страницу плагина.
— Кликните по клавише создания собственных ярлыков и кодов.
— Расширение перенаправит вас назад на вашу страницу. Вам придет оповещение о настройке фавиконки.
Также можно выполнить добавление фавикона посредством стандартных настроек «ВордПресс»:
— В аккаунте администратора CMS зайдите в раздел внешнего вида, кликните по кнопке настройки.
— Зайдите в общие настройки, в раздел свойств веб-страницы.
— В подразделе иконки сайта кликните по клавише выбора пиктограммы.
— Выполните загрузку иконки.
— Для сохранения изменений щелкните по клавише публикации.
Фавикон: что следует запомнить
Изучая, что такое Favicon, необходимо ознакомиться с частыми ошибками, при допущении которых ярлык не будет показываться. К распространенным ошибкам причисляются следующие:
— Кеширование сайтов браузерной программой. Чтобы устранить проблему, почистите браузерный кеш, выполните обновление сайта. Нажатие на кнопки Ctrl и F5 позволяет очистить кеш без ухода с сайта.
— Неправильные формат или величина ярлыка. Выполните проверку совместимости формата, наличия всех требуемых атрибутов в коде иконки.
— Ошибка в коде. Удостоверьтесь, что код ярлыка располагается в подразделе <head>.
— Прошло недостаточно времени. Иконка может индексироваться поисковыми системами от 14 до 60 дней.
— Ярлык запрещено индексировать из-за ограничений в файле robots.txt. Дайте разрешение на индексирование. Для этого в указанном файле нужно поменять Disallow на Allow.
— Неуместная картинка. Удостоверьтесь, что картинка не включает в себя компонентов, которые схожи с запрещенными изображениями. Это могут быть оскорбления, эротический контент.
— Иконка имеет плохое качество или является не уникальной. В некоторых случаях поисковые системы игнорируют ярлыки с невысоким разрешением или копированные с иных сайтов.
— Фильтры поисковиков на веб-странице. О наличии фильтров косвенно свидетельствуют следующие признаки: посещаемость снизилась без явных причин, из поисковой выдачи выпадает большое количество страниц, есть уведомления о проблемах в сервисах «Гугл Серч Консол», Yandex.Webmaster.
Если обнаружить корень проблем не получается, проверьте фавиконку на отображение и соответствие требованиям в специальных веб-сервисах. Так, «Фавикон Чекер» отобразит, как показывается ярлык в разных браузерных программах, уведомит о проблемах.
Разбираясь, что такое Favicon ICO, необходимо учесть возможность добавления ярлыков специально для мобильных гаджетов. Так, в случае с Android применяют PNG-формат с параметрами 180х180 px, при этом картинка может быть прозрачной. Добавить фавиконку и прописать каталог ее размещения возможно посредством спецификации «Веб Эпп Манифест». В ней описывается простой JSON-файл, где вебмастеры прописывают ярлыки, их параметры и форматы для веб-страницы/программы. Манифест прописывают посредством <link rel="manifest" href="/manifest.json">. Код может быть следующим:
{
"name": "%title%",
"icons": [
{
"src": "\/android-chrome-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/android-chrome-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-chrome-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-chrome-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
]
}
Для устройств на базе IOS можно применять PNG-формат с параметрами 57х57 либо 180х180 пикселей. В документации «Сафари» подобные ярлыки называются «Веб Клипс». Они не должны быть прозрачными – это важно, если вы разбираетесь, что такое фавикон для сайта. Пример кода: <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">.
Фавикон — это обязательный элемент любого современного сайта. Он обеспечивает повышение кликабельности, делает ваш бренд более узнаваемым, упрощает для пользователя навигацию. Для создания фавикона лучше привлечь специалиста или пройти самостоятельно курсы графического дизайна https://voronezh.videoforme.ru/designschool/graphic_design в любом подходящем для вас учебном центре. Правильно используя подобные ярлыки и позволяя им отображаться на странице, вы сделаете свой веб-сайт популярным. Для добавления иконки не нужно даже ничего устанавливать – можно использовать проверенные онлайн-сервисы. Главное – помнить о требованиях, которые выдвигают поисковые системы к фавиконкам, и соблюдать их, правильно выбирая размер и формат пиктограмм.
Понравился материал? Пожертвуйте любую сумму!
А также подпишитесь на нас в VK, Яндекс.Дзен и Telegram. Это поможет нам стать ещё лучше!
