HTML Title and Favicon: Page Titles, Tabs, and Site Icons

The title and favicon are two of the most visible parts of an HTML page. The title tells browsers, search engines, and assistive technologies what the page is about, while the favicon gives the page a recognizable icon in tabs, bookmarks, and search results.

Quick answer: Put a unique <title> element inside <head> for the page title, and add a favicon with <link rel="icon">. Both belong in the document head, not in the visible page content.

Difficulty: Beginner

You'll understand this better if you know: basic HTML document structure, what the <head> element is for, and how browsers display tabs and bookmarks.

1. What Is the HTML Title and Favicon?

The page title is the text inside the <title> element. Browsers usually show it in the tab, window title, bookmarks, and search snippets. The favicon is a small icon that represents the page or site visually.

<title> defines the document title.
The title belongs in the <head> section.
The favicon is usually linked with <link rel="icon">.
Both help users identify a page quickly.

These elements do not appear in the main page content, but they strongly affect how the page is perceived outside the content area.

2. Why Title and Favicon Matter

The title is one of the most important HTML elements for usability and SEO. It helps users decide whether a tab, bookmark, or search result matches what they need.

The favicon improves recognition. When someone has many tabs open, a familiar icon is often easier to spot than text alone.

They make pages easier to recognize.
They improve accessibility and browser navigation.
They help search engines and bookmarks present your page clearly.
They create a more polished site experience.

A good title and favicon do not replace good page content, but they make the content easier to find and return to.

3. Basic Syntax or Core Idea

The most basic setup uses one <title> element and one favicon link inside the document head.

Minimal example

This example shows the two core pieces together.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Acme Bakery</title>
    <link rel="icon" href="/favicon.ico">
  </head>
  <body>
    <h1>Welcome to Acme Bakery</h1>
  </body>
</html>

The <title> text becomes the browser title, and the <link rel="icon"> points to the icon file the browser should use.

4. Step-by-Step Examples

Example 1: A simple page title

Use a clear, page-specific title that tells users exactly what the page is about.

<head>
  <title>Contact Us | Acme Bakery</title>
</head>

This title is useful because it includes the page name and the site name.

Example 2: A favicon with the standard icon relation

Browsers look for the icon reference in the head. A favicon can be an .ico, .png, or other supported image type.

<head>
  <title>Home | Acme Bakery</title>
  <link rel="icon" href="/assets/favicon.png">
</head>

This shows the common pattern for modern websites: one title plus one icon file.

Example 3: Different titles for different pages

Every page should have its own title so users can distinguish tabs and search results.

<head>
  <title>Menu | Acme Bakery</title>
</head>

A unique title helps people know whether they are on the menu page, contact page, or product page.

Example 4: Favicon for bookmarks and home-screen shortcuts

Some platforms use the same icon in bookmarks, pinned tabs, or shortcuts. A well-prepared icon file increases consistency.

<head>
  <title>Order Online | Acme Bakery</title>
  <link rel="icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

This example adds a second icon for Apple touch shortcuts while keeping the main favicon in place.

5. Practical Use Cases

Give each product page a descriptive title so shoppers can return to it later.
Brand a documentation site with a favicon that appears consistently in many open tabs.
Use distinct titles for blog posts so search results are easier to scan.
Add a touch icon for users who save your site to a mobile home screen.
Improve accessibility by making the page purpose clear in browser history and screen reader tab lists.

6. Common Mistakes

Mistake 1: Putting the title in the body

The page title only works correctly when it is inside <head>. Putting it in the visible content does not set the browser title.

Problem: This looks like a title to a beginner, but browsers treat it as plain page content instead of the document title.

<body>
  <title>About Us</title>
</body>

Fix: Move the title into the head.

<head>
  <title>About Us</title>
</head>

The corrected version works because browsers read the title from the head metadata.

Mistake 2: Reusing the same title on every page

A repeated title makes tabs and search results harder to distinguish. It also makes it more difficult for screen reader users to identify where they are.

Problem: These pages all look identical in the browser title bar, so users cannot tell one page from another.

<head>
  <title>My Site</title>
</head>

Fix: Make the title specific to the current page.

<head>
  <title>Pricing | My Site</title>
</head>

The corrected version works because each tab now communicates a unique page identity.

Mistake 3: Forgetting the favicon path or using the wrong file location

Browsers may silently ignore an icon when the file path is wrong. In that case, the page often falls back to a default icon or no visible icon at all.

Problem: The file path points to a location that does not exist, so the browser cannot load the icon.

<head>
  <title>Dashboard | My Site</title>
  <link rel="icon" href="/images/favicon.png">
</head>

Fix: Point href to the actual file location and confirm the file exists.

<head>
  <title>Dashboard | My Site</title>
  <link rel="icon" href="/favicon.png">
</head>

The corrected version works because the browser can actually retrieve the icon file.

7. Best Practices

Use descriptive, page-specific titles

A title should describe the exact page, not just the whole site. This helps users, search engines, and screen readers.

<title>Shipping Policy | Acme Bakery</title>

This is better than a vague title like “Home” for every page.

Keep titles concise but meaningful

Long titles can be cut off in tabs and search results. A short, useful title is easier to read at a glance.

<title>Cake Orders | Acme Bakery</title>

This gives enough context without being unnecessarily long.

Provide a real icon file at a stable path

Browsers often cache favicons aggressively, so changing the icon may not show immediately. Use a stable, correct path and update carefully.

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

This approach is simple and reliable for most sites.

8. Limitations and Edge Cases

Some browsers cache favicons heavily, so a new icon may not appear right away.
The browser may choose a different icon format depending on platform support.
Very small icon files can look blurry on high-resolution displays if they are not prepared well.
Search engines may rewrite or shorten titles in results, so the displayed snippet may differ from your exact <title>.
If a page is loaded inside a frame or is dynamically updated, the visible tab title may not change unless the document title itself changes.

If a favicon appears to be “not working,” the cause is often caching, an incorrect file path, or a file type the browser does not prefer.

9. Practical Mini Project

Here is a small complete example for a bakery website homepage. It includes a page title, a favicon, and accessible document structure.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Home | Acme Bakery</title>
    <link rel="icon" href="/favicon.ico">
  </head>
  <body>
    <header>
      <h1>Acme Bakery</h1>
    </header>
    <main>
      <p>Fresh bread, cakes, and pastries baked daily.</p>
    </main>
  </body>
</html>

This example shows the typical relationship: the visible page content lives in the body, while the title and favicon live in the head.

10. Key Points

The <title> element sets the document title shown by browsers and search tools.
The favicon is linked with <link rel="icon">.
Both belong inside <head>.
Each page should have a unique, descriptive title.
Favicon problems usually come from caching, path mistakes, or unsupported icon files.

11. Practice Exercise

Create a simple HTML page for a blog post called “Getting Started with Bread Baking.”
Write a unique title that includes both the post name and the site name.
Add a favicon link pointing to /favicon.ico.
Make sure both elements are inside <head>.

Expected output: The browser tab should show a specific page title, and the site should display a favicon if the file exists at the path you chose.

Hint: Use a title like Getting Started with Bread Baking | My Blog.

Solution:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Getting Started with Bread Baking | My Blog</title>
    <link rel="icon" href="/favicon.ico">
  </head>
  <body>
    <main>
      <h1>Getting Started with Bread Baking</h1>
      <p>Learn the basics of baking bread at home.</p>
    </main>
  </body>
</html>

12. Final Summary

The HTML title and favicon are small pieces of markup with a big effect on usability. The title tells browsers and search engines what the page is about, and the favicon gives users a quick visual cue for identifying your site.

Use a unique <title> for every page, keep it inside the <head>, and point <link rel="icon"> to a real icon file. When these elements are set up well, your pages become easier to navigate, easier to bookmark, and more professional overall.

If you want to go further, next learn how <meta name="description"> works alongside the title to improve page metadata.