Главная » Руководство по HTML – HTML5 введение » Фавикон HTML (Favicon)

Фавикон HTML (Favicon)

Favicon — это небольшое изображение, отображаемое рядом с заголовком страницы во вкладке браузера.

Как добавить фавикон (Favicon) в HTML

Вы можете использовать любое понравившееся вам изображение в качестве фавиконки. Вы также можете создать свой собственный значок на таких сайтах, как https://www.favicon.cc.

✪ Рекомендация: фавикон — это небольшое изображение, поэтому оно должно быть простым и контрастным.

Изображение фавиконки отображается слева от заголовка страницы на вкладке браузера, например:

Пример favicon

Чтобы добавить значок на свой веб-сайт, сохраните изображение в корневом каталоге вашего веб-сервера, или создайте папку в корневом каталоге, например, с именем images и сохраните изображение значка в этой папке. Распространенное название изображения фавикона — "favicon.ico".

Затем добавьте элемент <link> в файл index.html после элемента <title>:

<!DOCTYPE html>
<html>
<head>
  <title>Название страницы</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>

<h1>Это заголовок</h1>
<p>Это параграф.</p>

</body>
</html>

Теперь сохраните файл index.html и перезагрузите его в браузере. На вкладке вашего браузера слева от заголовка страницы должно отображаться изображение вашего фавикона.