HTML Фавикон
Фавикон — это небольшое изображение, отображаемое рядом с заголовком страницы во вкладке браузера.
Как добавить фавикон в HTML
Вы можете использовать любое понравившееся вам изображение в качестве фавиконки. Вы также можете создать свой собственный значок на таких сайтах, как https://favicon.cc .
Совет: фавикон — это небольшое изображение, поэтому оно должно быть простым и контрастным.
Изображение фавикона отображается слева от заголовка страницы на вкладке браузера, например:
Чтобы добавить значок на свой веб-сайт, либо сохраните изображение значка в корневом каталоге вашего веб-сервера, либо создайте папку в корневом каталоге с именем images и сохраните изображение значка в этой папке. Распространенное название изображения фавикона — «favicon.ico».
Затем добавьте <link>элемент в файл index.html после <title>элемента, например:
Пример
<!DOCTYPE html>
<html>
<head>
<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>
Теперь сохраните файл index.html и перезагрузите его в браузере. Теперь на вкладке вашего браузера слева от заголовка страницы должно отображаться изображение вашего фавикона.
Поддержка формата файла фавикона
В следующей таблице показана поддержка формата файла для изображения фавикона:
| Browser | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | Yes | Yes | Yes | Yes | Yes |
| Chrome | Yes | Yes | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes | Yes | Yes |
| Safari | Yes | Yes | Yes | Yes | Yes |
Краткое содержание главы
- Используйте
<link>элемент HTML для вставки фавикона
HTML-тег ссылки
| Tag | Description |
|---|---|
| <link> | Defines the relationship between a document and an external resource |
Полный список всех доступных HTML-тегов см. в нашем Справочнике по HTML-тегам .