HTML meta tags for favicons
A complete favicon installation needs more than <link rel="icon">. Browsers, iOS, Android, Windows, and PWA installers each look at a different tag. Here is the canonical snippet to drop into every page's <head>.
<!-- Place these in your <head> -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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="96x96" href="/favicon-96x96.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#ffffff">Tag-by-tag breakdown
<link rel="icon" type="image/x-icon" href="/favicon.ico">
The legacy fallback. Every browser since Internet Explorer 5 will look for /favicon.ico automatically, even if you forget the link tag — but declaring it explicitly is faster (no 404 round-trip) and works for sites served from a sub-path. Use a multi-resolution ICO that contains 16×16, 32×32, and 48×48 variants so older Windows applications (taskbar, Explorer) get the right size. The encoder on OhMyIcon produces exactly that container.
<link rel="icon" type="image/png" sizes="16x16"> + 32x32 + 96x96
Modern browsers prefer PNGs because they support alpha and crisper anti-aliasing than the ICO container. The 16×16 is for tabs, 32×32 for the bookmark bar and high-DPI tabs, 96×96 for desktop shortcut icons on Windows and ChromeOS.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
When a user adds your site to their iOS home screen, Safari uses this image. It must be 180×180 (the largest spec), a PNG, with no transparency (Apple fills transparent regions with black on older iOS versions). Apple applies the rounded mask for you — supply a square image with no pre-rounded corners.
<link rel="manifest" href="/manifest.json">
The Web App Manifest controls how Chrome (and other Chromium browsers) installs your site as a PWA on Android, ChromeOS, and Windows. It declares the app's name,short_name, theme_color, display mode, and the Android home-screen icons (192×192 and 512×512). Customise the name and theme colour before deploying or the install prompt will look generic.
{
"name": "Your Site Name",
"short_name": "Site",
"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"
}<meta name="msapplication-config" content="/browserconfig.xml">
Microsoft's old Start tile system (Windows 8/10) uses an XML manifest to bind a 150×150 image and a tile colour. You can probably skip this if your audience is exclusively on macOS / mobile, but it costs ~200 bytes to include and prevents the awkward magnified-favicon look in pinned Windows tiles.
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#ffffff</TileColor>
</tile>
</msapplication>
</browserconfig><meta name="theme-color" content="#ffffff">
Sets the colour of the mobile browser's URL bar (Chrome on Android), the Safari tab chrome (iOS 15+), and the PWA window decoration. Pick a colour that complements your brand and doesn't fight the favicon. You can also supply a separate dark variant with media="(prefers-color-scheme: dark)".
Where to put the tags
All of the above belong inside <head>. Put the favicon tags after your document <title> and before any preconnects to keep them easy to find. Most static-site generators have a layout template — paste the snippet once, ship everywhere.
Validation
Use the favicon checker to confirm every tag is present in the deployed HTML, or open Chrome DevTools → Application → Manifest to see the parsed manifest. Real Favicon Generator's checker is also useful for cross-validation.