Favicon HTML Link Tags Example (Copy-Paste)

8 min read

June 11, 2026

The standard favicon HTML setup uses multiple <link rel="icon"> tags for ICO and PNG sizes, one apple-touch-icon for iOS, and a manifest link for Android install icons. Every href should be root-relative or absolute HTTPS so nested pages resolve the same files.

Below is a copy-paste reference you can drop into your layout <head>. Adjust file names to match your repo, then scan the live URL with Favicon Check to confirm detection.

Minimal favicon HTML (quick start)

Works for simple marketing sites:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Add a manifest link when you ship Android icons:

<link rel="manifest" href="/site.webmanifest">

For why each size exists, read the Favicon Sizes Guide. For step-by-step deployment, see How to Add a Favicon to Your Website.

Full production favicon HTML block

Copy this block into server-rendered <head> on every HTML template:

<!-- Legacy root ICO (automatic browser requests) -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- PNG tab icons -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Optional sharp desktop vector -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- iOS home screen -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android / PWA manifest -->
<link rel="manifest" href="/site.webmanifest">
<!-- Optional Safari pinned tab -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2563eb">

Matching file checklist at site root (or consistent /icons/ folder):

/favicon.ico
/favicon-16x16.png
/favicon-32x32.png
/favicon.svg              (optional)
/apple-touch-icon.png
/android-chrome-192x192.png
/android-chrome-512x512.png
/site.webmanifest
/safari-pinned-tab.svg     (optional)

Matching site.webmanifest

Pair the HTML block with manifest JSON:

{
  "name": "My Site",
  "short_name": "My Site",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2563eb",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Manifest icon details in Web App Manifest Icons Explained. SVG favicon notes in SVG Favicon Guide.

Tag-by-tag reference

`rel="icon"` with favicon.ico

<link rel="icon" href="/favicon.ico" sizes="any">

Browsers request /favicon.ico even without this tag. Declaring it explicitly helps auditors and guarantees the correct file when yours lives at root.

Use sizes="any" for ICO and SVG. Do not use sizes="any" on PNG tags.

PNG favicon sizes

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

The sizes attribute must match real pixel dimensions. Wrong metadata confuses tools and can pick the wrong file on retina tabs.

SVG favicon

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Optional. Always keep PNG or ICO fallbacks. Safari iOS and manifest consumers still need raster icons.

apple-touch-icon

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

Required for iOS home screen branding. iOS ignores your 32×32 tab PNG here.

Web manifest

<link rel="manifest" href="/site.webmanifest">

Without this tag, Android install icons in JSON never load. Common mistake documented in Common Favicon Mistakes That Break Your Brand.

mask-icon (Safari pinned tabs)

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2563eb">

Monochrome SVG only. Used when users pin tabs in Safari macOS. Optional for most sites.

Path rules that prevent broken icons

Always root-relative:

<!-- Correct -->
<link rel="icon" href="/favicon-32x32.png">
<!-- Wrong on nested URLs -->
<link rel="icon" href="favicon-32x32.png">

On https://example.com/docs/page, the wrong version requests /docs/favicon-32x32.png and 404s. That is the top cause of missing tab icons in Favicon Not Showing in Browser? Fix It.

Use HTTPS URLs on HTTPS sites. Mixed HTTP icon URLs get blocked.

Where to place tags in `<head>`

Put favicon links early in <head>, before heavy scripts. Order among icon tags rarely breaks modern browsers if all files exist.

Example skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Example Site</title>
  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">
  <link rel="stylesheet" href="/styles.css">
</head>

Icons must appear in View Page Source, not only after JavaScript runs.

Framework output examples

Next.js App Router metadata

export const metadata = {
  icons: {
    icon: [
      { url: "/favicon.ico", sizes: "any" },
      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
      { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
    ],
    apple: "/apple-touch-icon.png",
  },
  manifest: "/site.webmanifest",
};

Verify rendered HTML on the deployed URL. Build-time metadata can differ from local assumptions.

Plain WordPress / PHP header

<link rel="icon" href="<?php echo esc_url( home_url( '/favicon.ico' ) ); ?>" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo esc_url( home_url( '/favicon-32x32.png' ) ); ?>">
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo esc_url( home_url( '/apple-touch-icon.png' ) ); ?>">
<link rel="manifest" href="<?php echo esc_url( home_url( '/site.webmanifest' ) ); ?>">

home_url() keeps paths correct on nested routes.

Variants for common scenarios

SVG-first with PNG fallback

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" href="/favicon.ico" sizes="any">

ICO-only legacy site (not recommended)

<link rel="icon" href="/favicon.ico" sizes="any">

Works for basic tabs. Missing iOS and Android coverage.

CDN-hosted icons

<link rel="icon" type="image/png" sizes="32x32" href="https://cdn.example.com/icons/favicon-32x32.png">

Allowed if MIME types and HTTPS are correct. Same-origin root paths are simpler to audit.

HTML mistakes this template avoids

Mistake	This template
Relative paths on nested pages	Root-relative `/...` paths
PNG with `sizes="any"`	Exact `16x16` and `32x32`
Manifest JSON without link tag	Includes `rel="manifest"`
JS-injected icons only	Static `<head>` block
Missing apple-touch-icon	180×180 declared
Upscaled blurry PNGs	Assumes real pixel exports from master

Blurry icons after correct HTML usually mean bad source art, not bad tags. See Favicon Looks Blurry? Fix Pixelation.

After you paste - verification checklist

View-source on a nested page (not only /).
Click each href in a private window. Expect 200 and correct MIME type.
Confirm /favicon.ico loads without login.
Run Favicon Check on the public URL.
Hard-refresh if you still see an old icon. Read Favicon Cache Explained.

Tag order - does it matter?

Browsers pick the best matching icon from declared candidates. Exact order rarely breaks tabs if all files exist. Teams still follow conventions for predictability and audits.

Common convention:

favicon.ico with sizes="any" for legacy automatic requests
PNG sizes from largest to smallest or 32×32 then 16×16
SVG after raster fallbacks
apple-touch-icon separate from tab icons
manifest link last among icon-related tags

Safari may prefer apple-touch-icon when adding to home screen regardless of tab order. Android reads manifest JSON, not tab icon order.

When migrating from ICO-only to a full stack, add new tags without removing /favicon.ico until you confirm crawlers and bookmarks pick up PNGs. Run Favicon Check before and after to compare detected tags.

Troubleshooting copy-paste HTML

Symptom after paste	Check
Generic tab on `/` only	Relative `href`, missing leading `/`
Icon on homepage, missing on blog	Layout not shared across templates
Manifest icons missing in audit	Forgot `<link rel="manifest">`
404 in checker for PNG	File not deployed to path in `href`
SVG works, ICO missing in audit	No file at `/favicon.ico`
Old icon after paste	Cache - version file names per Favicon Cache Explained

Paste the block once into your base layout, not into individual page components. One missed template means one section of the site shows the wrong brand mark in tabs.

Subfolder deployments

Sites served from https://example.com/app/ still need root-relative icon paths unless icons live under the same subpath intentionally:

<link rel="icon" href="/favicon-32x32.png">

serves from domain root, not /app/favicon-32x32.png. If your static assets live under /app/assets/, update every href consistently:

<link rel="icon" type="image/png" sizes="32x32" href="/app/assets/favicon-32x32.png">

Mixed paths (/favicon.ico at root but PNGs under /app/) confuse audits and break on subdomain moves. Pick one folder strategy and mirror it in manifest JSON src values.

FAQ

How many favicon link tags do I need?

At minimum three plus manifest: ICO or 32×32 PNG, apple-touch-icon, and manifest link. A full stack adds 16×16, optional SVG, and mask-icon.

Can I copy this HTML exactly?

Yes, if your files match the paths. Rename href values to match your actual file names and folder structure.

Should favicon.ico or PNG come first?

Either order works when all files exist. Many teams list ICO first for legacy clients.

Do I need separate HTML on every page?

Use one shared layout template. Every HTML response should include the same icon block.

What `type` attribute should PNG favicons use?

type="image/png". Explicit types help validators and audit tools.

Why add manifest if I am not building a PWA?

Android home screen pins read manifest icons. Users can add your marketing site without a service worker.

How do I update favicon HTML after a rebrand?

Change file contents or file names, update every href, bust cache with new file names if needed, then rescan with Favicon Check.

Does Open Graph use these link tags?

No. Social previews use og:image meta tags. Run the Open Graph scanner separately for link cards. Favicon HTML only affects browser chrome and install surfaces.

Bottom line

Copy the full <head> block with ICO, 16×16, 32×32, apple-touch-icon, and manifest link. Use root-relative HTTPS paths, server-render tags on every template, and validate with Favicon Check. Pair this reference with the Favicon Sizes Guide for pixel exports and Web App Manifest Icons Explained for JSON details.

Favicon HTML Link Tags Example (Copy-Paste)

Minimal favicon HTML (quick start)

Full production favicon HTML block

Matching site.webmanifest

Tag-by-tag reference

`rel="icon"` with favicon.ico

PNG favicon sizes

SVG favicon

apple-touch-icon

Web manifest

mask-icon (Safari pinned tabs)

Path rules that prevent broken icons

Where to place tags in `<head>`

Framework output examples

Next.js App Router metadata

Plain WordPress / PHP header

Variants for common scenarios

SVG-first with PNG fallback

ICO-only legacy site (not recommended)

CDN-hosted icons

HTML mistakes this template avoids

After you paste - verification checklist

Tag order - does it matter?

Troubleshooting copy-paste HTML

Subfolder deployments

FAQ

How many favicon link tags do I need?

Can I copy this HTML exactly?

Should favicon.ico or PNG come first?

Do I need separate HTML on every page?

What `type` attribute should PNG favicons use?

Why add manifest if I am not building a PWA?

How do I update favicon HTML after a rebrand?

Does Open Graph use these link tags?

Bottom line

Read more

Apple Touch Icon Size Guide (180x180)

Favicon Looks Blurry? Fix Pixelation

Favicon Not Showing in Browser? Fix It

Favicon HTML Link Tags Example (Copy-Paste)

Minimal favicon HTML (quick start)

Full production favicon HTML block

Matching site.webmanifest

Tag-by-tag reference

rel="icon" with favicon.ico

PNG favicon sizes

SVG favicon

apple-touch-icon

Web manifest

mask-icon (Safari pinned tabs)

Path rules that prevent broken icons

Where to place tags in <head>

Framework output examples

Next.js App Router metadata

Plain WordPress / PHP header

Variants for common scenarios

SVG-first with PNG fallback

ICO-only legacy site (not recommended)

CDN-hosted icons

HTML mistakes this template avoids

After you paste - verification checklist

Tag order - does it matter?

Troubleshooting copy-paste HTML

Subfolder deployments

FAQ

How many favicon link tags do I need?

Can I copy this HTML exactly?

Should favicon.ico or PNG come first?

Do I need separate HTML on every page?

What type attribute should PNG favicons use?

Why add manifest if I am not building a PWA?

How do I update favicon HTML after a rebrand?

Does Open Graph use these link tags?

Bottom line

Read more

Apple Touch Icon Size Guide (180x180)

Favicon Looks Blurry? Fix Pixelation

Favicon Not Showing in Browser? Fix It

`rel="icon"` with favicon.ico

Where to place tags in `<head>`

What `type` attribute should PNG favicons use?