HTML Page Title & Favicon
The page title and the favicon are the first things a visitor sees in the browser tab, in bookmarks and in Google.
The title Element
The <title> element goes inside <head>. Every page needs exactly one.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Laptop Prices in Karachi | Ali Computers</title>
</head>
<body>
<h1>Laptop Prices</h1>
<p>Look at the browser tab. The text there comes from the title element.</p>
</body>
</html>The title is used in many places:
- The text on the browser tab
- The default name of a bookmark
- The blue clickable headline in Google results
- The heading of the preview when the link is shared
How to Write a Good Title
| Do | Don't |
|---|---|
| Put the main topic first | Start with your brand on every page |
| Keep it around 50 to 60 characters | Write a whole sentence of 100 characters |
| Give every page its own title | Use "Home" or "Untitled" on many pages |
| Describe what the page offers | Stuff it with repeated keywords |
Compare two titles for the same page:
Example
<!-- weak -->
<title>Page 2</title>
<!-- strong -->
<title>Web Development Course in Orangi Town | Workownix</title>A common pattern is "Page topic | Site name". The topic tells people what they get, and the site name builds trust.
What is a Favicon?
A favicon (short for "favourite icon") is the small picture shown beside the title in the browser tab. It also appears in bookmarks, history and on the phone home screen when someone saves your site.
You add it with a <link> element in the head:
Example
<link rel="icon" href="favicon.ico">Favicon File Formats
| Format | Example | Notes |
|---|---|---|
| ICO | favicon.ico | The oldest format, works everywhere, can hold several sizes |
| PNG | favicon-32.png | Simple and sharp, set the size with sizes |
| SVG | favicon.svg | One file that is sharp at any size, supported by modern browsers |
A modern head often has a few icon lines, so each device can pick the best one:
Example
<head>
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>| Line | Who uses it |
|---|---|
favicon.ico | Older browsers and the default request to /favicon.ico |
icon.svg | Modern Chrome, Edge and Firefox |
apple-touch-icon.png (180 x 180 pixels) | iPhones and iPads when the site is added to the home screen |
A Favicon You Can Try
Normally the favicon is a separate file. In this example the icon is written inside the page as an SVG data address, so it works with no file at all. Run it and look at the tab of the result window (if your editor shows tabs).
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Bakery</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%23e34c26'/%3E%3C/svg%3E">
</head>
<body>
<h1>Ayesha's Bakery</h1>
<p>This page has a small orange circle as its favicon.</p>
</body>
</html>Tips for a Good Favicon
- Keep the design very simple: one letter or one shape. It is shown at only 16 to 32 pixels.
- Use strong colours that stand out on both light and dark browser themes.
- Put the files in the root folder of your website, so the paths are short.
- After changing the icon, refresh with Ctrl + F5. Browsers keep old favicons for a long time.
Free tools online can turn one square logo into all the favicon sizes for you. Start from a 512 x 512 pixel PNG or an SVG.
Exercise
Exercise
Which line adds a favicon to a page?