HTML Favicon / Фавикон
Фавикон — это небольшое изображение, отображаемое рядом с заголовком страницы на вкладке браузера.
Как добавить фавиконку в HTML
Вы можете использовать любое изображение, которое вам нравится, в качестве своей фавиконки. Вы также можете создать свой собственный фавикон на таких сайтах, как https://favicon.cc.
Совет: Фавикон — это небольшое изображение, поэтому оно должно быть простым и контрастным.
Изображение фавиконки отображается влево от заголовка страницы на вкладке браузера, например:
Чтобы добавить фавиконку на свой веб-сайт, либо сохраните изображение значка в корневом каталоге вашего веб-сервера, либо создайте папку в корневом каталоге с именем 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 |
|---|---|---|---|---|---|
| Edge | Да | Да | Да | Да | Да |
| Chrome | Да | Да | Да | Да | Да |
| Firefox | Да | Да | Да | Да | Да |
| Opera | Да | Да | Да | Да | Да |
| Safari | Да | Да | Да | Да | Да |
Резюме
- Используйте HTML элемент
<link>, чтобы вставить фавиконку - Пример:
<link rel="icon" type="image/x-icon" href="../images/favicon.ico">
HTML Тег ссылки
| Тег | Описание |
|---|---|
| <link> | Определяет связь между документом и внешним ресурсом |
Полный список всех доступных HTML тегов смотрите в HTML Справочнике тегов на нашем сайте W3Schools на русском.
