Icons, Stylesheets and Resource Hints

Use the head's link tags to give a page its tab icon and its stylesheet, and to tell the browser early about the few files it needs first.

Journeyman · HTML · Web Development · Updated October 31, 2026

After this lesson you can

Add a favicon and a stylesheet with link, and explain why the stylesheet goes in the head
Use preload and preconnect for the few files a page needs first

Key takeaways

A link tag names a file and how it relates to the page. rel says what the file is for, and href says where it is.
rel="icon" gives a page its favicon. Link an SVG with type="image/svg+xml" and a PNG, and each browser uses one it can show.
The browser won't show a page until its stylesheets arrive, which is why stylesheets belong in the head, where they're found first.
rel="preload" fetches a file the browser would find late, such as a font. rel="preconnect" opens the connection to another site early.
Every hint competes with the page's other files, so give hints to the one or two files or sites that matter most.

Look at the tabs open in your browser right now. Every site you trust has its little picture there, and the one with a blank page icon looks unfinished. That picture, a page's stylesheet, and a font that shows up late are all decided by the same few lines at the top of the HTML. Every website template you download, every page a framework builds for you, starts with five or ten of these lines, and once you can read them you'll know which ones to keep, which to fix, and which are doing nothing.

The head is the page's packing list

Before a trip you might keep a packing list on the fridge, each line a thing and what it's for: "sunscreen, for the beach". Nothing on the list is the trip itself, but without it you'd arrive without half of what you need.

The head is the page's packing list. Nothing in it shows on the page, but it tells the browser what to bring along. The <link> element is one line on that list:

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

href (read "H-ref", short for hypertext reference) says where the file is.
rel (short for relationship) says what the file is to this page. Its value is a link relationship: stylesheet, icon, preload, preconnect and about twenty more.
<link> is a void element: it has no closing tag.

A favicon for the tab

A page's favicon (from favorites icon, from the days when bookmarks were called favorites) is the small picture in its browser tab, its bookmarks and its history. When a page doesn't name one, the browser asks for /favicon.ico on its own, and that's the 404 you can see in the Network panel of a page with no icon.

<link rel="icon" href="favicon.png" sizes="32x32" type="image/png">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

The SVG is a drawing made of shapes rather than dots, so it stays sharp at any size, and a simple one is tiny (the Movie Night Club's is under half a kilobyte).
The PNG is the fallback: a 32-by-32-pixel picture, for browsers that don't show SVG icons. sizes says how big it is.
type says what kind of file each one is, so a browser can skip a file it can't use without downloading it.

Browsers that can show an SVG icon use it, and the rest use the PNG. If you'd like the icon on an iPhone's home screen when someone saves your page there, add one more line: <link rel="apple-touch-icon" href="apple-touch-icon.png">, pointing at a 180-by-180-pixel PNG.

Try it. Make a 32-by-32-pixel picture in any drawing app (Paint on Windows or Preview on a Mac can resize one), save it as favicon.png beside one of your pages, link it with rel="icon", and reload. Look at the tab, then at the Network panel: the 404 has gone.

Stylesheets hold up the curtain

A theater doesn't raise the curtain until the set is built. If it did, the audience would watch stagehands carrying furniture across the stage.

The browser works the same way with stylesheets. It won't render the page (draw it on the screen) until it has every stylesheet linked in the head, so stylesheets are render-blocking. That's on purpose: without it, you'd see a plain, unstyled page flash on the screen and then jump into shape. The parser keeps reading while a stylesheet downloads; it's only the showing that waits.

<head>
  <meta charset="utf-8">
  <title>Movie Night Club</title>
  <link rel="stylesheet" href="style.css">
</head>

That's why stylesheets belong in the head: there the browser finds them first and starts downloading them straight away. It's also why a big stylesheet, or one from a slow site, holds up the whole page, and why Render-blocking requests is one of the first suggestions Lighthouse makes.

preload: fetch it now, you'll need it soon

Planning a party, you might phone the bakery in the morning to set a cake aside, and collect it later. Preload does that for a file: it tells the browser to start downloading a file now, because the page will need it soon.

It's for files the browser would otherwise find late, such as a font file named inside a stylesheet, or a big picture that the stylesheet sets as a background:

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

as says what kind of file it is (font, image, style, script). Without it, the preload doesn't do its job: the browser warns in the Console, and the file can end up downloaded twice.
crossorigin is needed on a font preload, even for a font on your own site. Browsers always fetch fonts in a special cross-origin mode, and a preload without the attribute doesn't match, so the font downloads twice.
A preloaded file must be used. If nothing uses it within a few seconds of the page loading, Chrome's Console warns you that it was preloaded and not used.

A picture written as an <img> near the top of the page doesn't need a preload: the browser finds it early by itself. If it's the most important picture on the first screen, add fetchpriority="high" to the <img> instead.

preconnect: open the line early

Before the browser can download anything from another site, it has to find that site on the internet and set up a secure connection to it. That's a few trips back and forth, and on a slow phone connection it can take half a second before the first byte of the file arrives. It's like phoning a busy help line: the time goes on getting through, not on the call.

Preconnect tells the browser to get through early, while it's busy with other things:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap">

A preconnect names a site, not a file: only https:// and the site's name. Here it's fonts.gstatic.com, where Google keeps its font files, and the one the browser would otherwise find last (How a Page Loads showed why). It needs crossorigin for the same reason a font preload does. Google Fonts' own copy-and-paste code includes a preconnect for each of its two sites; the one that pays off most is fonts.gstatic.com.

Preload and preconnect are resource hints: they add nothing to the page, they tell the browser what's coming.

Fewer hints beat more

Tell a waiter that every dish is urgent and none of them is. Every preload shares the same connection as the page's other files, so preloading ten files slows down the two that mattered. A preconnect that's never used keeps a connection open for about ten seconds and then throws it away.

Preload one or two files that the first screen needs and the browser finds late, usually a font.
Preconnect to the one or two other sites the first screen needs files from.
Measure before and after in the Network panel. If the waterfall doesn't change, take the hint out.

Try it. Open a site you use often, open the Elements panel of the developer tools, and look at its head. Count its <link> tags and sort them by their rel: how many stylesheets, icons and hints does it have?

Check yourself

2 questions to try on the lesson page.

So what

The head is short, but it decides what a visitor sees first and how soon: an icon that makes the tab look finished, a stylesheet that arrives before the curtain goes up, and one or two hints that get the important files moving early.

Key terms

Cheat sheets