Links & Favicons
Overview
The <link> tag is completely unrelated to clickable hyperlinks (that is the <a> tag). Instead, <link> is used exclusively in the <head> to establish critical external relationships between your HTML document and external resources. It is most commonly used to import massive CSS stylesheets, pre-connect to external servers to reduce latency, and establish Favicons (the tiny icons that appear in the browser tab).
Syntax
<head>
<!-- Importing a standard CSS stylesheet -->
<link rel="stylesheet" href="/styles/main.css">
<!-- Establishing the Favicon (Browser Tab Icon) -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- High-res Favicon for Apple devices (Home Screen bookmarks) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Performance Optimization: Pre-connecting to an external API server -->
<link rel="preconnect" href="https://api.mybackend.com">
</head>Common Pitfalls
- Using
<link>in the<body>. The HTML specification strictly requires<link>tags to exist exclusively inside the<head>. - Using the wrong
relattribute. Therel(relationship) dictates how the browser processes the file. If you link a CSS file but setrel="icon", the browser will ignore the CSS entirely.
Interview Questions
<link rel="preload"> do?It is an aggressive performance optimization. It tells the browser's parser to immediately start downloading a critical resource (like a specific font or hero image) in the background before the browser even realizes it needs it.
Real-World Example
Optimizing Google Fonts loading using modern preconnects.
<head>
<!-- Tells the browser to establish the DNS/TCP connection early -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Now the actual font stylesheet downloads significantly faster -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
</head>Check Your Knowledge
Test your understanding of Links & Favicons with these quick questions.