Favicon сайта
Фавикон (Favicon) — это иконка, которая отображается рядом с названием страницы во вкладке браузера. Также данный значок отображается в сниппете сайта на странице результатов поиска в некоторых поисковых системах, например Яндекс и mail.ru.
Фавикон повышает узнаваемость сайта во вкладке браузера, повышает кликабельность в результатах выдачи Яндекса, также он может способствовать уровню запоминаемости ресурса.
Как установить фавикон
Для установки favicon нужно иметь подходящее изображение. Оно должно быть размером 16×16 пикселей и иметь формат .ico. Фавикон можно создать самостоятельно или выбрать из существующих на специальных сайтах.
Данную иконку необходимо загрузить на сервер, где находится ваш сайт. После чего указать на нее ссылку между тегами .
Для добавления favicon необходимо разместить следующий html код:
В атрибуте href указывается адрес соответствующего файла.
После выполнения данных действий, если все сделано правильно, фавикон должен появиться во вкладке браузера на вашем сайте.
На странице результатов поиска иконка должна появиться в течение двух недель, с того момента как поисковый робот загрузил иконку.
Как добавить иконку сайта в адресную строку браузера?
При загрузке сайта, в адресной строке браузера можно иногда увидеть небольшую картинку, которая связана с тематикой сайта. Тот же рисунок отображается рядом со ссылкой при добавлении ее в закладки браузера.
Отображение иконки в строке браузера
Чтобы установить подобную «фичу», необходимо нарисовать изображение размером 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico .
Adobe Photoshop не понимает формат ICO и не сохраняет в нем рисунки, так что для этой цели требуется дополнительный плагин.
Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats. По умолчанию программа Photoshop CS под Windows устанавливается в папке c:\Program Files\Adobe\Photoshop CS. Тогда полный путь для файла плагина будет c:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats.
Размещение плагина для сохранения файлов в формате ICO
После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».
Тип файла для сохранения иконки
Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем favicon.ico в корне сайта. Браузер автоматически ищет этот файл и добавляет его в адресную строку, а также закладки.
Файл не обязательно должен располагаться в корне сайта, но тогда следует указать браузеру, где он находится. Это делается через тег , как показано ниже.
Атрибут href задает расположение и имя файла.
Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png , в зависимости от типа изображения.
Как создать и установить favicon на сайт
Favicon . ico (фавикон) – значок сайта, который отображается во вкладке браузера, закладке или рядом с названием страницы в сниппете. Для SEO фавиконка тоже имеет значение:
- Favicon влияет на CTR сниппета. Кликабельность напрямую влияет на количество посещений сайта.
- Поисковые роботы учитывают наличие иконки на сайте. Если она отсутствует, Яндекс.Вебмастер уведомит Вас об ошибке.
- Фавикон увеличивает узнаваемость бренда и повышает доверие пользователей к сайту в целом.
Содержание:
- Требования к фавиконке
- Способы создания favicon
- Установка на сайт
Требования к фавиконке
При создании иконки соблюдайте следующие рекомендации для корректного отображения на всех устройствах:
- Загружайте картинку в формате . ico — конвертировать изображение в него можно с помощью любого онлайн-сервиса.
- Значок должен быть доступен для индексирования .
- Не следует часто изменять адрес, по которому находится значок.
- По рекомендациям Яндекса размер картинки должен не превышать 120×120 пикселей — это позволит отображать логотип сайта четче и заметнее. Google же рекомендует использовать размеры, кратные 48, т.е. 48х48 , 96х96 и т.д.
- Не используйте дискриминационные или непристойные изображения . Значки, в которых изображён подобный контент, заменяются на вариант по умолчанию.
Способы создания favicon
Favicon сайта SEOCheckList.pro
Создать иконку для сайта можно следующими способами:
- Онлайн-генератор фавиконок. Достаточно просто загрузить изображение и система сгенерирует готовую иконку . Самые популярные сервисы:
favicon.by — позволяет сгенерировать иконку из изображения или импортировать с другого сайта.
bestwebservice.ru — генератор с возможностью выбора размера иконки (16х16, 24×24, 32×32 и т.д.).
favicon-generator.org — создаёт индвидуальные иконки для каждого устройства (Android, Microsoft, IOS).
- Нарисовать самому. Через Photoshop или другой графический редактор Вы можете сделать иконку самостоятельно — в виде буквы или вырезать её из логотипа. Главное, соблюдайте необходимые требования.
- Скачать готовый вариант. В интернете существует большое количество сайтов с базами иконок, где Вы сможете подобрать необходимую и скачать совершенно бесплатно.
Установка на сайт
Для установки фавиконки на сайт необходимо выполнить следующие действия:
1. Загрузите готовую иконку в корневую папку сайта «public_html» на хостинге или через FTP-клиент:
2. Добавьте следующие строчки в тег каждой страницы сайта:
Внимание! Фавикон добавится не сразу . Необходимо время, чтобы поисковые роботы Яндекс и Google проиндексировали иконку .
Спасибо, что дочитали до конца. Переходите к следующей инструкции.
Как сменить иконку сайта (favicon.ico)
Иконка сайта должна быть в формате .ico, и файл должен иметь название favicon.ico. Для размещения сайта вы можете использовать бесплатный хостинг для сайтов HTML. Бесплатный тестовый режим предоставляется на 14 дней.
Если сайт был создан в Конструкторе Рег.ру, добавьте фавикон по инструкции.
Загрузите файл иконки в каталог вашего сайта: В какой каталог нужно загружать файлы моего сайта.
Дополнительно (не обязательно, но рекомендовано) добавьте следующие строки в каждую страницу вашего сайта внутрь секции: