Favicon HTML
Favicon — это маленькое изображение, показываемое рядом с заголовком страницы во вкладке браузера.
Как добавить favicon в HTML
В качестве favicon можно использовать любое изображение или создать своё на сайте вроде favicon.cc. Оно отображается слева от заголовка страницы во вкладке браузера.
Совет: Favicon маленький, поэтому это должно быть простое изображение с высокой контрастностью.
Сохраните файл favicon (обычное имя — favicon.ico) в корневом каталоге вашего веб-сервера или в папке images там же. Затем добавьте элемент <link> в файл index.html, после <title>. Сохраните и перезагрузите страницу, и вкладка браузера покажет ваш favicon.
Ссылка на favicon
Полная страница, ссылающаяся на favicon в head.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Поддержка форматов файлов favicon
Все основные браузеры (Edge, Chrome, Firefox, Opera и Safari) поддерживают favicon в форматах ICO, PNG, GIF, JPEG и SVG.
Итоги главы
Подведём итог: используйте элемент HTML <link>, чтобы добавить favicon.
Тег HTML Link
Здесь используется тег <link>, определяющий связь между документом и внешним ресурсом.