HTML Favicon

A favicon (short for “favorite icon”) is the small image a browser shows next to a page’s title in a tab, in bookmarks, and in browser history. It is one of the smallest pieces of markup you will ever write, but it has an outsized effect on how professional and recognizable a site feels. Without one, browsers show a generic blank-page icon, which makes a site look unfinished even if the rest of the design is polished.

In HTML, a favicon is not a special element of its own — it is declared using the everyday <link> element inside the document’s <head>. This lesson covers exactly how that works, what formats and sizes browsers expect, how to support mobile home-screen icons, and the mistakes that most commonly break favicons in practice.

Overview: How Favicons Work

When a browser loads a page, it looks for a favicon in two ways. First, if the HTML document contains one or more <link> elements with a rel attribute of icon (or the older shortcut icon), the browser uses the referenced image. Second, if no such <link> is present, most browsers will automatically request /favicon.ico from the site’s root as a fallback, even though nothing in the HTML asked for it. This fallback behavior is a historical convention, not part of the HTML specification — it is implemented by browsers, not required by the language. Relying on it is fragile because it depends on the file existing at the domain root, so explicit <link> declarations are the reliable, standards-based approach.

Because a favicon is declared with <link>, it participates in the DOM exactly like a stylesheet link: it is a void element (no closing tag, no children) that lives in the <head> and carries metadata about the document rather than visible content. The browser does not render it inline in the page body; instead, once the HTML parser builds the DOM and encounters the <link rel="icon"> node, it queues a separate network request for the referenced image resource, decodes it, and displays it in the browser chrome (the tab, bookmark, or history entry) — areas outside the rendered page itself.

Modern browsers support several image formats for favicons: the classic .ico format (which can bundle multiple resolutions in one file), plain .png, and increasingly .svg for crisp scaling at any size. You can also declare multiple <link> elements for different sizes and purposes (browser tab, Apple touch icon, Android home screen icon), and the browser picks the most appropriate one for the context it needs.

Syntax

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

Attribute	Purpose
`rel`	Relationship of the linked resource to the document. Use `icon` for favicons (or `apple-touch-icon` for iOS home-screen icons).
`type`	The MIME type of the image, e.g. `image/png`, `image/x-icon`, or `image/svg+xml`. Helps the browser decide whether it can use the file without downloading it first.
`sizes`	The pixel dimensions the icon was authored at, e.g. `32x32` or `16x16`. Lets the browser pick the best match for a given context.
`href`	The path to the icon file, relative or absolute.

Examples

Example 1: A basic favicon

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Site</title>
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
  <h1>Welcome</h1>
</body>
</html>

Result: Nothing changes in the rendered page body. The browser tab now shows the small icon from favicon.ico next to the text “My Site”, and the same icon appears if the page is bookmarked or shown in history.

This is the minimum needed for a favicon: one <link> in the <head> pointing at an .ico file. The type attribute tells the browser what kind of file to expect before it even downloads it.

Example 2: Multiple sizes and formats

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Result: Nothing visible changes in the page body. Desktop browsers pick whichever PNG size best matches the tab icon’s display size (usually the 16×16 or 32×32 version, scaled if needed). On an iPhone or iPad, if a user adds the page to their home screen, iOS uses the 180×180 apple-touch-icon image as the app-like icon instead of trying to scale the small tab favicon.

Providing several sizes avoids blurry upscaling: a 16×16 icon stretched to fill a 180×180 home-screen tile looks pixelated, while a purpose-built 180×180 image looks sharp. apple-touch-icon is a separate rel value recognized specifically by Apple’s mobile Safari and does not need a type attribute since it’s assumed to be a PNG.

Example 3: SVG favicon with a fallback

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="alternate icon" href="/favicon.ico">

Result: Browsers that support SVG favicons (most current versions of Chrome, Firefox, and Edge) render the crisp vector icon at any zoom level or display density. Older browsers that do not understand image/svg+xml as a favicon skip that line and fall back to the PNG or ICO link instead, so the tab still shows an icon rather than nothing.

SVG icons scale perfectly on high-density (“Retina”) screens without needing separate 1x/2x/3x raster files, but because support isn’t universal, pairing an SVG link with a raster fallback is the safest approach.

How It Works Step by Step

The browser’s HTML parser reads the document and builds the DOM tree, including any <link rel="icon"> elements found in <head>.
Once parsing discovers a favicon <link>, the browser schedules a network request for the href in parallel with other page resources — it does not block rendering of the visible page.
If multiple icon links exist, the browser evaluates type, sizes, and format support to choose the best candidate for each context (tab, bookmark, home screen icon).
If no <link rel="icon"> is present at all, most browsers make an additional, unsolicited request to /favicon.ico at the domain root as a last resort.
The downloaded image is decoded and cached, then displayed in the browser’s own chrome (tab bar, bookmarks menu, history list) — never inside the rendered page content itself.

Common Mistakes

Mistake 1: Putting the favicon link in the body

<html>
<head>
  <title>My Site</title>
</head>
<body>
  <link rel="icon" href="/favicon.ico">
  <h1>Welcome</h1>
</body>
</html>

The <link> element (without an itemprop attribute) is metadata and belongs only inside <head>. Some browsers may still pick it up out of leniency, but this is invalid document structure and is not guaranteed to work consistently. Move it into <head>:

<head>
  <title>My Site</title>
  <link rel="icon" href="/favicon.ico">
</head>

Mistake 2: A mismatched type attribute

<link rel="icon" type="image/png" href="/favicon.ico">

Here the type claims the file is a PNG, but the filename (and actual file) is an .ico. Some browsers trust the declared type and skip the request entirely, thinking they can’t use it, so the favicon silently fails to appear. Match the type to the real file:

<link rel="icon" type="image/x-icon" href="/favicon.ico">

Best Practices

Always declare the favicon explicitly with <link> rather than relying on the /favicon.ico auto-fallback.
Provide at least a 32×32 PNG (or SVG) for crisp tab display and a 180×180 apple-touch-icon for iOS home-screen use.
Use an SVG favicon with a PNG or ICO fallback when you want the icon to stay sharp at every zoom level and display density.
Keep favicon files small (a few kilobytes) since they load on every page view.
Use a simple, high-contrast design — favicons are shown extremely small, so fine detail and thin text disappear.
Place all favicon <link> elements inside <head>, near the top, so browsers discover them early.

Practice Exercises

Create a minimal HTML page with a <title> and a single favicon link pointing to /icon.png with type="image/png".
Extend that page to include a 16×16 PNG, a 32×32 PNG, and a 180×180 apple-touch-icon, each with the correct sizes attribute.
Add an SVG favicon as the primary icon with a PNG <link> as a fallback for browsers that don’t support SVG icons.

Summary

A favicon is declared with a <link rel="icon"> element inside <head>, not a dedicated HTML tag.
Browsers display favicons in tabs, bookmarks, and history — never inside the rendered page content.
Without an explicit link, many browsers fall back to requesting /favicon.ico, but this is unreliable and non-standard.
Use multiple <link> elements to cover different sizes, formats, and mobile home-screen icons like apple-touch-icon.
SVG favicons scale cleanly but should be paired with a raster fallback for older browsers.
Common mistakes include placing the link outside <head> and mismatching the type attribute with the actual file format.