Favicon HTML Tags — Complete Link Tag Reference

Q: Favicon HTML Tags — Complete Link Tag Reference

## Favicon HTML Tags The HTML tags in your document's tell browsers where to find your favicon files. A complete implementation covers all platforms and use cases. ### Complete Tag Set html <!-- SVG favicon (modern browsers, dark

Get the complete set of HTML link tags needed for favicons across all platforms. Includes browser tab, Apple Touch Icon, web manifest, and legacy ICO references.

Format & Technical

Detailed Explanation

Favicon HTML Tags

The HTML <link> tags in your document's <head> tell browsers where to find your favicon files. A complete implementation covers all platforms and use cases.

Complete Tag Set

<!-- Standard favicons -->
<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="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">

<!-- SVG favicon (modern browsers, dark mode support) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Web App Manifest (Android Chrome, PWA) -->
<link rel="manifest" href="/site.webmanifest">

<!-- Safari Pinned Tab (monochrome) -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#3b82f6">

<!-- Windows Tile Color -->
<meta name="msapplication-TileColor" content="#3b82f6">

<!-- Theme Color (affects browser chrome) -->
<meta name="theme-color" content="#ffffff">

Tag Attributes Explained

rel="icon" — Standard favicon declaration
type="image/png" — MIME type for PNG images
sizes="32x32" — Pixel dimensions of the icon
href="/path/to/icon" — Path to the icon file
rel="apple-touch-icon" — Specifically for Apple devices
rel="manifest" — Points to the web app manifest JSON file
rel="mask-icon" — Safari pinned tab monochrome icon

Order Matters

Browsers evaluate <link> tags in order. Place more specific declarations before generic ones:

SVG favicon (if supported, browser stops looking)
High-resolution PNG (32x32)
Standard resolution PNG (16x16)

Common Mistakes

Missing type attribute: Some browsers need the MIME type to select the right icon
Wrong sizes value: Mismatch between declared size and actual file dimensions
Relative vs absolute paths: Use consistent paths; absolute paths are safer for sub-pages
Missing Apple Touch Icon: iOS shows a screenshot instead of a proper icon
No manifest: Android cannot install the site as a PWA without it

Use Case

Every web developer needs the correct set of favicon HTML tags. This reference is used when setting up a new website, auditing an existing site's favicon implementation, migrating to a new framework, or troubleshooting missing or incorrect favicons on specific platforms.

Try It — Favicon Checker

Open full tool →