Page Titles and Favicons
What Is It?
A title names the browser tab. A favicon is the small icon shown beside that title.
What the Tags Mean
title: the tab name.link rel="icon": the icon file.h1: the visible page heading.
Example 1
Save each example as index.html and open it in your browser. Each code block is a complete page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My learning page</title>
</head>
<body>
<h1>My example page</h1>
<p>Look at the browser tab to check the title or icon. Meta tags describe the page without adding visible text.</p>
</body>
</html>Browser preview
What you see: The browser tab says My learning page. It does not add text to the body.
Example 2: Another Use
This example includes a small SVG icon directly in the page. Look for it beside the tab title.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Titles and Favicons</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%22200%22%20viewBox%3D%220%200%2032%20200%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22lightblue%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%22100%22%20font-size%3D%2224%22%3EH%3C%2Ftext%3E%3C%2Fsvg%3E" type="image/svg+xml">
</head>
<body>
<h1>My example page</h1>
<p>Look at the browser tab to check the title or icon. Meta tags describe the page without adding visible text.</p>
</body>
</html>Browser preview
Simple Tip
A title and an h1 do different jobs. Use both.
Try It Yourself
Give your page a short title that tells readers what it is about.