HTML Titles & Favicons: Your Site's First Impression

Give your website a memorable identity with the <title> tag and a custom favicon.

🏷️

Welcome! Let's learn how to give your website a unique identity using titles and favicons.

/* Every site needs an identity... */

The All-Important <title> Tag

The <title> tag is a required element that defines the title of your document. This text appears in the browser's title bar or tab, and is also used by search engines for their results pages. It must be placed within the <head> section.

Adding Your Brand's Favicon

A favicon (short for "favorite icon") is the small icon displayed next to the page title in a browser tab. It's a key part of your site's branding. You add it using the <link> tag with the attribute rel="icon", also inside the <head>.

Why It Matters: SEO & User Experience

A clear, descriptive title is crucial for SEO (Search Engine Optimization), helping search engines understand your page's content. A unique favicon improves UX (User Experience) by making your site easily recognizable among many open tabs.

Practice Zone

Interactive Test 1: Place The Tags

Drag the correct elements into the <head> section to give the page a title and a favicon.

Arrastra en el orden correspondiente.

Arrastra las opciones:

<title>My Awesome Site</title>

<h1>Welcome</h1>

Completa el código:

Unlock with Premium

Interactive Test 2: Complete the Code

Complete the code to set the page title and link a favicon.

Rellena los huecos en cada casilla.

<head>
  <>My Title</>
  <link rel="" href="icon.png">
</head>

Unlock with Premium

Practice Example: Code Editor

Create a complete HTML document. Set its title to "Portfolio" and link a favicon located at `images/icon.png`.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<!DOCTYPE html>
<html>
<head>
    <title>Portfolio</title>
    <link rel="icon" href="images/icon.png">
</head>
<body>
    <h1>My Work</h1>
</body>
</html>

Unlock with Premium

Knowledge Check

Where must the <title> tag be placed in an HTML document?

Unlock with Premium

Bringing Your HTML to Life

HTML provides the structure, but its true power is unlocked when combined with CSS for styling and JavaScript for interactivity. Here’s how they connect.

Practical Takeaway: HTML is the skeleton, CSS is the clothing, and JavaScript is the brain. Understanding how they connect through the DOM is the cornerstone of modern web development.

Core Tags Glossary

<head>: A container for metadata (data about the page) that is not displayed, like the title, character set, styles, and scripts.
<body>: Contains all the visible content of a webpage—headings, paragraphs, images, etc.
<title>: Sets the title of the page, which appears in the browser tab and is crucial for SEO.
<link>: Defines a link between the current document and an external resource. Used for stylesheets (CSS) and favicons.
<meta>: Provides metadata such as character encoding (`UTF-8`), page description, and viewport settings.