Урок 6. Фавикон. Иконки.

Что такое фавикон, его подключение и создание в онлайн редакторе. Использование иконок в верстке страниц. Скачивание иконок с сайта fonts.google.com

Фавикон.

Фавикон (favicon) – небольшая картинка, расположенная перед названием страницы во вкладке браузера.

Пример:

Здесь в примере фавикон обведен в красный круг.

Физически фавикон представляет собой файл с расширением ico и как правило с названием favicon.

Для подключения фэвикон к html документу используется тэг link, который помещается в голове документа (внутри тэга head) и в котором атрибуту href необходимо присвоить url фавикона.

<head>

</head>

Для быстрого набора данной конструкции в vsCode можно набрать link:favicon и нажать enter (либо tab, в зависимости от настроек).

Как правило фавикон распологается в корневом каталоге проекта.

Создать фавикон можно онлайн на следующей странице в Интернете:

https://www.favicon.by/

После того, как фавикон будет готов достаточно нажать кнопку «Скачать фавиконку»

Иконки.

Как правило в дизайне сайтов часто используются различные иконки. Иконки – маленькие картинки улучшающие восприятие функционала для пользователя. Например, для удаления чего либо используется иконка корзина:

Выбрать иконку для своего сайта можно на следующем сайте: https://fonts.google.com/icons

Здесь просто выбираете нужную иконку и нажимаете на кнопку «png». Картинка будет скачена в формате png.

В html коде эту иконку можно вставить как обычную картинку.