HTML favicon, сокращение от «favorite icon», представляет собой небольшое изображение, отображаемое рядом с заголовком страницы на вкладке или в адресной строке веб-браузера. Оно также отображается в закладках и истории браузера.
Значок фавикона обычно используется как представление целого веб-сайта. Поэтому многие веб-дизайнеры используют его, чтобы придать своим сайтам отличительный вид.
Favicons помогают пользователям быстро визуально идентифицировать веб-сайт. Обычно они имеют размер 16×16, 32×32 или 48×48 пикселей и обычно сохраняются как файлы.ico,.png,.gif или.svg.
Как добавить фавикон в HTML?
В адресной строке или на вкладке браузера слева от заголовка страницы отображается значок сайта, например:
Чтобы добавить фавикон в HTML или на веб-сайт, вам сначала нужно создать изображение, которое вы хотите использовать в качестве фавикона. Фавикон — это небольшое изображение в формате значка, поэтому это должно быть простое изображение с высокой контрастностью, чтобы оно оставалось четким и узнаваемым для вашего бренда даже при небольших размерах.
Как только изображение будет готово, настанет время добавить фавикон на ваш сайт. Вы можете сделать это, либо сохранив изображение фавикона в корневом каталоге вашего веб-сервера, либо создав подпапку с именем «images» в корневом каталоге и сохранив изображение фавикона в этой папке. Распространенное имя файла изображения фавикона — «favicon.ico».
Для значка, расположенного в корневом каталоге:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
Для значка, расположенного в папке с изображениями или значками:
<link rel="icon" href="/images/favicon.ico" type="image/x-icon">
Вы размещаете следующий тег <link> сразу после тега <title> в разделе <head> вашего HTML-документа, чтобы создать ссылку на файл значка следующим образом:
<!DOCTYPE html>
<html>
<head>
<title>HTML Favicon Example</title>
<!-- Link to a favicon file-->
<link rel="icon" href="path_to_favicon.ico" type="image/x-icon">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a sample page with a favicon.</p>
</body>
</html>
В приведенном выше коде вам придется заменить «path_to_favicon.ico» на фактический путь к файлу вашего favicon. Теперь вы сохраняете свой файл «index.html» после добавления ссылки на favicon в приведенный выше HTML-код и перезагружаете его в своем веб-браузере, чтобы увидеть изменения. Favicon должен появиться на вкладке браузера слева от заголовка страницы, что является типичным местом для значка favicon.
Поддержка форматов файлов Favicon
«.ico» — наиболее часто поддерживаемый формат файла для favicon в HTML. Он также может содержать несколько размеров в одном файле. Однако мы также можем использовать формат PNG или SVG, например:
Пример: использование значка PNG
<link rel="icon" href="path_to_favicon.png" type="image/png">
Пример: использование значка SVG
<link rel="icon" href="path_to_favicon.svg" type="image/svg+xml">
Современные веб-приложения часто определяют несколько размеров фавиконов для разных устройств, таких как планшеты, телефоны. Вы можете указать разные размеры следующим образом:
Пример:
<link rel="icon" sizes="16x16" href="path/to/favicon-16x16.png">
<link rel="icon" sizes="32x32" href="path/to/favicon-32x32.png">
<link rel="icon" sizes="96x96" href="path/to/favicon-96x96.png">
В таблице ниже показан формат файла, поддерживаемый значком или изображением HTML-консоли:
| Браузер | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | Да | Да | Да | Да | Да |
| Хром | Да | Да | Да | Да | Да |
| Firefox | Да | Да | Да | Да | Да |
| Опера | Да | Да | Да | Да | Да |
| Сафари | Да | Да | Да | Да | Да |
В этом уроке мы объяснили, как добавить фавикон в HTML-документ или веб-сайт. Добавление фавикона улучшает брендинг веб-сайта. Он отображается во вкладках браузера, закладках и истории просмотров, помогая пользователям быстро идентифицировать и переходить на ваши страницы. Мы надеемся, что вы получили четкое представление о том, как привязать фавикон к вашему веб-сайту.
Удачного кодирования!!!
