HTML Reference
<link> — The External Resource Element
The element that connects your HTML to stylesheets, icons, and preloaded assets. Invisible, but critical.
Last updated: October 2026
Definition: The <link> element defines a relationship between the current document and an external resource. It is a void element placed inside <head>. The most common uses are loading stylesheets, setting the favicon, defining the canonical URL, and preloading assets for performance.
🎬 Live in This Page
The page you're reading uses four <link> elements right now. Every one is essential.
<!-- Favicon: the icon in the browser tab -->
<link href="/favicon.png" rel="icon" type="image/png">
<!-- Canonical URL: tells Google the preferred URL -->
<link rel="canonical" href="https://makuistudio.com/code/html/reference/html-link-tag.html">
<!-- Main site stylesheet -->
<link href="/style.css" rel="stylesheet">
<!-- Font Awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">💡 Without these four tags, the page would have no favicon, no styles, no icons, and no clear URL for search engines.
Basic Syntax
<link rel="stylesheet" href="/style.css">
<link rel="icon" href="/favicon.png">
<link rel="canonical" href="https://example.com/page">Two required attributes: rel (the relationship type) and href (the resource URL).
🎯 Every rel Value You Need
| rel value | Purpose | Frequency |
|---|---|---|
stylesheet | Load a CSS file. | Every page |
icon | Set the favicon (browser tab icon). | Every page |
canonical | Preferred URL for the page. | Every page |
alternate | RSS feed, alternate language, print stylesheet. | Blogs, i18n |
preload | Fetch a critical resource early. | Performance |
preconnect | Open an early connection to a third-party domain. | Performance |
dns-prefetch | Resolve DNS early for a domain. | Performance |
prefetch | Fetch a resource for the next page. | Performance |
manifest | PWA manifest. | PWAs |
apple-touch-icon | iOS home screen icon. | Mobile web |
author | Link to an author profile or page. | Blogs |
Stylesheet
Load your CSS files. Order matters — later files override earlier ones.
<!-- Main styles -->
<link rel="stylesheet" href="/style.css">
<!-- Utility framework (loads after so utilities win) -->
<link rel="stylesheet" href="/tailwind.css">
<!-- Third-party icons -->
<link rel="stylesheet" href="https://cdn.example.com/icons.css">💡 Performance tip: Inline critical above-the-fold CSS in a <style> block, then load the rest of the CSS with <link>. This speeds up first render.
Favicon Variants
Different platforms use different favicon formats. Cover them all.
<!-- Standard browser favicon -->
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<!-- Apple touch icon (iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- PWA manifest -->
<link rel="manifest" href="/site.webmanifest">
<!-- Theme color for mobile browser -->
<meta name="theme-color" content="#0f172a">Performance: preconnect & preload
These tags tell the browser to start fetching before it discovers the resources in the HTML.
<!-- Establish early connection to a third-party domain -->
<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/inter.woff2"
as="font"
type="font/woff2"
crossorigin>
<!-- Preload the hero image -->
<link rel="preload"
href="/images/hero.webp"
as="image"
fetchpriority="high">
<!-- Preload critical CSS -->
<link rel="preload"
href="/critical.css"
as="style"
onload="this.rel='stylesheet'">Warning: Don't preload everything. Preloading too many resources slows down the critical ones. Preload 2–3 resources max per page.
Alternate: RSS and i18n
<!-- RSS feed for the blog -->
<link rel="alternate"
type="application/rss+xml"
title="Blog RSS Feed"
href="/feed.xml">
<!-- Language alternates for international SEO -->
<link rel="alternate" hreflang="en" href="https://example.com/en/">
<link rel="alternate" hreflang="es" href="https://example.com/es/">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/">
<link rel="alternate" hreflang="x-default" href="https://example.com/">
<!-- Print stylesheet -->
<link rel="stylesheet"
href="/print.css"
media="print">Complete Production Head Links
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO -->
<link rel="canonical" href="https://example.com/page">
<!-- Icons -->
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Performance -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Styles -->
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/components.css">
<!-- RSS (optional) -->
<link rel="alternate" type="application/rss+xml"
title="Site Feed" href="/feed.xml">
</head>🎯 link vs a — The Key Distinction
| Feature | <link> | <a> |
|---|---|---|
| Purpose | Document ↔ resource relationship | User-navigable hyperlink |
| Location | In <head> | In <body> |
| Visible | No | Yes |
| User clicks | No | Yes |
| Common use | Load CSS, set icon | Navigate to a page |
⚠️ Common Mistakes
- Using
<link>in the body. It only works in<head>. Placement in<body>is invalid and may not load the resource. - Missing the
relattribute. Without it, the browser doesn't know what to do with the resource. It will be ignored. - Forgetting the closing slash for void elements. In HTML5, both
<link>and<link />work. Pick one style and stay consistent. - Relative paths in canonical. Canonical URLs must be absolute. Use
https://example.com/page;, not/page. - Preloading too many resources. Preloading everything is the same as preloading nothing. Focus on 2–3 truly critical assets.
- Using
rel="shortcut icon". Deprecated. Userel="icon". - Multiple canonical tags. Only one canonical per page. Multiple will confuse search engines.
- Loading fonts without preconnect. Third-party fonts are slow without an early connection. Always preconnect to font domains.
♿ Accessibility & SEO Notes
- Canonical is critical for SEO. Without it, search engines may index duplicate URLs and split your ranking power.
- Media-specific stylesheets matter. A print stylesheet saves ink and paper for users who print — an accessibility win.
- Alternate hreflang links help search engines serve the right language to the right audience.
- Preconnect to font domains reduces perceived load time, which improves the user experience for everyone.
- Manifest + apple-touch-icon make your site installable as a PWA and give iOS users a proper home screen icon.
- Don't use
<link>to load scripts. Use<script>for JavaScript.<link>is for stylesheets, icons, and metadata.
❓ Frequently Asked Questions
What is the HTML <link> tag?
The <link> element defines a relationship between the current document and an external resource. It is most commonly used to load stylesheets (CSS), set the favicon, define the canonical URL, and preload critical assets for performance.
What is the difference between <link> and <a>?
<a> creates a clickable hyperlink for users. <link> creates a relationship between the HTML document and an external resource — no user interaction required. <link> goes in <head>, <a> goes in <body>.
What does rel=stylesheet do?
rel=stylesheet loads a CSS file and applies its styles to the page. The href attribute points to the CSS file's URL. This is the most common use of the <link> element.
What is rel=preload?
rel=preload tells the browser to fetch a resource early, before it is needed during page rendering. It is used to speed up critical assets like fonts, hero images, and above-the-fold CSS. Pair with as= to specify the resource type.
Why is my favicon not showing?
Common causes: the file path is wrong, the image format is unsupported (use PNG or ICO), the browser cached an old favicon (hard refresh to test), or the tag is missing from <head>. Check the browser's Network tab for a 404 on the favicon request.