The Favicon HTML Link Tag Guide: Every Tag You Need
- The standard favicon link tag is: link rel="icon" type="image/png" href="/favicon.png"
- For iPhone and iPad home screen: link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"
- For PWA and Android: link rel="manifest" href="/site.webmanifest" (references the manifest JSON with icon paths)
- For most standard websites, the icon tag plus apple-touch-icon are sufficient — the rest cover edge cases
Table of Contents
Here are all the HTML link tags you need to support favicons across browsers, devices, and platforms — ordered by priority and annotated with when each one is actually required versus optional.
The Standard Favicon Link Tag (Works Everywhere)
This is the tag you need first. Add it inside the <head> element of every HTML page on your site:
<link rel="icon" type="image/png" href="/favicon.png">This covers Chrome, Firefox, Edge, and Safari on both desktop and mobile — all current versions.
If you are using ICO format:
<link rel="icon" type="image/x-icon" href="/favicon.ico">To include multiple sizes (optional but better):
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">When multiple sizes are provided, the browser picks the most appropriate one for the context. This is more thorough but not strictly required — most browsers handle a single PNG file well.
The href path should always start with / — this makes the path root-relative, so it works on every page including subpages, not just the homepage.
Apple Touch Icon (iOS and iPadOS Home Screen)
When someone on iPhone or iPad taps "Add to Home Screen," iOS uses the Apple touch icon as the home screen shortcut image. Without this tag, iOS crops your regular favicon (usually with poor results).
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">The standard size is 180x180 pixels — iOS scales it down for older devices automatically.
Notes:
- iOS automatically adds a rounded corner mask and gloss effect (on older iOS versions) — design with a square image, iOS handles the rounding
- If you want to control the look (no rounding), add
rel="apple-touch-icon-precomposed"— this tells iOS not to apply any effects - If no apple-touch-icon is found, iOS falls back to a screenshot of the page — which is why it is worth including
This tag is also respected by some Android browsers as a fallback when no manifest icon is found.
Sell Custom Apparel — We Handle Printing & Free ShippingAndroid and PWA Manifest Link
For Android home screen icons and PWA installability, your site needs a web app manifest file. Reference it with:
<link rel="manifest" href="/site.webmanifest">The site.webmanifest file is a JSON file that includes the icon paths, app name, and display settings. A minimal version:
{
"name": "Site Name",
"short_name": "Name",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}Without a manifest, Android Chrome cannot show the "Add to Home Screen" install prompt — the app is not installable as a PWA. For a standard content website, the manifest is optional but improves the mobile experience.
Multiple Sizes: When to Include Them and When Not To
You do not need a separate link tag for every favicon size. Browsers select the best available size automatically from the sizes you provide. Here is a practical guide:
For most websites (minimal but correct):
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">For fuller browser coverage (add these if you want to cover more bases):
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">For Safari pinned tabs (optional, SVG):
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">The mask-icon tag requires an SVG specifically designed as a single-color mask — if you do not have that, skip it.
The minimal three-tag set covers the vast majority of cases. The extra size tags add completeness without meaningful visual difference for most users.
Full Code Block: Complete Favicon Head Tags
Copy this complete set and paste into your HTML <head>. Replace file paths to match your actual filenames:
<!-- Standard favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple touch icon (iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Web app manifest (Android + PWA) -->
<link rel="manifest" href="/site.webmanifest">
<!-- Optional: Safari pinned tab (SVG only) -->
<!-- link rel="mask-icon" href="/safari-pinned-tab.svg" color="#your-color" -->If you only need the minimal version (covers 95% of use cases):
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">The Toucan Favicon Generator copies these tags automatically after generating your favicon set — so you do not need to write them manually. Generate the files and copy the tag block from the results page.
Generate the Favicon Files to Go with These Tags
The Toucan Favicon Generator outputs the exact link tags above automatically after generating your favicon set. Upload any image and copy the ready-to-paste HTML in one step.
Open Favicon GeneratorFrequently Asked Questions
Where do favicon link tags go in HTML?
Inside the head element, typically after meta charset and meta viewport but before stylesheets. Tag placement within head does not affect rendering — the key is that all link tags are inside head, not body.
Do I need all these favicon link tags for a simple website?
No. For most websites, two tags are sufficient: a standard icon link tag and an apple-touch-icon. The manifest link adds Android/PWA coverage. Everything else is for edge cases that most visitors will never encounter.
What is the difference between rel="icon" and rel="shortcut icon"?
rel="shortcut icon" is an older syntax from early Internet Explorer. Modern browsers accept rel="icon" — use that. The shortcut icon pattern still works but is considered legacy syntax and is not necessary for any current browser.
Do I need the type attribute in favicon link tags?
Not strictly required for modern browsers, but including it (type="image/png" or type="image/x-icon") is good practice. It provides an explicit content-type hint and helps in edge cases where a server might send the wrong MIME type for the favicon file.
