HTML Titles and Favicons

Give your website an identity with the <title> and <link> tags.

Titles & Favicons in HTML

Titles and Favicons are essential for improving your website's appearance and SEO. Let's learn how to add them!

The <title> Element

The <title> tag defines the page title. This is the text shown in the browser tab and used by search engines. It's crucial for SEO and user experience.

The <link> Element for Favicons

The <link rel="icon" href="..."> tag specifies the page's favicon. This small icon helps users identify your site in a list of tabs or bookmarks.

Purpose and SEO

A clear title and a recognizable favicon improve your site's visual identity, aid in navigation, and contribute positively to your SEO by making your site stand out.

Practice Zone


Interactive Test 1: Drag & Drop

Arrastra en el orden correspondiente.


Arrastra las opciones:

<title>
<link rel="icon" href="

Completa el código:

______My Website</title>
______todotutorial-logo.WebP">

Interactive Test 2: Fill in the Blanks

Rellena los huecos en cada casilla.

<head>
  <title></title>
  <link rel="icon" href="">
</head>

Practice Example: Code Editor

Write the HTML code to define your website's title as "My Website" and set a favicon.

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Website</title> <link rel="icon" href="todotutorial-logo.WebP"> </head> <body> <h1>Welcome to my website</h1> </body> </html>

Knowledge Check

Which of the following elements is NOT directly related to defining the favicon?