How to Add a Favicon in HTML (Step-by-Step)

Q: Where do favicon link tags go in HTML?

Inside the <head> element, alongside your <title> and <meta> tags. They can go anywhere in the head, but near the top keeps things tidy. A <link rel='icon'> tag placed in the <body> is ignored.

Q: Should I use an absolute or relative path for a favicon?

Use a root-relative path that starts with a slash, like /favicon.ico . It resolves to the same file on every page, including pages in subfolders. A bare favicon.ico breaks on deep URLs because the browser looks for it relative to the current page.

Q: Is rel="shortcut icon" still needed?

No. rel='shortcut icon' was never a valid relation — shortcut is a no-op that browsers ignore. Use plain rel='icon' . Drop the old tag; it adds nothing and signals copy-pasted, dated markup.

Published November 27, 2025 · Updated June 9, 2026

Paste four <link> tags into your <head>, drop the files in your site root, and your favicon works. The clean 2026 HTML snippet, explained line by line.

To add a favicon in HTML, paste these four lines inside your page’s <head> and put the matching files in your site’s root folder:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

In one line: four <link> tags in <head>, four files in the root — that’s a complete favicon.

That’s the whole job. You no longer need a dozen <link> tags or a stack of hand-exported PNGs — a multi-size .ico and a scalable SVG cover the browser tab, and the manifest covers phone home screens. The rest of this guide explains where the tags go, what each line does, why root-relative paths are safest, and how to confirm it actually worked.

Where the favicon tags go

Favicon <link> tags belong inside the <head> element, next to your <title> and <meta> tags. They can sit anywhere in the head, but keeping them near the top is tidy and conventional. Here’s the snippet in context:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>

  <!-- Favicon -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">
</head>
<body>
  <!-- Your content -->
</body>
</html>

One rule that trips people up: a <link rel="icon"> placed in the <body> is ignored. It has to be in the head. If you’re using a templating system or a CMS, the tags go in whatever partial renders the <head> (often header.php, _document, or a base layout file).

What each tag does

Four lines, four jobs:

<link rel="icon" href="/favicon.ico" sizes="32x32"> — the classic favicon. A single .ico file bundles 16×16, 32×32, and 48×48 frames, so it covers standard and high-DPI desktop tabs and is the icon Google falls back to next to your search listing. Browsers also auto-request /favicon.ico from your root even without this tag, so keeping the file there is belt-and-braces.
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> — the primary modern icon. It’s resolution-independent, so it stays razor-sharp from a 16px tab to a large bookmark tile, and it can carry a dark-mode variant. Chrome, Edge, and Firefox prefer it when present; Safari ignores it and falls back to the .ico.
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> — the icon iOS uses when someone adds your site to their home screen. It’s a 180×180 PNG, and it must be opaque (a transparent background turns black on iOS) with a little padding, because iOS rounds the corners.
<link rel="manifest" href="/site.webmanifest"> — points to your web app manifest, a small JSON file that lists your PWA icons (the 192×192 and 512×512 sizes) so Android and installed web apps can find them.

The type attribute on the SVG line tells the browser the format up front, and sizes="32x32" on the ICO line hints at the working resolution. Both are optional but worth keeping — they help browsers pick the right icon without sniffing the file.

Absolute vs relative paths (and why `/favicon.ico` is safest)

The leading slash in /favicon.ico matters. There are three ways to write the path, and only one is reliable:

Path style	Example	Resolves to	Verdict
Root-relative	`/favicon.ico`	`example.com/favicon.ico` on every page	Use this
Page-relative	`favicon.ico`	`example.com/blog/favicon.ico` on a `/blog/` page	Breaks in subfolders
Absolute URL	`https://cdn.example.com/favicon.ico`	exactly that URL	Only for a CDN

A root-relative path (starting with /) always points at the same file no matter which page the visitor is on. A page-relative path (no leading slash) is resolved against the current URL, so on example.com/blog/post/ the browser hunts for example.com/blog/post/favicon.ico and gets a 404. A full absolute URL is only worth it when the files live on a separate CDN domain.

Use /favicon.ico and friends. It’s the one style that can’t surprise you.

You don’t need a dozen `<link>` tags anymore

Older tutorials hand you ten or more <link> lines — separate 16×16, 32×32, 48×48, 96×96, 120×120, 152×152 and 167×167 PNGs, plus a string of Apple icons. Skip all of that. Two changes made the long list obsolete:

The .ico is multi-size. One file holds 16/32/48 at once, and the browser picks the frame that fits.
The SVG scales. A single vector icon renders sharply at any size, so per-size PNGs are redundant. Browsers without SVG support fall back to the .ico.

The “Rule of 48” and the old per-size PNG export ritual are leftovers from before browsers read SVG and downscaled it. The four-tag snippet at the top is the current, correct minimum. For a tag-by-tag breakdown of every attribute, see the favicon HTML reference.

The manifest line (for PWA icons)

The fourth tag, <link rel="manifest" href="/site.webmanifest">, doesn’t point at an image — it points at a JSON file that lists your larger icons for Progressive Web Apps and Android home screens. Here’s the matching site.webmanifest:

{
  "name": "Your Site Name",
  "short_name": "Site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
    { "src": "/icon-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Note the three separate icon entries: 192 any, 512 any, and a 512 maskable. The maskable icon is its own file with the art pulled into a central safe zone, because Android crops icons into a circle or squircle. Don’t collapse these into one icon with "purpose": "any maskable" — the maskable version needs its own padded artwork. The full setup is in the PWA manifest guide.

Generate the whole set from one upload

The HTML is easy; producing the files correctly is the fiddly part — a multi-size .ico, an optimised SVG, an opaque-and-padded Apple touch icon, and a separately padded maskable icon. FaviconBuilder takes one image (SVG preferred, or a PNG/JPG at 512×512 or larger) and outputs the complete verified set plus the exact <link> tags and site.webmanifest to paste in. It’s free, needs no account, and your image never leaves your browser. You can also start from the create-a-favicon walkthrough.

Drop `rel="shortcut icon"`

If your current markup has this line, delete it:

<!-- Obsolete — remove this -->
<link rel="shortcut icon" href="/favicon.ico">

shortcut was never a valid link relation. Browsers parse the icon part and silently ignore shortcut, so the tag does nothing a plain rel="icon" doesn’t already do. It survives in tutorials purely by copy-paste inertia. Use rel="icon" and move on.

How to verify it worked

After you deploy, the favicon may not appear immediately — browsers cache favicons aggressively. Check it in this order:

Hard-refresh the page. Ctrl + Shift + R on Windows/Linux, Cmd + Shift + R on Mac. This forces a fresh fetch.
Open it in an incognito/private window. A clean profile sidesteps the cache entirely and shows what a first-time visitor sees.
Load the file directly. Visit https://yoursite.com/favicon.ico and …/favicon.svg in the address bar. A 200 with the icon means the file is in place; a 404 means the path or upload is wrong.
Check the Network tab. Open DevTools, reload, and filter for favicon — every favicon request should return 200, not 404.

If the icon still won’t show after a hard refresh and a confirmed 200, work through the favicon not showing? checklist — it covers cache busting, wrong MIME types, and the handful of other usual suspects.

Summary

Adding a favicon in HTML comes down to two steps:

Drop the files in your site root — favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest, plus the PWA PNGs the manifest references.
Paste four <link> tags into <head> — ICO, SVG, Apple touch, and manifest.

Use root-relative paths (/favicon.ico), skip the old dozen-PNG list, drop rel="shortcut icon", and verify with a hard refresh or an incognito window. That’s a complete, modern favicon.

Continue reading:

Frequently asked questions

How do I add a favicon in HTML?

Put your favicon files in your site's root folder, then paste four <link> tags inside the <head>: one for /favicon.ico, one for /favicon.svg, one apple-touch-icon, and one manifest. Hard-refresh the page and the icon appears in the tab.

Where do favicon link tags go in HTML?

Inside the <head> element, alongside your <title> and <meta> tags. They can go anywhere in the head, but near the top keeps things tidy. A <link rel='icon'> tag placed in the <body> is ignored.

Should I use an absolute or relative path for a favicon?

Use a root-relative path that starts with a slash, like /favicon.ico. It resolves to the same file on every page, including pages in subfolders. A bare favicon.ico breaks on deep URLs because the browser looks for it relative to the current page.

Is rel="shortcut icon" still needed?

No. rel='shortcut icon' was never a valid relation — shortcut is a no-op that browsers ignore. Use plain rel='icon'. Drop the old tag; it adds nothing and signals copy-pasted, dated markup.

Why isn't my favicon showing after I added the HTML?

Almost always caching. Browsers cache favicons aggressively, so hard-refresh (Ctrl/Cmd+Shift+R) or open the page in an incognito window. If it's still blank, confirm the file loads at its URL directly and returns a 200, not a 404. See the troubleshooting guide.

Related guides

← All guides