Para que serve o atributo rel na tag link?

O atributo rel na tag <link> define a relação (relacionamento) entre o documento atual e o documento ao qual a tag faz referência. Ele informa ao navegador como usar o recurso vinculado.

Os valores de rel mais utilizados são:

• stylesheet: Indica um arquivo CSS externo que deve ser aplicado ao documento.
• icon/shortcut icon: Indica um ícone (favicon) para o site, exibido na aba do navegador.
• preload: Carrega previamente o recurso que será necessário mais tarde, sem bloquear a renderização.
• preconnect: Estabelece uma conexão com a fonte especificada antecipadamente, acelerando as requisições subsequentes.
• prefetch: Carrega previamente o recurso que pode ser necessário em uma futura navegação do usuário.
• canonical: Indica a URL canônica da página, ajudando os motores de busca a determinar a versão principal do conteúdo.
• alternate: Indica uma versão alternativa do documento atual (por exemplo, em outro idioma ou formato).
• author: Indica o autor do documento.
• help: Indica um documento de ajuda.

Exemplo de uso de rel="stylesheet":

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

Exemplo de uso de rel="icon":

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

Exemplo de uso de rel="preload":

<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>