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 | 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 |
Резюме
- Використовуйте HTML елемент
<link>, щоб вставити фавіконку
HTML Тег посилання
| Тег | Опис |
|---|---|
| <link> | Визначає зв’язок між документом та зовнішнім ресурсом |
Повний список всіх доступних HTML тегів дивіться в HTML Довіднику тегів на нашому сайті W3Schools українською.
