<link> - The External Resource Link Element

The `<link>` Element

Metadata HTML 2.0

The <link> element specifies relationships between the current document and external resources. Most commonly used to link stylesheets, but also for defining favicons, preloading resources, and establishing document relationships.

Quick Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Link Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔗</text></svg>">
</head>
<body>
<main class="container">
  <h1>Styled with External CSS</h1>
  <p>This page links to an external stylesheet and favicon.</p>
</main>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Link Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔗</text></svg>">
</head>
<body>
<main class="container">
  <h1>Styled with External CSS</h1>
  <p>This page links to an external stylesheet and favicon.</p>
</main>
</body>
</html>

Syntax

<link rel="relationship" href="url">

The <link> element is a void element (self-closing) that must be placed within the <head> section. The rel attribute defines the relationship type, and href specifies the resource location.

Attributes

Core Attributes

Attribute	Required	Description	Example Values
`rel`	Yes	Relationship between current document and linked resource	`stylesheet`, `icon`, `preload`, `prefetch`, `canonical`
`href`	Conditional	URL of the linked resource	URL path or absolute URL
`type`	No	MIME type of the linked resource	`text/css`, `image/png`, `application/json`
`media`	No	Media query for when resource should be loaded	`screen`, `print`, `(max-width: 768px)`

Resource Loading Attributes

Attribute	Description	Values
`as`	Type of content being preloaded (required with `rel="preload"`)	`style`, `script`, `image`, `font`, `fetch`
`crossorigin`	How to handle CORS requests	`anonymous`, `use-credentials`
`integrity`	Subresource Integrity hash for security	Base64-encoded hash value
`referrerpolicy`	Referrer policy for fetching	`no-referrer`, `origin`, `strict-origin`

Specialized Attributes

Attribute	Description	Use Case
`sizes`	Icon sizes (for `rel="icon"` or `rel="apple-touch-icon"`)	`16x16`, `32x32`, `any`
`hreflang`	Language of linked resource	`en`, `es`, `fr`
`disabled`	Disables stylesheet (non-standard, use with caution)	Boolean attribute
`imagesizes`	Image sizes for responsive preloading	Same as `<img>` sizes
`imagesrcset`	Image sources for responsive preloading	Same as `<img>` srcset

Common Use Cases

Linking Stylesheets

The most common use of <link> is to include external CSS:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stylesheet Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
</head>
<body>
<main class="container">
  <article>
    <header>External Stylesheet</header>
    <p>This page uses an external CSS framework.</p>
    <button>Click me</button>
  </article>
</main>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stylesheet Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
</head>
<body>
<main class="container">
  <article>
    <header>External Stylesheet</header>
    <p>This page uses an external CSS framework.</p>
    <button>Click me</button>
  </article>
</main>
</body>
</html>

Media-Specific Stylesheets

Load different stylesheets for different media types or conditions:

<!-- Default stylesheet -->
<link rel="stylesheet" href="styles.css">

<!-- Print-specific styles -->
<link rel="stylesheet" href="print.css" media="print">

<!-- Mobile-specific styles -->
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">

<!-- High-resolution displays -->
<link rel="stylesheet" href="retina.css" media="screen and (min-resolution: 2dppx)">

<!-- Dark mode preference -->
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">

Favicons

Define various icon sizes for different platforms and use cases:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Favicon Examples</title>

<!-- Modern SVG favicon (recommended) -->
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⭐</text></svg>">

<!-- PNG fallback -->
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==">
</head>
<body>
<h1>Check the browser tab for the star icon!</h1>
<p>This page uses an SVG favicon with emoji.</p>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Favicon Examples</title>

<!-- Modern SVG favicon (recommended) -->
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⭐</text></svg>">

<!-- PNG fallback -->
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==">
</head>
<body>
<h1>Check the browser tab for the star icon!</h1>
<p>This page uses an SVG favicon with emoji.</p>
</body>
</html>

Complete Favicon Set

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

<!-- SVG favicon (modern, scalable) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- PNG favicons for different sizes -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">

<!-- Apple touch icons -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android Chrome -->
<link rel="manifest" href="/site.webmanifest">

Preloading Critical Resources

Preload resources that will be needed soon to improve performance:

<!-- Preload critical CSS -->
<link rel="preload" href="/styles/critical.css" as="style">
<link rel="stylesheet" href="/styles/critical.css">

<!-- Preload fonts (with crossorigin!) -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

<!-- Preload hero image -->
<link rel="preload" href="/images/hero.jpg" as="image">

<!-- Preload critical JavaScript -->
<link rel="preload" href="/js/app.js" as="script">

<!-- Preload fetch/XHR data -->
<link rel="preload" href="/api/data.json" as="fetch" crossorigin>

Prefetching Future Resources

Hint to the browser about resources that might be needed on future page navigation:

<!-- Prefetch next page -->
<link rel="prefetch" href="/page2.html">

<!-- Prefetch images for next page -->
<link rel="prefetch" href="/images/page2-hero.jpg" as="image">

<!-- DNS prefetch for external domains -->
<link rel="dns-prefetch" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://analytics.example.com">

<!-- Preconnect to external origin (DNS + TCP + TLS) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Prerender entire page (use sparingly!) -->
<link rel="prerender" href="/next-page.html">

Canonical URLs

Specify the preferred URL for duplicate content to help with SEO:

<!-- Original content URL -->
<link rel="canonical" href="https://example.com/original-article">

<!-- Use on paginated content -->
<link rel="canonical" href="https://example.com/article">

<!-- Use on AMP or mobile versions -->
<link rel="canonical" href="https://example.com/article">

Alternate Versions

Link to alternate versions of the current page:

<!-- RSS/Atom feeds -->
<link rel="alternate" type="application/rss+xml" title="Blog RSS Feed" href="/feed.xml">
<link rel="alternate" type="application/atom+xml" title="Blog Atom Feed" href="/atom.xml">

<!-- Alternate language versions -->
<link rel="alternate" href="https://example.com/en/page" hreflang="en">
<link rel="alternate" href="https://example.com/es/page" hreflang="es">
<link rel="alternate" href="https://example.com/fr/page" hreflang="fr">
<link rel="alternate" href="https://example.com/page" hreflang="x-default">

<!-- AMP version -->
<link rel="amphtml" href="https://example.com/amp/article">

<!-- Mobile version -->
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/page">

Web App Manifest

Link to a web app manifest for Progressive Web Apps:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PWA Example</title>

<!-- Web App Manifest -->
<link rel="manifest" href="data:application/json,{%22name%22:%22My%20App%22,%22short_name%22:%22App%22,%22display%22:%22standalone%22}">

<!-- Theme color -->
<meta name="theme-color" content="#4285f4">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
</head>
<body>
<main class="container">
  <h1>Progressive Web App</h1>
  <p>This page includes a web manifest for PWA functionality.</p>
</main>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PWA Example</title>

<!-- Web App Manifest -->
<link rel="manifest" href="data:application/json,{%22name%22:%22My%20App%22,%22short_name%22:%22App%22,%22display%22:%22standalone%22}">

<!-- Theme color -->
<meta name="theme-color" content="#4285f4">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
</head>
<body>
<main class="container">
  <h1>Progressive Web App</h1>
  <p>This page includes a web manifest for PWA functionality.</p>
</main>
</body>
</html>

Typical manifest file (manifest.json):

{
  "name": "My Application",
  "short_name": "App",
  "description": "A progressive web application",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#4285f4",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Module Preloading

Preload ES modules for better performance:

<!-- Preload main module -->
<link rel="modulepreload" href="/js/app.js">

<!-- Preload module dependencies -->
<link rel="modulepreload" href="/js/utils.js">
<link rel="modulepreload" href="/js/components.js">

Performance Optimization

Resource Hints Priority

Understanding the different resource hints and when to use them:

Use when: You know you’ll need resources from a domain but not exactly which ones yet.

What it does: Resolves DNS early, saving 20-120ms when the actual resource is requested.

Best for: Third-party domains like analytics, ads, or CDNs.

<link rel="dns-prefetch" href="https://analytics.example.com">

Use when: You’re certain you’ll need resources from a domain soon.

What it does: Performs DNS lookup, TCP handshake, and TLS negotiation early.

Best for: Critical third-party resources like fonts or API servers.

<link rel="preconnect" href="https://fonts.googleapis.com">

Use when: You know exactly which resource is needed for the current page.

What it does: Fetches the resource with high priority for current navigation.

Best for: Critical CSS, fonts, hero images, or above-the-fold assets.

<link rel="preload" href="/hero.jpg" as="image">

Use when: User will likely need the resource on a future navigation.

What it does: Fetches resource with low priority during browser idle time.

Best for: Next page resources or likely user actions.

<link rel="prefetch" href="/page2.html">

Critical CSS Pattern

Optimize CSS delivery for faster page rendering:

<head>
  <!-- Inline critical CSS for above-the-fold content -->
  <style>
    /* Critical styles here */
    body { margin: 0; font-family: system-ui; }
    .header { background: #333; color: white; }
  </style>

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

  <!-- Load full stylesheet asynchronously -->
  <link rel="stylesheet" href="/styles/main.css" media="print" onload="this.media='all'">

  <!-- Fallback for no-JS -->
  <noscript>
    <link rel="stylesheet" href="/styles/main.css">
  </noscript>
</head>

Font Loading Optimization

Properly load web fonts to avoid layout shifts and flash of invisible text:

<head>
  <!-- Preconnect to font provider -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Preload critical fonts -->
  <link rel="preload"
        href="/fonts/main-regular.woff2"
        as="font"
        type="font/woff2"
        crossorigin>

  <!-- Load font stylesheet -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
</head>

Subresource Integrity

Ensure third-party resources haven’t been tampered with:

<!-- CDN stylesheet with integrity check -->
<link rel="stylesheet"
      href="https://cdn.example.com/styles.css"
      integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/ux9AAYV2R7aDK4mBH9G8sQ5o3N3d3d3"
      crossorigin="anonymous">

<!-- CDN script preload with integrity -->
<link rel="preload"
      href="https://cdn.example.com/app.js"
      as="script"
      integrity="sha384-xyz123..."
      crossorigin="anonymous">

Generate integrity hashes using tools like SRI Hash Generator.

Responsive Image Preloading

Preload responsive images efficiently:

<!-- Preload responsive image -->
<link rel="preload"
      as="image"
      href="hero-small.jpg"
      imagesrcset="hero-small.jpg 400w,
                   hero-medium.jpg 800w,
                   hero-large.jpg 1200w"
      imagesizes="(max-width: 600px) 400px,
                  (max-width: 1200px) 800px,
                  1200px">

Accessibility Considerations

Provide Meaningful Titles

When linking alternate versions, provide descriptive titles:

<!-- Good: Descriptive title -->
<link rel="alternate"
      type="application/rss+xml"
      title="Tech Blog - Latest Articles RSS Feed"
      href="/feed.xml">

<!-- Avoid: Generic title -->
<link rel="alternate"
      type="application/rss+xml"
      title="RSS"
      href="/feed.xml">

Theme Color for Better UX

Use theme color to match browser UI to your site:

<!-- Standard theme color -->
<meta name="theme-color" content="#4285f4">

<!-- Theme color for dark mode -->
<meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">

Print Stylesheets

Provide printer-friendly styles for better accessibility:

<link rel="stylesheet" href="print.css" media="print">

@media print {
  /* Hide navigation, ads, etc. */
  nav, aside, .no-print { display: none; }

  /* Use appropriate colors for printing */
  body { color: black; background: white; }

  /* Add page breaks */
  h1, h2 { page-break-after: avoid; }

  /* Show link URLs */
  a::after { content: " (" attr(href) ")"; }
}

Alternate Language Versions

Help users and search engines find content in their language:

<!-- Self-referencing is recommended -->
<link rel="alternate" href="https://example.com/en/page" hreflang="en">
<link rel="alternate" href="https://example.com/es/page" hreflang="es">
<link rel="alternate" href="https://example.com/page" hreflang="x-default">

<!-- Also provide language switcher in page content -->
<nav aria-label="Language selection">
  <a href="/en/page" hreflang="en">English</a>
  <a href="/es/page" hreflang="es">Español</a>
</nav>

Common Pitfalls

<!-- Fonts ALWAYS need crossorigin, even same-origin -->
<link rel="preload"
      href="/fonts/main.woff2"
      as="font"
      type="font/woff2"
      crossorigin>

<!-- This won't work - font will load twice! -->
<link rel="preload"
      href="/fonts/main.woff2"
      as="font"
      type="font/woff2">

Missing `as` Attribute on Preload

Correct
Wrong

<!-- Browser knows how to prioritize -->
<link rel="preload" href="/app.js" as="script">
<link rel="preload" href="/hero.jpg" as="image">

<!-- Browser doesn't know what this is! -->
<link rel="preload" href="/app.js">

Overusing Preload

Too many preloads can hurt performance rather than help:

<!-- BAD: Preloading everything -->
<link rel="preload" href="/style1.css" as="style">
<link rel="preload" href="/style2.css" as="style">
<link rel="preload" href="/style3.css" as="style">
<link rel="preload" href="/img1.jpg" as="image">
<link rel="preload" href="/img2.jpg" as="image">
<!-- ... 20 more preloads ... -->

<!-- GOOD: Only preload critical resources -->
<link rel="preload" href="/critical.css" as="style">
<link rel="preload" href="/hero.jpg" as="image">

Browser Support

Browser	Version	Notes
Chrome	1+	Full support; `rel="preload"` since Chrome 50
Firefox	1+	Full support; `rel="preload"` since Firefox 56
Safari	1+	Full support; `rel="preload"` since Safari 11.1
Edge	12+	Full support; `rel="preload"` since Edge 79
IE	3+	Basic support; limited support for modern `rel` values

Feature-Specific Support

Feature	Chrome	Firefox	Safari	Edge
`rel="preload"`	50+	56+	11.1+	79+
`rel="prefetch"`	8+	2+	13+	12+
`rel="modulepreload"`	66+	115+	16.4+	79+
`rel="dns-prefetch"`	46+	3+	5+	79+
`rel="preconnect"`	46+	39+	11.1+	79+
Module Preload	66+	115+	16.4+	79+
Subresource Integrity	45+	43+	11.1+	17+

Container for metadata elements. The <link> element must be placed inside <head>. Learn more →

Defines metadata that cannot be defined using other HTML meta elements. Often used alongside <link>. Learn more →

<link> - The External Resource Link Element

The <link> Element

Quick Example

Syntax

Attributes

Core Attributes

Resource Loading Attributes

Specialized Attributes

Common Use Cases

Linking Stylesheets

Media-Specific Stylesheets

Favicons

Complete Favicon Set

Preloading Critical Resources

Prefetching Future Resources

Canonical URLs

Alternate Versions

Web App Manifest

Module Preloading

Performance Optimization

Resource Hints Priority

Critical CSS Pattern

Font Loading Optimization

Subresource Integrity

Responsive Image Preloading

Accessibility Considerations

Provide Meaningful Titles

Theme Color for Better UX

Print Stylesheets

Alternate Language Versions

Common Pitfalls

Forgetting Crossorigin for Fonts

Missing as Attribute on Preload

Overusing Preload

Browser Support

Feature-Specific Support

Related Elements

The `<link>` Element

Missing `as` Attribute on Preload