HTML Иконка
Иконка - это небольшое изображение, отображаемое рядом с заголовком страницы на вкладке браузера.
Как добавить иконку в HTML
Вы можете использовать любое изображение, которое вам нравится, в качестве своего значка. Вы также можете создать свою собственную иконку на таких сайтах, как https://www.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>This is a paragraph.</p>
</body>
</html>
Теперь сохраните файл "index.html" и перезагрузите его в своем браузере. На вкладке вашего браузера теперь должно отображаться изображение вашего значка слева от заголовка страницы.
Поддержка файла favicon
В следующей таблице показана поддержка формата файла для изображения favicon:
| Браузер | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | Да | Да | Да | Да | Да |
| Chrome | Да | Да | Да | Да | Да |
| Firefox | Да | Да | Да | Да | Да |
| Opera | Да | Да | Да | Да | Да |
| Safari | Да | Да | Да | Да | Да |
Краткое содержание главы
- Используйте элемент HTML
<link>для вставки значка
HTML link
| Тег | Описание |
|---|---|
| <link> | Определяет связь между документом и внешним ресурсом |
Для получения полного списка всех доступных HTML тегов Справочник HTML Тегов.