Etiqueta HTML <link>

La etiqueta <link> define la relación entre el documento actual y un recurso externo. Su uso más habitual es enlazar una hoja de estilos CSS externa, pero también es la forma de adjuntar un favicon, declarar versiones traducidas de una página e indicar al navegador qué recursos debe obtener con anticipación para mejorar el rendimiento.

Esta página cubre la sintaxis de <link>, todos los atributos que acepta y ejemplos prácticos de los valores rel que más se usan: stylesheet, icon, preload y alternate. También explica la familia de sugerencias de recursos (preload, prefetch, preconnect, dns-prefetch) y los atributos de seguridad crossorigin / integrity.

Ten en cuenta que <link> no carga scripts — esa es la función de la etiqueta <script>. La única excepción es rel="modulepreload", que solo precarga un módulo JavaScript para que esté listo cuando un <script> lo solicite más tarde.

Un documento HTML puede contener varios elementos <link> para distintos tipos de recursos, como hojas de estilos, iconos y contenido precargado. Todos ellos pertenecen a la sección <head> del documento, generalmente antes de la etiqueta de cierre </head>.

Sintaxis

La etiqueta <link> está vacía, lo que significa que no es necesaria la etiqueta de cierre. Solo contiene atributos. Sin embargo, en XHTML, la etiqueta <link> debe cerrarse (<link/>).

Ejemplo de la etiqueta HTML `<link>`:

Etiqueta HTML <link>

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>The appearance of the header is determined by the CSS styles specified in the external file.</h1>
    <p>The appearance of the paragraph is determined by the CSS styles specified in the external file.</p>
  </body>
</html>

Pruébalo tú mismo »

En este ejemplo, la página no tiene estilos propios. Todas las reglas que controlan la apariencia del encabezado y del párrafo se encuentran en el archivo externo style.css, que el elemento <link> incorpora. Abre el editor en vivo de arriba y edita style.css para ver cómo los cambios se aplican al marcado.

Cómo enlazar un favicon

Un favicon es el pequeño icono que se muestra en la pestaña del navegador y en los marcadores. Se declara con rel="icon". El atributo type le indica al navegador el formato de la imagen, y sizes permite ofrecer varias resoluciones para que el navegador elija la más adecuada.

<head>
  <!-- A standard favicon -->
  <link rel="icon" href="/favicon.ico" sizes="any" />

  <!-- A modern SVG icon (scales to any resolution) -->
  <link rel="icon" type="image/svg+xml" href="/icon.svg" />

  <!-- A PNG at a specific size -->
  <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png" />

  <!-- Icon used when the page is added to an iOS home screen -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>

sizes="any" marca un icono escalable (como .ico o .svg); de lo contrario, usa ANCHOxALTO (por ejemplo, 32x32) por archivo.

Precarga de recursos con `rel="preload"`

rel="preload" le indica al navegador que obtenga un recurso con anticipación, con alta prioridad, antes de que el analizador lo descubra de forma habitual. No aplica el recurso — solo lo descarga para que el archivo ya esté en caché cuando se necesite.

Al usar preload, el atributo as es obligatorio. Le indica al navegador el tipo de recurso para que pueda establecer la prioridad correcta, aplicar el encabezado Accept adecuado y activar las verificaciones de CORS y Content-Security-Policy correspondientes.

<head>
  <!-- Preload a stylesheet -->
  <link rel="preload" href="/main.css" as="style" />

  <!-- Preload a font (fonts are always fetched with CORS, so crossorigin is required) -->
  <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />

  <!-- Preload an image that is the page's largest element -->
  <link rel="preload" href="/hero.jpg" as="image" />
</head>

Una hoja de estilos precargada aún necesita un enlace normal rel="stylesheet" (o un <style>/@import) para aplicarse realmente a la página — preload por sí solo solo la descarga.

Sugerencias de recursos: preload vs prefetch vs preconnect vs dns-prefetch

Estos cuatro valores rel mejoran el rendimiento, pero resuelven problemas distintos y no son intercambiables:

Valor `rel`	Qué hace	Úsalo para
`preload`	Descarga un recurso que la página actual necesitará pronto, con alta prioridad.	CSS crítico, fuentes, la imagen LCP — archivos que de otro modo se descubrirían tarde.
`prefetch`	Descarga un recurso que una futura navegación probablemente necesitará, con baja prioridad.	Recursos de la siguiente página que el usuario probablemente visitará.
`preconnect`	Abre la conexión (DNS + TCP + handshake TLS) hacia un origen diferente con anticipación.	Orígenes desde los que definitivamente harás solicitudes pronto, como un host de fuentes o API.
`dns-prefetch`	Resuelve solo el DNS de un origen. Más económico que `preconnect` y un buen respaldo.	Orígenes que podrías usar, o como complemento de `preconnect` para navegadores más antiguos.

<head>
  <!-- Open the connection to the font host as early as possible -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <!-- Fallback DNS lookup for browsers that ignore preconnect -->
  <link rel="dns-prefetch" href="https://fonts.gstatic.com" />

  <!-- Warm up an asset the next page will need -->
  <link rel="prefetch" href="/next-page.js" as="script" />
</head>

Regla general: preload para la página actual, prefetch para la siguiente página, y preconnect / dns-prefetch para preparar conexiones a otros orígenes.

Versiones alternativas con `rel="alternate"`

rel="alternate" apunta a una representación alternativa del documento actual. Combinado con hreflang, le indica a los motores de búsqueda qué URL sirve qué idioma o región — esencial para sitios multilingües.

<head>
  <link rel="alternate" hreflang="en" href="https://example.com/en/" />
  <link rel="alternate" hreflang="de" href="https://example.com/de/" />
  <link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
  <!-- Default fallback when no language matches -->
  <link rel="alternate" hreflang="x-default" href="https://example.com/" />
</head>

El mismo valor rel también declara alternativas que no son HTML, como un feed RSS:

<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/feed.xml" />

`crossorigin` e `integrity`

El atributo crossorigin controla si la solicitud de origen cruzado se realiza con CORS y si se envían credenciales (cookies):

crossorigin="anonymous" (o simplemente crossorigin) — realiza una solicitud CORS sin credenciales.
crossorigin="use-credentials" — realiza una solicitud CORS que incluye credenciales.

Necesitas crossorigin siempre que el navegador deba leer la respuesta entre orígenes, sobre todo para fuentes (que siempre se obtienen en modo CORS) y para cualquier recurso que protejas con integrity.

El atributo integrity habilita la Integridad de Subrecursos (SRI). Proporcionas un hash criptográfico del archivo; el navegador obtiene el recurso, lo hashea y se niega a aplicarlo si los hashes no coinciden. Esto te protege si una CDN se ve comprometida o un archivo es manipulado.

<link
  rel="stylesheet"
  href="https://cdn.example.com/bootstrap.min.css"
  integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
  crossorigin="anonymous"
/>

El formato del hash es <algoritmo>-<hash-base64> (algoritmos permitidos: sha256, sha384, sha512). Dado que la verificación de integridad necesita leer la respuesta, un enlace integrity a otro origen también debe establecer crossorigin.

Atributos

Atributo	Valor	Descripción
as	content_type	Especifica el tipo de contenido que se está cargando. Obligatorio cuando `rel="preload"`.
charset	char_encoding	Define la codificación del documento enlazado. Obsoleto en HTML5.
crossorigin	anonymous use-credentials	Configura los ajustes de CORS para el recurso enlazado.
href	URL	Define la URL del archivo externo.
hreflang	language_code	Define el idioma del documento enlazado.
integrity	hash_value	Habilita la integridad de subrecursos para verificar los recursos obtenidos.
media	media_query	Define el dispositivo para el que se aplicarán los estilos.
rel	alternate author bookmark dns-prefetch first help icon last license next nofollow noreferrer pingback preload prefetch prev search stylesheet tag preconnect manifest modulepreload	Define la relación entre el documento actual y el archivo enlazado. Valores comunes: `stylesheet` (enlaza un archivo CSS), `icon` (enlaza un favicon), `preload` (precarga un recurso), `alternate` (enlaza a una versión alternativa del documento).
rev	reversed relationship	Define la relación entre el documento actual y el enlazado. Obsoleto en HTML5.
sizes	Width x Height	Establece el tamaño de los iconos asociados. Se usa solo con `rel="icon"`.
type	media_type	Define el tipo MIME (especificación para la transferencia en red de varios tipos de archivos) del documento enlazado. Nota: al enlazar una hoja de estilos, `type="text/css"` es opcional y el valor predeterminado es CSS.

La etiqueta <link> también admite los Atributos Globales y los Atributos de Eventos.

Recursos relacionados

Etiqueta HTML <head> — donde pertenece cada elemento <link>.
Etiqueta HTML <script> — la forma correcta de cargar JavaScript.
Etiqueta HTML <style> — inserta CSS directamente en lugar de enlazar un archivo.
Introducción a CSS — cómo funcionan realmente las hojas de estilos que enlazas.

Práctica

¿Qué atributo es obligatorio cuando se usa la etiqueta HTML link con rel='preload'?

assrctargetdownload

Práctica

Selecciona todos los atributos válidos de la etiqueta HTML link (más de uno es correcto).

Sintaxis

Ejemplo de la etiqueta HTML <link>:

Cómo enlazar un favicon

Precarga de recursos con rel="preload"

Sugerencias de recursos: preload vs prefetch vs preconnect vs dns-prefetch

Versiones alternativas con rel="alternate"

crossorigin e integrity

Atributos

Recursos relacionados

Práctica

Ejemplo de la etiqueta HTML `<link>`:

Precarga de recursos con `rel="preload"`

Versiones alternativas con `rel="alternate"`

`crossorigin` e `integrity`