Иконка сайта
Для чего нужна иконка сайта?
Иконка вашей страницы отображается на вкладке браузера как показано на сриншете
А ещё, favicon отображается в некоторых поисковых системах, например Yandex
Как добавить иконку для страницы?
Для начала нам нужен сам файл иконки, как правило, это небольшое изображение с названием favicon.ico стандартный размер которого 16×16px, этот размер подходит для большинства устройств. Обычно этот файл располагается в той же папке где и файл index.html, т.е. в корневой директории сайта.
Рекомендации Google
Однако компания Google даёт следующие рекомендации по размеру и правилам размещения иконки:
-
Каждому сайту в Google Поиске может соответствовать только один значок сайта,
при этом сайт определяется именем хоста. Например, сайты
https://www.example.com/иhttps://code.example.com/принадлежат к разным хостам, поэтому их значки будут различаться. Аhttps://www.example.com/sub-siteбудет показываться с тем же значком, что иhttps://www.example.com/, потому что является всего лишь подкаталогом второго сайта.
Поддерживается:https://example.com(это главная страница уровня домена).
Поддерживается:https://news.example.com(это главная страница уровня субдомена).
Не поддерживается:https://example.com/news(это главная страница уровня подкаталога).
- Чтобы пользователи легко нашли ваш сайт в результатах поиска, убедитесь, что ваш значок визуально представляет ваш бренд.
- Значок сайта должен быть квадратным с размерами, кратными 48 пикселям, например 48 x 48, 96 x 96, 144 x 144 и т. д. Изображения в формате SVG не имеют конкретного размера. Поддерживаются значки всех допустимых форматов.
- В результатах поиска не будут показываться неприемлемые значки, в том числе порнографического характера или имеющие отношение к пропаганде насилия (например, свастика). Значок, в котором мы обнаружим подобный контент, будет заменен на вариант по умолчанию.
Где взять икноку для сайта?
Вы можете использовать любое понравившееся вам изображение в качестве фавиконки, и преобразовать его в favicon.ico, с помощью графических редакторов или используя ондайн сервисы, например convertio.co
Вы также можете создать свой собственный значок с помощью графических редакторов или используя ондайн сервисы, например favicon.cc .
Размещение на странице
Элемент с иконкой размещается внутри тега <head>
Сохраните файл с вашим кодом и перезагрузите его в браузере. На вкладке браузера слева от заголовка страницы отобразится иконка.
Напомню, что файл favicon.ico в данном примере расположен в той же папке где и файл с вашим HTML кодом.