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
можно посмотреть в документации
Пожалуйста, авторизуйтесь, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт.