While the `<body>` tag contains everything a user sees rendered on the screen, the `<head>` tag acts as the invisible control center of your document. It houses crucial metadata that defines how the browser, search engines, and platforms interact with your site.
1The Title Tag & SEO
The <title> tag is arguably the single most important line of HTML for Search Engine Optimization (SEO). It dictates the clickable headline that appears on the Search Engine Results Page (SERP). Furthermore, it provides the text label for the user's browser tab. A missing or poorly written title tag severely damages your site's discoverability. The title must always be nested directly inside the <head> element, and there can only be one title per document. Professional developers keep titles between 50 and 60 characters to prevent truncation (the dreaded ellipsis ...) on Google.
2Favicons & Visual Branding
A 'Favicon' (Favorite Icon) is the graphical logo appearing next to your page title. To inject a favicon, you implement a <link> tag inside the <head>. By setting the rel (relationship) attribute to icon, you instruct the browser to download the file at the href location and use it as the visual stamp for the document. While older architectures relied on .ico files, modern stacks mandate scalable vector graphics (.svg). Using SVGs ensures your branding remains flawlessly crisp regardless of pixel density.
3Home Screen Apps & Cache Busting
Users can save your website to their iOS or Android home screens. By defining an <link rel="apple-touch-icon">, you force the OS to use a high-quality 180x180 pixel asset instead of a blurry screenshot of your webpage. Additionally, browsers cache favicons aggressively. If you update your logo, returning users might still see the old one. A professional workaround is cache busting—appending a version query string (?v=2) to the href. This forces the browser to fetch the freshly minted icon immediately.
4Step-by-Step Breakdown
Document Identity & The Head Tag. While the <body> tag contains everything a user sees rendered on the screen, the <head> tag acts as the invisible control center of your document. It houses crucial metadata that defines how the browser, search engines, and social media platforms interact with your site. Today, we are mastering Document Identity by configuring the two most visible elements of the <head> section: the Page Title and the Favicon. These elements define how your site appears in browser tabs, bookmarks, and search results.
The Title Tag and SEO. The <title> tag is arguably the single most important line of HTML for Search Engine Optimization (SEO). It dictates the clickable headline that appears on the Search Engine Results Page (SERP). Furthermore, it provides the text label for the user's browser tab. A missing or poorly written title tag severely damages your site's discoverability. The title must always be nested directly inside the <head> element, and there can only be one title per document.
Checkpoint: HTML document architecture relies on a strict separation of concerns. While the <body> contains the visible layout, in which specific HTML element must the <title> tag be placed to function correctly?
- →<header>
- →<head>
- →<body>
- →<meta>
Title Length Best Practices. While you can technically make a <title> tag as long as you want, search engines like Google typically truncate titles after 50 to 60 characters (or a specific pixel width). If your title is cut off, users will see an ellipsis (...), which can reduce click-through rates. The professional standard is to place your primary keyword at the beginning of the title and keep the overall length concise and compelling.
Checkpoint: Search engines use your <title> tag to generate the clickable headline on search result pages. To prevent your headline from being truncated (cut off) by Google, what is the generally recommended maximum character limit?
- →30-40 characters
- →50-60 characters
- →100-120 characters
- →No limit
Linking the Favicon. A 'Favicon' (short for Favorite Icon) is the small graphical logo that appears next to your page title in the browser tab, in the bookmarks menu, and in your browser history. To attach a favicon, we use the self-closing <link> tag within the <head>. By setting the rel (relationship) attribute to "icon", we instruct the browser to fetch the image file located at the specified href path and use it as the visual stamp for the document.
Modern Favicon Formats. Historically, favicons were restricted to a specific .ico file format due to legacy browser limitations. Modern web architecture, however, embraces scalable vectors. You can now use crisp .svg files or high-resolution .png files for your icons. You can even define multiple <link> tags with different sizes attributes (e.g., sizes="180x180" and rel="apple-touch-icon") to ensure your branding looks perfect when users save your website to their mobile home screens.
Checkpoint: It is highly recommended to use a modern, scalable image format for your favicon so that it stays crisp on high-resolution displays. Which modern vector format is ideal for this purpose?
- →.ico
- →.gif
- →.svg
- →.bmp
Apple Touch Icon. Beyond standard browser tabs, users can save your website to their iOS or Android home screens, treating your site like a native app. By defining a specific <link rel="apple-touch-icon">, you ensure the device uses a high-quality icon rather than a generic screenshot of your webpage. The industry standard size for this specific icon format is 180x180 pixels.
Favicons and Dark Mode. One detail often overlooked is how your favicon looks against a dark browser theme. A black logo on a transparent background becomes completely invisible when a user enables dark mode in their browser! The solution is either to use a solid-colored background for your .png icon, or dynamically change the icon color using inline CSS within your scalable .svg file using media queries.
Checkpoint: The <link> tag is a versatile element used for connecting stylesheets, fonts, and icons. Which specific attribute value must be used to tell the browser that the linked file is intended to be used as the browser tab's graphical logo?
- →type
- →rel (relationship)
- →src
- →class
Cache Invalidation (Versioning). Browsers cache favicons very aggressively to improve loading speeds. This means if you upload a new favicon, many returning users will still see the old one because their browser won't fetch the new file. A pro-tip to force the browser to download the updated icon is to add a query string version number to the file path (like ?v=2). The browser sees a 'new' URL and downloads the fresh graphic immediately.
Document Identity Mastered. Document Identity mastery achieved! You now know how to program the invisible scaffolding of your webpage. By optimizing the <title> tag, you ensure top-tier search engine visibility, and by correctly linking modern Favicons, you establish persistent visual branding across browser tabs and mobile devices. Your website now presents a professional face to the world.
Add A Title And Favicon Together. Both the tab title and the tab icon come from tags inside <head>.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1The `<title>` Is the First Thing Screen Readers Announce
When a screen reader user navigates to a new page or switches browser tabs, the `<title>` text is typically the very first thing announced. A vague title like 'Home' or 'Untitled Document' leaves blind users with zero context about which tab or page they landed on.
<title>Checkout — Step 2 of 3 | Acme Store</title>2Favicons Are a Visual-Only Wayfinding Aid
Sighted users scan favicons to find the right tab among a dozen open ones, but this signal is entirely invisible to screen reader and low-vision users. Never make the favicon the only way to distinguish critical pages (e.g. staging vs. production) — pair it with a distinguishing `<title>` too.
SEO Implications
- 1
The Title Tag Is the Single Strongest On-Page Ranking Signal
Google weights `<title>` more heavily than almost any other on-page element and uses it verbatim (or a rewritten version) as the clickable blue link in search results. A missing, duplicate, or generic title across many pages measurably suppresses click-through rate and rankings.
- 2
Favicons Affect Search Result Trust, Not Ranking
Google displays the favicon next to mobile search results and browser tabs. A missing or broken favicon doesn't directly hurt rankings, but it makes results look less credible next to competitors with polished branding, which indirectly affects click-through rate.
Best Practices
Keep Titles Under ~60 Characters and Front-Load Keywords
Google truncates displayed titles around 50-60 characters (pixel-width based, not a strict character count). Put the most important, differentiating words first — page-specific info before the site name — so truncation doesn't cut off what matters.
<title>Wireless Keyboard - Compact & Backlit | Acme Store</title>Provide Multiple Favicon Formats and Sizes
A single 16x16 .ico is not enough for modern platforms. Provide an SVG for crisp scaling, a PNG fallback, and a dedicated `apple-touch-icon` (typically 180x180) so the icon looks correct on iOS home screens, not just in the browser tab.
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.png" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Frequent Bugs
An updated favicon never shows up for returning visitors, even after deploying.
Browsers aggressively cache favicons, sometimes for weeks. Bust the cache by appending a version query string to the href (e.g. `/favicon.svg?v=2`) whenever the icon file changes, rather than reusing the same URL.
The favicon looks fine in light mode but is invisible against a dark browser tab bar.
A single-color SVG favicon with no background can disappear on dark themes. Provide a `prefers-color-scheme` aware SVG, or design the icon with enough contrast/fill to survive both light and dark tab bars.
Real-World Examples
Full Cross-Platform Icon and Title Setup
A production `<head>` sets a keyword-front-loaded, length-conscious title alongside a versioned SVG favicon, a PNG fallback for older browsers, and an Apple touch icon for iOS home screen installs.
<head>
<title>Trail Running Shoes - Men's & Women's | Acme Outdoors</title>
<link rel="icon" href="/favicon.svg?v=3" type="image/svg+xml">
<link rel="icon" href="/favicon-32.png?v=3" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png?v=3">
</head>