HTML Titles & Favicons: Your Site's First Impression

Discover the most critical tags in your HTML <head>. Learn how <title> and `<link rel="icon">` define your site's identity for users, search engines, and browser tabs.

Lesson ProgressStep 1 of 8
New Tab

My Awesome Page

https://www.example.com

Learn about my awesome page...
⭐ 0 EXP

Welcome! Let's give your website an identity. We'll focus on the <head> section, the 'brain' of your page.

The <title> Tag: Your Page's Identity

The <title> tag is a **required** element that defines the title of your document. It must be placed inside the <head>section.

This text doesn't appear on the page itself. Instead, it's used in three key places:

  • Browser Tabs: Allows users to identify your page.
  • Search Engine Results: Used as the main clickable link.
  • Bookmarks: Used as the default name when a user saves your page.
<head>
  <title>My First Website | Home</title>
</head>

System Check

Where does the text from the <title> tag primarily appear for a user?

Advanced Holo-Simulations

⭐ 0 EXP

Log in to unlock these advanced training modules and test your skills.

Achievements

🆔
Identity Expert

Successfully set a page title and link a favicon.

🧠
<head> Master

Correctly structure the <head> element with metadata.

📈
SEO Starter

Write a well-formed, descriptive <title> tag.

Mission: Establish Site Identity

Inside the <head> tag, add a <title> with the text "My Portfolio" and link a favicon located at `favicon.png`.

A.D.A. Feedback:

> System integrity looks stable. All required tags detected.

Challenge: Organize the <head>

Order matters in the <head> for performance and correctness. Drag these tags into the most logical order.

<head>
<link rel='stylesheet' href='style.css'>
<meta charset='UTF-8'>
<script src='app.js'></script>
<title>My Website</title>
</head>

Challenge: Complete the Syntax

Fill in the missing tag and attribute names to complete the <head>setup.

<head>
<>My Site</>
<link="icon"="logo.svg">
</head>

Consult A.D.A.

Unlock with Premium

Community Holo-Net

Peer Project Review

Submit your "Site Identity" project for feedback from other Net-Runners.

Your Site's Digital Handshake: Mastering <title> & Favicon

In the vast, crowded space of the internet, your website's first impression is often made before a user even sees your content. This impression happens in a browser tab, a bookmark list, or a search engine results page (SERP). The two tiny, crucial pieces of HTML that control this "digital handshake" are the <title> tag and the favicon. Mastering them is one of the easiest and most high-impact steps you can take.

The <title> Tag: Your Page's Official Name

The <title> tag is a **required** element inside the<head> section. It does not appear on the webpage itself, but it's arguably one of the most important tags for usability and SEO.

Its content is used in three primary locations:

  • 1. Browser Tabs: This is the most obvious one. The title is displayed in the tab, allowing users to identify your page among many others. A clear title like "Gmail - Inbox (12)" is far more useful than "Untitled Document".
  • 2. Search Engine Results: This is the big one for SEO. The <title> is what Google and other search engines use as the main clickable blue link in their search results. A compelling, descriptive title is your #1 tool for earning a click.
  • 3. User Bookmarks: When a user bookmarks your page, the <title> content is what's saved as the default name for that bookmark.

SEO Best Practices for Titles

✔️ Good Title

<title>HTML Favicon Guide: How to Add an Icon | MySite</title>

~60 chars, main keywords first, descriptive, includes brand.

❌ Bad Title

<title>Home Page</title>

Not descriptive, no keywords, generic. Wasted SEO opportunity.

Keep your titles between **50-60 characters**. Anything longer will get cut off ("...") by Google. Always put your most important keywords at the *beginning* of the title, and end with your brand name if space allows.

The Favicon: Your Site's Tiny Ambassador

A favicon (short for "favorite icon") is the small icon that appears next to your title in the browser tab. It's a powerful branding tool that builds recognition and trust.

You add it using a self-closing `<link>` tag, also in the<head>:

<link rel="icon" href="path/to/favicon.ico">

Let's break that down:

  • `<link>`: The tag for linking external resources.
  • `rel="icon"`: The **relationship** attribute. This is the magic part that tells the browser "this resource is an icon".
  • `href="..."`: The path to your icon file.

The Modern Favicon: Beyond `.ico`

While the `.ico` file format is the classic, browsers today are much smarter. You can (and should) use modern formats like `.png` or even ` .svg` for a crisp, scalable icon.


<link rel="icon" type="image/png" href="/favicon.png">


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


<link rel="apple-touch-icon" href="/apple-icon.png">

For a truly robust setup, you might even provide multiple sizes using the `sizes` attribute (e.g., `sizes="32x32"`), and an `apple-touch-icon` for iOS devices.

Key Takeaway: Never neglect the <head>. The <title> and <link rel="icon"> tags are your site's business card. They take minutes to implement and have a massive, lasting impact on your SEO, user experience, and brand identity.

Site Identity Glossary

<head>
The container element for all metadata (data *about* the page). Its content is not displayed on the page itself.
Metadata
Information that describes the HTML document, such as the title, character set, stylesheets, and scripts.
<title>
A required tag within the <head> that defines the title of the document. This text is shown in browser tabs, search results, and bookmarks.
Favicon
Short for "favorite icon." A small icon file associated with a website, displayed in the browser tab and bookmark lists.
`<link>`
A self-closing tag that defines the relationship between the current document and an external resource. Used for stylesheets, favicons, and more.
`rel`
An attribute for the `<link>` tag that specifies the **relationship** of the linked resource. `rel="icon"` tells the browser the resource is a favicon.
`href`
An attribute that specifies the URL (path) of the resource being linked (e.g., the path to the icon file or CSS file).
SEO
Search Engine Optimization. The practice of optimizing a website to rank higher in search engine results (like Google). The <title>tag is a primary factor in SEO.
SERP
Search Engine Results Page. The page you see after performing a search on Google, Bing, etc. The <title> becomes the main clickable link on this page.
`apple-touch-icon`
A specific `rel` attribute value used to provide a high-resolution icon for when users add your webpage to their home screen on iOS devices (iPhone/iPad).

Credibility and Trust

About the Author

Author's Avatar

Todotutorial Team

Passionate developers and educators making programming accessible to everyone.

This article was written and reviewed by our team of web development experts, who have years of experience teaching HTML and building robust and accessible web applications.

Verification and Updates

Last reviewed: October 2025.

We strive to keep our content accurate and up-to-date. This tutorial is based on the latest HTML5 specifications and is periodically reviewed to reflect industry best practices.

External Resources

Found an error or have a suggestion? Contact us!