HTML Favicon and Page Title: How to Add a Website Icon

A favicon is the small icon in the browser tab, and the HTML title tag sets the text next to it. Learn how to write good page titles and add a favicon in ICO, PNG or SVG.

What is a favicon and where does it appear?

A favicon (short for "favourite icon") is the tiny picture that represents your website. It is like a shop's logo on its sign: people use it to find your site quickly among many open tabs. It appears:

• In the browser tab, next to the page title.
• In bookmarks and the history list.
• In search results on Google, next to your site name.
• On a phone's home screen, when someone saves your site (this uses a bigger version).

The page title sits right next to the favicon in the tab, so the two work as a team. Let's start with the title.

How to write a good HTML page title

The <title> element goes inside <head>. It is required: every HTML page must have exactly one. You met it in the boilerplate lesson; here are the rules for writing it well.

1. Make every title unique. Each page needs its own title, so people (and Google) can tell pages apart.
2. Put the most important words first. Tabs cut long titles short, so "Contact Us - Green Leaf Cafe" is better than "Green Leaf Cafe - Welcome to Our Website - Contact Us".
3. Keep it around 50–60 characters. Longer titles get cut off in search results.
4. Add your site name at the end, separated by a dash or a vertical bar.
5. Write plain text only. Tags inside <title> are shown as text, not used.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lemon Drizzle Cake Recipe - Sunny Kitchen</title>
</head>
<body>
  <h1>Lemon Drizzle Cake</h1>
  <p>A soft, zesty cake ready in one hour.</p>
</body>
</html>

Look at the tab: it shows "Lemon Drizzle Cake Recipe - Sunny Kitchen". If you bookmark the page, the bookmark gets the same name. Notice the <h1> and the title are similar but not identical: the title has extra words for search and the site name.

Common mistake: Using the same title, like "Home", on every page. With five tabs open, the user sees "Home Home Home Home Home" and cannot find anything. Search engines also struggle to show the right page.

How to add a favicon in HTML

You add a favicon with a <link> element in the <head>, using rel="icon". There are three common file formats:

Format	File example	Good for
ICO	favicon.ico	The oldest format; can hold several sizes in one file
PNG	favicon-32.png	Simple, works in every modern browser
SVG	favicon.svg	Sharp at any size, small file, can even change for dark mode

The simplest favicon

If you put a file called favicon.ico in the root folder of your site (the main folder, next to index.html), most browsers find it automatically, even without a <link>. But it is clearer to add one:

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

A modern favicon set

Today a good, small set looks like this. The browser picks the best one it supports.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sunny Kitchen - Easy Home Baking</title>
  <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>

• favicon.ico is the safe fallback for old tools and services that look for it.
• icon.svg is used by modern browsers and stays sharp on high-resolution screens.
• apple-touch-icon.png is the icon iPhones and iPads use when someone adds your site to their home screen.

The type attribute tells the browser the file type, so it can skip files it cannot use without downloading them.

Favicon sizes and the apple-touch-icon

Favicons are shown very small, so design them simply: one letter, one shape, strong colors. Fine detail disappears at 16 pixels.

File	Size in pixels	Used for
favicon.ico	32 × 32 (can include 16 × 16)	Browser tabs, fallback
icon.svg	Any (vector)	Modern browser tabs
apple-touch-icon.png	180 × 180	iPhone and iPad home screen
icon-192.png, icon-512.png	192 × 192 and 512 × 512	Android and installable web apps (via a web app manifest)

The sizes attribute says how big an icon is, for example sizes="32x32". Use a small letter x and no spaces. For the apple-touch-icon, use a square PNG with a solid background, because iOS does not show transparency well; it adds rounded corners for you.

Tip: An SVG favicon can contain a CSS media query for prefers-color-scheme: dark, so your icon changes color when the user's browser is in dark mode. This keeps a dark logo visible on a dark tab bar.

How to check that your favicon works

1. Open your page and look at the tab. You should see your icon instead of the default globe or page symbol.
2. Browsers cache (save) favicons for a long time. If you change your icon and see the old one, do a hard refresh with Ctrl + Shift + R (or Cmd + Shift + R), or open the icon URL directly, like yoursite.com/icon.svg.
3. Open DevTools (F12), go to the Console and look for a 404 error that mentions your icon file. A 404 means the path is wrong.
4. Bookmark the page and check that the icon appears in the bookmark bar.

Note: Some browsers do not show favicons for files opened directly from your computer with a file:// address. If your icon doesn't appear locally, test it with VS Code's Live Server extension or on your published site.

Practice exercise

Make a favicon for your personal profile page. Create a simple 180 × 180 PNG with your first initial on a colored square (any image editor or a free online tool works), save it as apple-touch-icon.png, and also save a 32 × 32 version as favicon.png. Add both with <link> elements, and write a unique title for the page that follows the rules above.

Hint: use rel="icon" with type="image/png" and sizes="32x32" for the small PNG, and rel="apple-touch-icon" for the large one.

Key takeaways

• The <title> is required, should be unique per page, and puts the important words first.
• A favicon is added with <link rel="icon" href="..."> in the <head>.
• A good modern set is favicon.ico, an SVG icon and a 180 × 180 apple-touch-icon.
• Keep favicon designs simple so they stay clear at tiny sizes.
• If an old icon still shows, it is cached; do a hard refresh.