HTML Favicon

The Head session built a starter metadata box with charset, viewport, title, and a stylesheet link. A favicon is another practical head link: the tiny icon that appears in the browser tab next to your page title. It helps people recognize your site among crowded tabs, bookmarks, and some history lists. You do not draw it with CSS text — you point the browser at a small image file.

What a favicon is

A favicon is a site icon resource. Browsers fetch it because your HTML (or a default guess such as /favicon.ico) tells them where to look. Modern pages usually declare it explicitly with a link element so the path and file type are clear. The icon should stay simple and square enough to read at very small sizes.

Direct answer

In the document head, add a link with rel="icon" and an href that points to your icon file. Common choices are favicon.ico, a PNG such as images/favicon.png, or an SVG icon. The path must resolve the same way other relative URLs do (see File Paths). After you change the file, expect browser caching — a hard refresh or a private window often reveals the new icon faster than a normal reload.

Classic .ico link

Many tutorials still start with favicon.ico in the same folder as the HTML file. The optional type attribute can help browsers understand the resource.

Reading the classic sample

• The link lives in head, beside title and other metadata
• rel="icon" marks the resource as a favicon
• href="favicon.ico" assumes the icon file sits next to this HTML page
• type="image/x-icon" is a common MIME hint for .ico files
• Without a correct path, the tab may keep a default or empty icon

PNG and SVG variants

PNG favicons are easy to export from design tools. SVG favicons stay sharp at different scales when the browser supports them. You can keep the icon in an images folder and point href there.

Choosing a starter format

• .ico — traditional, widely recognized by older tooling
• .png — simple for beginners who already export PNG assets
• .svg — crisp vector option when your audience’s browsers support it
  You do not need every format on day one. Ship one clear icon with a correct link, then expand later for apple-touch or multi-size packages if a project requires them.

Paths matter as much as the markup

If href points to a missing file, the favicon request returns 404 and the tab icon fails quietly. Check folder names, spelling, and whether the HTML file moved without the icon. Relative paths are relative to the HTML document URL, not to your feelings about where the file “should” be.

Caching can hide updates

Browsers often cache favicons aggressively. You change favicon.png, reload, and still see yesterday’s mark. That does not always mean the HTML is wrong. Try a hard refresh, a private/incognito window, or temporarily rename the file and update href so the browser fetches a fresh URL. Teach this habit early so learners do not delete working markup in panic.

Keep icons small and clear

A huge photo compressed into a tab becomes an unreadable blur. Prefer a simple mark, high contrast, and a square canvas. The favicon is recognition aid, not a second hero image. Save detailed branding for the page body.

Where the link belongs

Put favicon link elements in head. Putting them in body is the wrong place for document-level icons. You already know head is for metadata and resource links; favicons follow that rule.

Practice in your editor

1. Place a small square icon next to your HTML file or inside an images folder.
2. Add <link rel="icon" href="..."> inside head with a matching path.
3. Open the page and look at the browser tab beside the title text.
4. Intentionally break the path, reload, and notice the icon disappear or revert — then fix it.
5. Replace the icon file and, if the old one sticks, open a private window or hard-refresh to confirm the new art.

Easy mistakes

• Putting the favicon link in body instead of head
• Wrong href so the icon 404s while the page HTML still looks fine
• Expecting an instant visual update while an old favicon is cached
• Using a huge photograph instead of a small, simple square mark
• Forgetting to upload the icon file when you deploy only the HTML
• Mixing up rel="stylesheet" with rel="icon" and wondering why CSS or the tab icon misbehaves

Summary

• Favicons are linked in head with rel="icon"
• Point href to a real .ico, .png, or .svg file
• Correct paths and calm cache checks solve most “missing icon” reports
• Keep icons small and recognizable at tab size
• One working link beats a pile of unused icon formats