Platform under construction

HTML Links & Media

Intermediate

Favicon & Page Title

Learn Favicon & Page Title with practical HTML examples for navigation, images, alt text, media behavior, metadata, accessibility, SEO and live practice.

<title>HTML Links & Media | Full Stack Masterclass</title>
<link rel="icon" href="/favicon.ico">

HTML links and media

The page title and favicon give a website identity outside the page.

The title element appears in browser tabs, bookmarks, history and search results. It is one of the most important metadata elements in HTML.

A favicon is the small icon browsers show in tabs, bookmarks and other surfaces. It helps users recognize the site quickly.

This topic sits in links and media because it connects HTML metadata, icons, brand recognition and search presentation.

title

The browser tab title and a strong page identity signal.

link rel="icon"

Connects a favicon or icon file.

apple-touch-icon

Icon used by Apple devices when saving a page.

Search snippets

Titles influence how search results are understood.

Syntax and structure

Title and icon links belong in head.

The title should identify the page. Icon links should point to real icon files in useful sizes and formats.

Clear title and icon metadata

<head>
  <title>HTML Links & Media | Full Stack Masterclass</title>
  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

Generic or missing identity

<head>
  <title>Home</title>
  <link rel="icon" href="missing.png">
</head>

<title>Best HTML Course HTML Tutorial Learn HTML Online HTML</title>

Rules that matter

Links and media should be useful, stable and understandable.

Clickable and visual HTML affects how people move, scan, trust and share a page. The details are small, but the user experience impact is large.

Write specific titles

Every page should have a title that identifies that page, not only the site.

Keep titles readable

Do not stuff repeated keywords into the title.

Use real icon files

Broken favicon paths look careless.

Support common formats

ICO, SVG and PNG touch icons can cover many browsers and devices.

Place in head

Title and icon links are metadata, not visible body content.

Match the brand

The icon should be recognizable at very small sizes.

Production thinking

Navigation, images and metadata are part of product quality.

Why does this matter?

This matters because the website is not only seen inside the viewport. Tabs, bookmarks, history, search results and shared links all need a clear identity.

Accessibility

The title helps users identify the current tab or window. This matters when several tabs are open.

Production note

Test icons in real browsers. A favicon that works in one place can still fail in pinned tabs, bookmarks or mobile home screens.

SEO note

A clear title can improve search result clarity and click-through. Write for humans first, with the primary topic naturally included.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Rewrite the title example so it names a specific page.
Add a second icon link for an SVG favicon.
Run the preview and explain why these tags belong in head.

Practice assignment

Do this before moving to the next lesson.

Write a title for a homepage, article page and course lesson.
Add favicon links for ICO, SVG and apple touch icon.
Explain how page title and favicon help users outside the page itself.

HTML CSS

Live preview

Self-check

Before you continue, prove that you own this lesson.