HTML: link

Почти у всех вкладок в браузере существуют маленькие иконки (фавиконки). Они, как и заголовок, позволяют быстро ориентироваться во вкладках и переходить на нужную, а также их используют поисковые системы, показывая их рядом с названием страницы в поиске.

Для того, чтобы установить такую иконку на страницу, используется тег <link>, у которого нужно указать два атрибута: rel для указания контента и href для указания ссылки на иконку.

<link rel="icon" href="/favicon.png">

Разные устройства могут отображать иконки разных размеров и форматов, поэтому сейчас добавляется не одна, а сразу несколько иконок. У тега <link> возможно указать тип изображения и его размер. Делается это с помощью атрибутов type и sizes. Укажем, что иконка формата png и размером 32x32

<link rel="icon" href="/favicon32.png" type="image/png" sizes="32x32">

После неё можно указать ещё несколько иконок с разными размерами:

<link rel="icon" href="/favicon64.png" type="image/png" sizes="64x64">
<link rel="icon" href="/favicon32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon16.png" type="image/png" sizes="16x16">

Теперь браузеры на разных устройствах смогут точнее работать с иконками и сразу загружать ту, которая им подходит.

Тег <link> позволяет добавлять не только фавиконку, но и подключать файлы стилей, шрифты, подсказывать браузерам следующую (или предыдущую) страницу статьи.

Задание

Добавьте link на фавиконку https://www.w3schools.com/favicon.ico с размером 64x64.

Советы

• Все возможности тега <link> можно посмотреть на MDN Web Docs