НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
Place for your advertisement!
HTML5. Уроки для початківців. W3Schools українською

En

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 українською.


Place for your advertisement!