HTML Tutorial

HTML Favicon

A favicon is the small icon in the browser tab. Link it from the head of every page.

What a favicon is

A favicon is the tiny mark beside the page title in a tab, the bookmarks bar, and some history lists. It is not content in the body. It is a file you advertise from <head> so the browser knows which image to use.

Without a link, many browsers still look for /favicon.ico at the site root. That guess fails if the file lives elsewhere or has another name. Put an explicit <link> on every page so the icon is reliable.

Link a classic .ico file

The long-standing pattern is a favicon.ico file and a rel="icon" link. Place the file in the site root or in a folder you control, then point href at it.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Lab notes</title>
  <link rel="icon" href="favicon.ico">
</head>
<body>
  <h1>Lab notes</h1>
  <p>The tab icon comes from the link in head, not from an img in the body.</p>
</body>
</html>

rel="icon" is the modern name. You may also see rel="shortcut icon" in older pages. New pages can use rel="icon" alone.

SVG favicons

An SVG icon scales cleanly on high-density screens. Link it with type="image/svg+xml" so the browser knows the format. Keep a .ico or PNG as a fallback for older clients if you need them.

Example

<head>
  <meta charset="UTF-8">
  <title>Lab notes</title>
  <link rel="icon" href="favicon.ico" sizes="any">
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
</head>

A simple SVG can be a colored square and a letter. You do not need a full illustration. High contrast reads better at 16 pixels than fine detail.

Example

<!-- favicon.svg: a teal mark with a letter -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#0d9488"/>
  <text x="16" y="22" text-anchor="middle" font-size="16" font-family="system-ui,sans-serif" fill="#fff">S</text>
</svg>

Apple touch icon, briefly

When someone saves your page to the home screen on iOS, the device looks for a larger icon. A common extra link is rel="apple-touch-icon" pointing at a PNG, often 180 by 180 pixels. It is not a replacement for the tab favicon. It is a second, bigger mark for that shortcut.

Example

<head>
  <meta charset="UTF-8">
  <title>Lab notes</title>
  <link rel="icon" href="favicon.ico">
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>

rel	Typical file	Where it shows
`icon`	`favicon.ico` or `favicon.svg`	Tabs and bookmarks
`apple-touch-icon`	PNG around 180×180	iOS home screen shortcut

Where the file lives

href="favicon.ico" is relative to the current page unless it starts with /. Root-relative href="/favicon.ico" always means the site root, which is what you want on nested tutorial URLs. If the icon 404s, the tab falls back to a generic mark.

The StudyGrid preview at /html/try will not magically create a favicon file. The<link> is still the markup you ship. Add the real .ico or.svg next to your pages on disk.

Checklist

Put a <link rel="icon" ...> in <head> on every template.
Use a simple, high-contrast mark. It will be tiny.
Offer SVG plus a fallback if you care about older browsers.
Add apple-touch-icon only if home-screen shortcuts matter to you.

Worked examples

The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.

HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.

Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.

Engineering

A tab icon for a logger

link rel="icon" in the head is the small mark in the tab. People use it to find your page among twenty others. It is not visible in the body.

SVG or PNG both work. One file, linked from every page, is enough. The preview below is a note because the icon lives in head.

Example

<p>This clinic site sets <code>&lt;link rel="icon" href="/favicon.svg"&gt;</code> in the head so the tab is not a blank document.</p>

Astronomy

Why the tab needs a mark

A planet fact sheet and a shop can sit in the same browser. The favicon is the glance layer. title is still the accessible name of the tab.

Example

<p>Mars notes use the same favicon as the rest of the course so the tab matches the site.</p>

FAQ: HTML Favicon

Common questions about this page.

What is the StudyGrid HTML tutorial?

The StudyGrid HTML tutorial is a full beginner track: tags, headings, links, images, tables, layout, forms, and media. Each chapter has copy-and-run examples.

Should I run html favicon examples locally for better learning?

Yes. Use the browser editor on StudyGrid for a quick check, then Download the example and run it on your computer. Local runs show real errors and the real toolchain, which is one of the fastest ways to learn html favicon in this HTML HTML lesson (HTML Favicon).

Is the HTML editor the same as Try Python?

No. Try HTML is a live page preview at /html/try. Try Python stays at /try and runs Python. HTML lessons never open the Python editor.

Do I need to install anything to learn HTML?

No. Open a chapter, click Try it in HTML, and the page preview updates in the browser. You can also download a .html file and open it locally.

Where should I start the HTML tutorial?

Start at HTML Intro, then Basic, Elements, and Attributes. After the first document, continue to headings, links, and forms. Use Next at the bottom of each chapter.

Is the HTML tutorial free?

Yes. The HTML studio on StudyGrid (studygrid.in) is free: dashboard, chapters, and the live preview editor.