Favicon HTML Reference: Every Tag & Attribute
Published December 5, 2025 · Updated June 9, 2026
The complete modern favicon <head> is four lines. Full reference of every favicon link tag, attribute, and manifest entry — plus what to delete.
The complete modern favicon <head> is four lines:
<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">That set covers desktop tabs, high-DPI displays, iOS home screens, Android, and PWAs. Everything below is the full tag-by-tag reference — what each attribute does, the manifest that the fourth line points to, and the legacy tags you can safely delete.
In one line: two rel="icon" tags, one apple-touch-icon, one manifest — no per-size PNG list.
The long lists of <link> tags in older tutorials are obsolete. A multi-size favicon.ico bundles the small raster sizes, the SVG scales to any resolution, and PWA icons live in the manifest — not in the <head>. (Why the dozen-PNG export is dead →)
The complete tag and attribute reference
Every favicon-related tag, its required and optional attributes, and what each one does:
| Tag | Attribute | Value | Purpose |
|---|---|---|---|
<link rel="icon"> | rel | icon | Declares this file as the site icon (required) |
href | /favicon.ico | Path to the icon file (required) | |
sizes | 32x32 / any | Hint for which rendered size this file serves | |
type | image/svg+xml | MIME type so the browser skips unsupported formats | |
<link rel="apple-touch-icon"> | rel | apple-touch-icon | iOS home-screen icon |
href | /apple-touch-icon.png | Path to the 180×180 PNG | |
<link rel="manifest"> | rel | manifest | Links the web app manifest |
href | /site.webmanifest | Path to the manifest file | |
<meta name="theme-color"> | content | #2563eb | Browser UI / address-bar tint colour |
Use root-relative paths (a leading /) so the icons resolve from the site root regardless of the page URL.
<link rel="icon"> — the core tag
<link rel="icon" href="/favicon.ico" sizes="32x32">This is the one favicon tag every browser understands. Three attributes matter:
rel="icon"— the relation. This is the only valid favicon relation;rel="shortcut icon"is legacy (see below).href— the path to the file. Root-relative (/favicon.ico) is correct for almost every site.sizes— a hint, not a guarantee. Usesizes="32x32"to point browsers at the working tab size, orsizes="any"for a file that contains multiple sizes (like a multi-size.ico). Either is fine;32x32matches the minimum Google wants for the search-result icon.
type="image/svg+xml" — the SVG tag
<link rel="icon" href="/favicon.svg" type="image/svg+xml">The SVG is the primary modern icon. One vector file stays sharp from a 16px tab to a 512px tile, and it can embed @media (prefers-color-scheme: dark) to swap colours for dark tabs — no second file needed.
The type="image/svg+xml" attribute is what makes the fallback work: SVG-capable browsers (Chrome, Edge, Firefox) read this tag and use the SVG; Safari, whose SVG favicon support is partial, ignores it and falls through to the .ico. Keep both rel="icon" lines — order between them doesn’t matter, because the browser selects by type, not position. (SVG support details →)
rel="apple-touch-icon" — iOS home screen
<link rel="apple-touch-icon" href="/apple-touch-icon.png">This points to the icon iOS uses when someone adds your site to their home screen. Two file rules trip people up:
- It must be opaque. iOS composites the icon onto the home screen and adds its own rounded-corner mask. A transparent background renders as black — fill it with a solid colour. (Transparency rules →)
- Leave ~20px of padding. iOS clips artwork that runs to the edge.
A single 180×180 file covers current iPhones and iPads; older devices scale it down. You can add sizes="180x180", but it’s optional — there’s only one Apple touch icon size worth shipping in 2026.
rel="manifest" and the manifest icons
<link rel="manifest" href="/site.webmanifest">The manifest carries the PWA icons and theme — they are not referenced with <link> tags. Serve the file with the application/manifest+json MIME type. Inside it, icons is an array of three separate entries:
"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" }
]- 192
any— the Android home-screen launcher icon. - 512
any— install prompts and splash screens. - 512
maskable— a separate, padded icon for Android adaptive masks, with all art inside a central 409×409 safe zone.
The maskable icon must be its own padded file with "purpose": "maskable". Never collapse the two into one entry with "purpose": "any maskable" — a maskable icon needs different artwork from the plain one. theme_color sets the PWA’s UI tint. (Full manifest guide →)
<meta name="theme-color">
<meta name="theme-color" content="#2563eb">Optional but worth adding. It tints the browser UI on mobile (the address bar / status bar) and is also read as the theme colour for the page. You can match it to your manifest’s theme_color. It’s a <meta> tag, not a favicon, but it belongs in the same <head> block.
Generate the whole set from one upload
Hand-building this means exporting a multi-size .ico, an optimised SVG, an opaque padded Apple icon, two plain PNGs and a separate padded maskable — then writing the manifest by hand. FaviconBuilder does all of it from one upload: drop in an SVG (preferred) or a PNG/JPG at 512×512 or larger, and it outputs the complete file set, a ZIP, and the exact copy-paste HTML and manifest below. It’s free, needs no account, and your image never leaves your browser. (Step-by-step HTML walkthrough →)
Complete copy-paste <head> block
<head>
<meta charset="utf-8">
<title>Your Site Name</title>
<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">
<meta name="theme-color" content="#2563eb">
</head>Complete 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"
}Deprecated / don’t use
These tags appear all over old tutorials. Delete them — none are needed in 2026:
rel="shortcut icon"— never a valid relation.shortcutis meaningless; browsers only ever honoured theiconkeyword. Userel="icon"alone.- Per-size PNG link spam — long lists like
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">repeated for 16/32/48/96/120/152/167. The multi-size.icoplus the SVG replace all of them. (How the ICO bundles sizes →) rel="mask-icon"(Safari pinned tabs) —<link rel="mask-icon" href="/safari-pinned-tab.svg" color="...">is legacy. Safari has used the standard favicon for pinned tabs for years; the dedicated monochrome SVG is no longer required.msapplication-*meta tags —msapplication-TileColor,msapplication-TileImageand friends customised old Windows Start tiles. Optional at best, and skippable for almost every site.<meta name="apple-mobile-web-app-capable">for icons — it controls standalone mode, not your icon. Theapple-touch-iconlink is all the icon markup iOS needs.
Summary
The modern favicon <head> is four <link> tags plus an optional theme-color meta:
<link rel="icon" href="/favicon.ico" sizes="32x32">— legacy and tab fallback<link rel="icon" href="/favicon.svg" type="image/svg+xml">— primary scalable icon<link rel="apple-touch-icon" href="/apple-touch-icon.png">— iOS home screen<link rel="manifest" href="/site.webmanifest">— PWA icons (three entries: 192 any, 512 any, 512 maskable)
Skip rel="shortcut icon", the per-size PNG list, mask-icon, and the msapplication-* meta tags — they’re all legacy.
Continue reading:
Frequently asked questions
What HTML do I need for a favicon?
Four lines in the <head>: <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'>, and <link rel='manifest' href='/site.webmanifest'>. That covers every browser and device in 2026.
What does the type attribute do on a favicon link tag?
It tells the browser the file's MIME type — type='image/svg+xml' for an SVG — so the browser can skip a format it doesn't support without downloading it. It's how an SVG-capable browser picks the SVG while older ones fall through to the .ico.
Should I still use rel='shortcut icon'?
No. rel='shortcut icon' was never a valid relation — shortcut is meaningless and browsers only honour the icon part. Use rel='icon' on its own. Every modern browser understands it, and the old form just adds dead markup.
Where do the favicon link tags go in my HTML?
Inside the <head> element, alongside your <title> and meta tags. Order between the four favicon lines doesn't matter — browsers select by type and sizes, not by document position.
Do I need a separate link tag for each favicon size?
No. A multi-size favicon.ico bundles 16/32/48 in one file, and the SVG scales to any size, so two rel='icon' tags replace the long per-size PNG list older guides recommend. PWA sizes live in site.webmanifest, not in <link> tags.