Learn HTML Head & Favicon Explained — Meta Tags, Title & Style Guide

Q: Does meta description affect search rankings?

Not directly as a ranking factor, but it affects CTR (click-through rate) — a good description gets more clicks, which indirectly helps rankings.

Frontend Development

HTML Tutorials

HTML Head & Favicon Explained — Meta Tags, Title & Style Guide

DodaTech Updated Jun 6, 2026 8 min read

The HTML <head> section contains metadata — information about your page that browsers, search engines, and social media platforms use but visitors don’t see directly on the page.

What You’ll Learn

By the end of this tutorial, you’ll know what goes inside <head>, how to use meta tags for SEO and social sharing, how to add a favicon, and the HTML style guide for writing clean, maintainable code.

Prerequisite: You should know basic HTML page structure. If not, start with HTML Basics.

Why the Head Section Matters

Think of <head> like a product label. When you buy a product, the label tells you what it is, what’s inside, who made it, and how to use it. The <head> tells browsers, search engines, and social media platforms the same things about your page.

Security note: Understanding Html Head helps build more secure applications — a core principle at DodaTech, where tools like Durga Antivirus Pro and Doda Browser rely on solid implementation practices.

Real-world use: The <title> shows in browser tabs and search results. Meta descriptions affect whether people click your link. Open Graph tags control how your page looks when shared on Facebook or Twitter. Favicon is that tiny icon in your browser tab.

Where This Fits in Your Learning Path

    flowchart LR
    A["File Paths"] --> B["**Head & Favicon**"]
    B --> C["Entities & Symbols"]
    C --> D["Responsive HTML"]
    D --> E["Graphics & Media"]
    E --> F["Complete HTML Knowledge"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style F fill:#22c55e,stroke:#16a34a,color:#fff

The Head Section at a Glance

Here’s a typical <head> section with all the important elements:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page Title - Site Name</title>
  <meta name="description" content="A brief description of the page for search results.">
  <meta name="robots" content="index, follow">
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

Let’s explore each element in detail.

The `<title>` Element — Your Page’s Name

The <title> is the most important meta element. It appears in three places:

Browser tab — Users see it when they open your page
Search results — Google shows it as the clickable blue link
Bookmarks — It’s the default name when users bookmark your page

<title>HTML Tutorials - DodaTech</title>

Best practices:

Include the primary keyword near the beginning
Keep it under 60 characters (Google truncates longer titles)
End with your brand name (for recognition)
Make it descriptive and compelling

Meta Tags — The Most Important Ones

Meta tags provide structured information about your page. Here are the essential ones:

1. Character Encoding (`charset`)

<meta charset="UTF-8">

This is the first element in <head>. It declares that the page uses UTF-8 encoding, which supports all characters from all languages, plus emojis. Without it, special characters may show as garbled text.

2. Viewport (Mobile Responsiveness)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This makes your page look good on mobile devices. Without it, phones would display your page zoomed out and tiny. This single tag is responsible for responsive web design.

3. Description (SEO)

<meta name="description" content="Learn HTML with interactive tutorials and live code sandboxes at DodaTech.">

This description often appears beneath the title in Google search results. It should be 140-165 characters, include your keyword naturally, and convince users to click.

4. Robots (Search Engine Crawling)

<meta name="robots" content="index, follow">

index — Allow Google to include this page in search results
follow — Allow Google to follow links on this page
noindex — Hide this page from search results
nofollow — Don’t follow links on this page

5. Open Graph (Social Sharing)

When someone shares your page on Facebook, Twitter, LinkedIn, or any social platform, Open Graph tags control how it appears:

<meta property="og:title" content="HTML Tutorials - DodaTech">
<meta property="og:description" content="Learn HTML with interactive tutorials.">
<meta property="og:image" content="https://tutorials.dodatech.com/og-image.jpg">
<meta property="og:url" content="https://tutorials.dodatech.com/">
<meta name="twitter:card" content="summary_large_image">

Without these tags, social platforms guess what to show — they often get it wrong, picking the wrong image or text.

Favicon — The Tiny Tab Icon

A favicon (short for “favorite icon”) is the small image shown in the browser tab, bookmarks bar, and history:

<!-- Basic favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon">

<!-- PNG favicon (modern browsers) -->
<link rel="icon" href="favicon.png" type="image/png">

<!-- Apple touch icon (iOS home screen) -->
<link rel="apple-touch-icon" href="apple-icon.png">

<!-- Multiple sizes for different devices -->
<link rel="icon" href="favicon-16x16.png" sizes="16x16">
<link rel="icon" href="favicon-32x32.png" sizes="32x32">

Use a favicon generator (like realfavicongenerator.net) to create all required sizes and declarations. It generates the HTML for you.

The `<link>` Element — Connecting to External Resources

The <link> element connects your HTML to external files. The most common uses:

<!-- External CSS -->
<link rel="stylesheet" href="styles.css">

<!-- Favicon -->
<link rel="icon" href="favicon.ico">

<!-- Preconnect to external domains (performance) -->
<link rel="preconnect" href="https://fonts.googleapis.com">

<!-- Preload a key resource -->
<link rel="preload" href="hero-image.webp" as="image">

HTML Style Guide — Writing Clean Code

Following a consistent style makes your HTML easier to read, maintain, and debug:

Rule	✅ Good	❌ Bad
Declare DOCTYPE	`<!DOCTYPE html>`	Missing
Use lowercase tags	`<div>`	`<DIV>`
Close all tags	`<p>content</p>`	`<p>content`
Quote attributes	`class="card"`	`class=card`
Indent nested elements	2-space indentation	No indentation
Use semantic tags	`<article>`, `<nav>`	`<div class="article">`
Specify `alt` on images	`alt="Description"`	Missing
Validate HTML	Check with validator	Unclosed tags

Common Head Section Mistakes

1. Forgetting the Viewport Meta Tag

<!-- ❌ Wrong: page won't be responsive on mobile -->
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>

<!-- ✅ Correct: viewport enables mobile responsiveness -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
</head>

2. Putting Charset After Other Elements

<!-- ❌ Wrong: charset should be first -->
<head>
  <title>My Page</title>
  <meta charset="UTF-8">
</head>

<!-- ✅ Correct: charset is first -->
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>

The charset meta tag should be the first element in <head> — the browser needs to know the encoding before reading other content.

3. Missing or Duplicate Title

<!-- ❌ Wrong: no title or multiple titles -->
<head>
  <title>Page</title>
  <title>Another Title</title>
</head>

<!-- ✅ Correct: exactly one title -->
<head>
  <title>Page Title - Site Name</title>
</head>

4. Forgetting Open Graph Tags

Without Open Graph tags, social sharing looks unprofessional — wrong image, missing description, or random text.

5. Not Having a Favicon

A missing favicon means a blank or default icon in browser tabs. It looks unprofessional and missed the opportunity for brand recognition.

Try It Yourself

View the head section of this page by right-clicking and selecting “View Page Source”:

▶ Try It Yourself Edit the code and click Run

Common Mistakes Beginners Make

1. Skipping the Fundamentals

Many beginners jump straight to advanced topics without mastering the basics. Take time to understand the core concepts before moving on.

2. Not Practicing Enough

Reading tutorials without writing code leads to shallow understanding. Code along with every example and experiment on your own.

3. Ignoring Error Messages

Error messages tell you exactly what went wrong. Read them carefully — they usually point to the line and type of issue.

4. Copy-Pasting Without Understanding

It’s tempting to copy code from tutorials, but typing it yourself and understanding each line builds real skill.

5. Giving Up Too Early

Every developer hits frustrating bugs. Take breaks, ask for help, and remember that struggling is part of learning.

Practice Questions

Q1: What is the first element that should appear inside <head>?

<meta charset="UTF-8"> — the browser needs to know the character encoding before reading any other content.

Q2: What does the viewport meta tag do?

It makes pages responsive on mobile devices by telling the browser to match the screen width and not zoom out by default.

Q3: What are Open Graph tags used for?

They control how a page appears when shared on social media platforms (title, description, image, URL).

Q4: Where should you put <meta charset="UTF-8">?

As the very first element inside <head>, before any other tags.

Q5: What’s the ideal length for a meta description?

140-165 characters. Long enough to be descriptive, short enough not to be truncated in search results.

Challenge

Create a complete HTML page with:

All essential meta tags (charset, viewport, description, robots, Open Graph)
A descriptive title (under 60 chars)
Multiple favicon links
At least 500 words of well-formatted HTML content
Validated HTML (no unclosed tags)

Frequently Asked Questions

Do I need Open Graph tags on every page?

Yes — especially if your pages are shared on social media. Add og:title, og:description, og:image, and og:url to every page for best results.

Can I have multiple meta tags of the same type?

For some types like Open Graph, yes — you need multiple properties. For description and robots, you should have only one of each.

Does meta description affect search rankings?

Not directly as a ranking factor, but it affects CTR (click-through rate) — a good description gets more clicks, which indirectly helps rankings.

What’s Next?

Now let’s explore special characters and symbols:

Entities & Symbols

Special characters and emojis

Responsive HTML

Mobile-first responsive design

Graphics (Canvas & SVG)

Pixel and vector graphics

What’s Next

Congratulations on completing this Html Head tutorial! Here’s where to go from here:

Practice daily — Consistency is more important than long study sessions
Build a project — Apply what you learned by building something real
Explore related topics — Check out other tutorials in the same category
Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!

Previous HTML File Paths & URL Encoding Explained Next HTML Entities & Symbols Explained — Special Characters & Emojis

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse HTML Tutorials