HTML · Favicon

Favicon HTML: The Code and Files You Need in 2026

Q: What size should a favicon be?

32×32 for favicon.ico, 180×180 for the Apple icon, 192 and 512 for the manifest. Google recommends bigger than 48×48.

Q: Do I need a link tag for favicon.ico?

Not strictly; browsers request /favicon.ico on their own. The tag protects you if that changes.

Short answer

Put favicon.ico in your site root and add four tags to <head>: an ICO, an SVG, a 180×180 apple-touch-icon, and a web manifest with 192 and 512 icons. That covers browsers, Google, iPhone home screens and Android.

Checked against MDN: <link>, Evil Martians: How to favicon, Google: Favicon in Search and Can I use: SVG favicons in October 2026.

The code

<head>

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

manifest.webmanifest

{
  "name": "My App",
  "short_name": "MyApp",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ],
  "display": "standalone"
}

The files

File	Size	Used by
`favicon.ico`	32×32 (can hold 16 and 48)	Every browser, Google, feed readers
`icon.svg`	Any	Modern browsers; scales sharply
`apple-touch-icon.png`	180×180	iPhone and iPad home screens
`icon-192.png`, `icon-512.png`	192×192, 512×512	Android, installed web apps
`icon-mask.png`	512×512, logo in a 409 px circle	Android masked icons

Keep favicon.ico at the root (/favicon.ico). Browsers request it there even without a tag.

Dark mode favicon

An SVG favicon can change color with the system theme:

icon.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #111; }
    @media (prefers-color-scheme: dark) {
      path { fill: #f0f0f0; }
    }
  </style>
  <path d="…" />
</svg>

SVG favicons work in Chrome, Edge and Firefox, and in Safari from version 26.

Mistakes to avoid

You see	Why	Fix
Chrome downloads both ICO and SVG	`sizes="any"` on the ICO tag	Use `sizes="32x32"`
No favicon in Google	Google doesn't use SVG	Keep `favicon.ico` or a PNG
Blurry home screen icon	No `apple-touch-icon`	Add a 180×180 PNG
Icon blocked	CSP `img-src` blocks it	Allow the favicon's origin in `img-src`

FAQ

What size should a favicon be?

32×32 for favicon.ico, 180×180 for the Apple icon, 192 and 512 for the manifest. Google recommends bigger than 48×48.

Do I need a link tag for favicon.ico?

Not strictly; browsers request /favicon.ico on their own. The tag protects you if that changes.

PNG or ICO?

Both work. Keep an ICO at the root for older tools and add PNG or SVG tags.

Is `shortcut icon` still needed?

No. rel="icon" is enough.