The HTML <link> tag

Q: How do I set a favicon?

Use (or a PNG/SVG icon) in the head.

Element All modern browsers Updated June 22, 2026

Quick answer

The HTML <link> element connects the document to external resources, with the rel attribute defining the relationship — stylesheet, icon, preload, preconnect, canonical and more. It is a void element placed in the <head>.

Overview

The <link> element establishes a relationship between the document and an external resource. It is a void element that lives in the <head>, and its rel attribute is the key that says what the relationship is.

The common values cover a lot of ground: rel="stylesheet" loads CSS, rel="icon" sets the favicon, rel="canonical" declares the preferred URL of a page for SEO, and performance hints like preload, preconnect and dns-prefetch speed up loading by fetching or connecting early.

A few details make a real difference: pair rel="preload" with the as attribute so the browser prioritizes and caches the resource correctly, secure cross-origin resources with crossorigin plus integrity (Subresource Integrity), and use the media attribute to load a stylesheet only under matching conditions.

Syntax

<link rel="stylesheet" href="style.css">
<link rel="icon" href="/favicon.svg">
<link rel="canonical" href="https://example.com/page">

Attributes

The <link> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute	Value	Description
`as`	`script` `style` `image` `font` `fetch` `document` `audio` `video` `track` `object` `embed` `worker`	Declares the type of a preloaded resource.
`blocking`	render	Marks a resource as render-blocking.
`crossorigin`	`anonymous (default when present)` `use-credentials`	Sets the CORS mode for fetching the resource.
`disabled`	A boolean attribute — present or absent.	Disables a form control.
`href`	A URL — absolute, relative, or a special scheme such as `mailto:`, `tel:` or a `#fragment`.	Specifies the URL a hyperlink points to.
`hreflang`	A BCP 47 language tag, e.g. `en`, `fr`, `pt-BR`.	States the language of the linked document.
`imagesizes`	A sizes string — media-condition / length pairs.	Sets the sizes hint for a preloaded image.
`imagesrcset`	A srcset string — comma-separated "URL descriptor" pairs.	Sets a responsive srcset for a preloaded image.
`integrity`	One or more hashes prefixed by algorithm, e.g. `sha384-…`.	Verifies a resource against a hash (SRI).
`media`	A media query, e.g. `(min-width: 600px)` or `print`.	Applies the resource to matching media only.
`referrerpolicy`	`no-referrer` `no-referrer-when-downgrade` `origin` `origin-when-cross-origin` `same-origin` `strict-origin` `strict-origin-when-cross-origin (default)` `unsafe-url`	Controls the Referer header sent for the request.
`rel`	A space-separated list of link types, e.g. `nofollow`, `noopener`, `noreferrer`, `stylesheet`, `preload`, `canonical`, `icon`, `sponsored`, `ugc`.	Defines the relationship to the linked resource.
`sizes`	A comma-separated list of media-condition / length pairs, e.g. `(max-width:600px) 480px, 1080px`.	Defines image display size for srcset selection.
`type`	A MIME type such as `text/css` or `image/webp` — or `module` on a `<script>`.	Specifies the MIME type of a resource.

Example

Live example

<link rel="icon" href="https://codeshack.io/web/img/icon.png">

Best practices

Use the right rel value — stylesheet, icon, canonical or a performance hint.
Pair rel="preload" with the as attribute so the browser prioritizes correctly.
Secure cross-origin resources with crossorigin and integrity (Subresource Integrity).
Add a rel="canonical" link to declare the preferred URL of duplicate-content pages.

Frequently asked questions

What is the link element for?

To connect the document to external resources — stylesheets, icons, canonical URLs and performance hints — via its rel attribute.

How do I add a stylesheet in HTML?

Use <link rel="stylesheet" href="styles.css"> in the <head>.

How do I set a favicon?

Use <link rel="icon" href="favicon.ico"> (or a PNG/SVG icon) in the head.

What does rel="preload" do?

It tells the browser to fetch a resource early with high priority. Pair it with the as attribute so the resource is prioritized and cached correctly.

li main

References