Код Справочник по фронтенду

#статьи

21 авг 2025
0

HTML-тег <link>: как он работает и как с его помощью подключать иконки и шрифты

Рассказываем, как правильно использовать тег для подключения внешних ресурсов к нашей странице.

Иллюстрация: Polina Vari для Skillbox Media

Редакция «Код» Skillbox Media

Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

С помощью тега <link> к HTML-документу подключают внешние ресурсы. Чаще всего это таблицы стилей (CSS), иконки, шрифты и другие файлы, которые помогают странице быть красивой.

В этой статье мы поговорим о том, как устроен тег <link>, какие у него атрибуты и как правильно его использовать в разных задачах.

Содержание

Что такое тег <link> и зачем он нужен
Атрибуты тега <link>
Предзагрузка файлов
Частые ошибки при подключении стилей или иконок

Что такое тег <link> и зачем он нужен

Тег <link> находится внутри <head>. Пользователи его не видят, он только помогает браузеру правильно загрузить и оформить сайт.

Всё, что находится в <head>, загружается до того, как страница отобразится. Это важно: если <link> разместить в другом месте, пользователь увидит мигание — сначала необработанную вёрстку, а потом уже оформленную страницу. Поэтому <link> и помещают в <head>.

С помощью тега можно решить несколько задач:

подключить таблицы стилей CSS;
подключить фавиконку — это иконка сайта, которую видно на вкладке браузера;
подключить внешние шрифты, например, из Google Fonts;
сообщить браузеру, какие файлы нужно загрузить заранее, ещё до того, как они реально понадобятся на странице.

Атрибуты тега <link>

Тег <link> непарный, ему не нужен закрывающий тег. Всю информацию браузеру мы передаём с помощью атрибутов.

Основные атрибуты, которые мы рассмотрим, — rel и href, type, media, crossorigin, sizes. Вообще, их намного больше, мы выбрали только самые распространённые.

Атрибут href — где искать файл

С этим атрибутом всё просто: он указывает путь к подключаемому файлу. Например, если ваш CSS-файл лежит в папке css, путь будет таким:

<link href="css/style.css">

С помощью этого же атрибута подключаются внешние шрифты. Обычно вы выбираете подходящий шрифт в библиотеке, а она сама выдаёт вам готовую ссылку для подключения. Выглядит эта ссылка обычно так:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Здесь ещё используется атрибут rel, о нём мы поговорим в следующем разделе.

Атрибут rel: что мы подключаем

Следующий атрибут — rel. Он объясняет браузеру, что за связь между HTML-документом и указанным в href файлом. Без этого браузер не поймёт, что вы подключаете именно стили, и может проигнорировать <link>.

Для подключения CSS используем:

<link rel="stylesheet" href="css/style.css">

Всего у rel четыре значения:

stylesheet — подключение таблицы стилей CSS;
icon — подключение иконки сайта (favicon);
preload — предварительная загрузка ресурсов;
alternate — ссылка на альтернативную версию страницы, например, на другом языке.

Атрибут type: уточняем тип файла

В этом атрибуте мы объясняем браузеру, что за тип у файла, который мы собираемся подключить.

Для таблицы стилей используем:

<link rel="stylesheet" href="css/style.css" type="text/css">

А для фавиконки:

<link rel="icon" href="favicon.ico" type="image/x-icon">

Вообще, в большинстве случаев атрибут type писать не обязательно — современные браузеры сами определяют тип файла по расширению. Например, если подключить CSS-файл и написать:

<link rel="stylesheet" href="style.css">

Браузер поймёт, что это таблица стилей, даже если вы не указали type="text/css". То же касается фавиконки с расширением .ico.

Но бывают ситуации, когда type лучше всё же указать:

Вы заботитесь о совместимости со старыми браузерами. Некоторые из них не определяют тип файла по расширению. Особенно старые версии Internet Explorer.
У файла нестандартное расширение или его вообще нет. В такой ситуации браузер может и не догадаться, чего вы от него хотите.
Код будет встраиваться в другие системы или платформы. В некоторых CMS или конструкторах сайтов требуется явно указывать типы.

В остальных случаях можно опустить type без проблем. Код останется рабочим.

Атрибут sizes: размер иконки

Атрибут sizes адаптирует фавиконку под разные устройства. Его используют вместе с <link rel="icon">. Он подсказывает браузеру, для каких размеров экрана подходит конкретная иконка.

Значение указывается в формате ширина x высота, например:

16×16 — маленькая иконка для старых браузеров;
32×32 — универсальный размер для большинства устройств;
48×48 — для экранов с высоким разрешением;
any — используется с векторными SVG-иконками, которые можно масштабировать до любого размера.

В коде это выглядит так:

<link rel="icon" href="images/favicon-small.png" sizes="16x16" type="image/png">
<link rel="icon" href="images/favicon-medium.png" sizes="32x32" type="image/png">
<link rel="icon" href="images/favicon-large.png" sizes="48x48" type="image/png">
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">

Атрибут media: подключаем стили под ситуацию

Иногда бывает нужно, чтобы сайт выглядел по-своему в разных ситуациях. Например, одни стили — для экрана компьютера, другие — для телефона, а третьи — для печати. Чтобы такое сделать, мы прописываем стили в разных файлах, подключаем их и добавляем к тегу <link> атрибут media. Он подсказывает браузеру, когда использовать конкретный CSS-файл.

У атрибута есть несколько значений:

all — стили работают всегда (это значение по умолчанию).
screen — стили работают, когда пользователь использует устройство с экраном, то есть телефон, планшет, десктоп и прочие.
print — включается, когда пользователь печатает страницу.
speech — для скринридеров — устройств, которые озвучивают текст для людей с проблемами зрения.
screen and (max-width: 768px) — применяется только к экранам меньше указанной ширины.

Синтаксис выглядит так:

<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/print.css" media="print" type="text/css">
<link rel="stylesheet" href="css/mobile.css" media="screen and (max-width: 768px)" type="text/css">
<link rel="stylesheet" href="css/desktop.css" media="screen

Атрибут crossorigin — решаем, передавать ли данные сторонним доменам

Иногда мы подключаем ресурсы не со своего сайта, а с другого домена. Это называют кросс-доменными запросами. Атрибут crossorigin сообщает браузеру, нужно ли передавать при таком запросе учётные данные: куки, заголовки авторизации и тому подобное.

Значения атрибута:

anonymous — запрос выполняется без учёных данных. Браузер не будет отправлять cookie, сертификаты и заголовки HTTP basic authentication. Значение по умолчанию.
use-credentials — запрос выполняется с отправкой учётных данных.

Пример подключения иконки с другого домена:

<link rel="icon" href="https://example.com/favicon.png" type="image/png" crossorigin="anonymous">

В большинстве случаев достаточно использовать anonymous или вообще не указывать атрибут — браузеры работают с ним по умолчанию.

Предзагрузка файлов

Браузер обычно загружает все ресурсы в том порядке, в котором они прописаны в коде. Но мы можем заранее указать, какие ресурсы хотим загрузить первыми. Это называется предзагрузка (preload). Предзагрузка — часть оптимизации сайта, благодаря ей страница загружается быстрее.

Чтобы включить предзагрузку, используем атрибут rel="preload", который сообщает браузеру, что ресурс нужно загрузить заранее, и атрибут as, который подсказывает, что именно мы загружаем: изображение, шрифт, скрипт и так далее.

<link rel="preload" href="fonts/main.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="image.jpg" as="image">

В первом примере мы говорим браузеру сначала загрузить шрифт, а во втором — изображение.

Другие полезные значения атрибута rel

Атрибут rel может повлиять на последовательность загрузки и другими способами:

prefetch — загружает файл в фоне после основной загрузки страницы. Это делается, если мы ожидаем от пользователя какого-то действия — скажем, перехода на следующую страницу: файл окажется в кэше, и посетитель сразу сможет его использовать.
prerender — полностью загружает следующую страницу в фоне, чтобы при переходе она открылась мгновенно.
preconnect — если нужно установить соединение с другим сервером, браузер сделает это заранее. Дело в том, что при соединении серверам нужно обменяться информацией. Обычно это занимает доли секунды, но, если канал перегружен, это может заметно замедлить загрузку.
dns-prefetch — ускоряет определение IP-адреса внешнего домена. Когда браузеру нужно загрузить ресурс с другого сайта, он сначала должен узнать IP-адрес этого домена. Для этого он делает DNS-запрос. Этот процесс называется разрешением доменного имени и может занять несколько десятков миллисекунд. Если таких ресурсов много, задержка становится заметной. dns-prefetch позволяет сделать всё это заранее.

Частые ошибки при подключении стилей или иконок

Значение preload без атрибута as

Если вы укажете rel="preload", но не добавите as, браузер не поймёт, какой тип ресурса вы хотите предзагрузить, и просто не станет этого делать. Кроме того, важно точно указать тип: as="font" — для шрифта, as="image" — для картинки и так далее.

Предзагрузка бесполезных файлов

Если вы подключаете файл через preload, но потом нигде его не используете, браузер потратит время и трафик зря. Это может даже замедлить загрузку страницы. Загружайте только то, что действительно понадобится.

Слишком много файлов для предзагрузки

Если добавить в preload слишком много ресурсов — например, все шрифты на сайте, — они начнут загружаться одновременно и мешать друг другу. Используйте preload только для действительно ценных элементов.