Как добавить Фавикон в HTML, Favicon html код иконки
Меню
Справочник

Фавикон 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 и перезагрузите его в браузере. На вкладке вашего браузера слева от заголовка страницы должно отображаться изображение вашего фавикона.


Поддержка формата файла Favicon

В таблице ниже показана поддержка формата файла для изображения фавикон:

Браузер ICO, PNG, GIF, JPEG, SVG
Firefox Поддерживает
Crome Поддерживает
Safari Поддерживает
Edge Поддерживает
Yandex Browser Поддерживает
Opera Поддерживает

Краткое содержание:

  • Используйте элемент HTML <link> для вставки фавикон.

HTML - тег ссылки

Справочник по тегам содержит дополнительную информацию об этих тегах и их атрибутах.

Тег Описание
<link> Определяет связь между документом и внешним ресурсом

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.


☛ Заголовок HTML страниц

Элемент изображения HTML ☚

Поделиться ссылкой