Buy a square — $1

How to add a favicon to your site in 2026 (and stop being a clown)

Your favicon is the smallest asset you ship and the one people see most. Here's the minimum that works everywhere, why Square Town puts a clown on sites without one, and how to check yours in ten seconds.

Published 2026-08-188 min readMarkdown ↗

To add a favicon in 2026 you need two files and three lines in <head>: an SVG icon (<link rel="icon" href="/icon.svg" type="image/svg+xml">), a fallback favicon.ico at your site root, and a 180×180 PNG apple-touch-icon. Add a manifest with 192 and 512 px PNGs if you care about Android home screens. That's the whole modern set. Anything more is optional; anything less and some client somewhere shows a blank square — or, on Square Town (square.pov.town), a clown.

TL;DR — Put favicon.ico at /favicon.ico, add an SVG icon via <link rel="icon">, add a 180 px apple-touch-icon.png, optionally a web manifest with 192/512 px PNGs. Verify with https://www.google.com/s2/favicons?domain=yoursite.com&sz=64. If that URL shows a real icon, you're done. If it doesn't, Square Town's Hall of Clowns will notice.

Why the favicon matters more than its size suggests

The favicon shows in every tab, bookmark, history entry, share sheet, and in a lot of places you don't control: search results, link previews, RSS readers, and third-party services that fetch icons by domain. Google's favicon service is one of those, and Square Town uses it as the source for the wall (definition: What is a favicon?): paste your URL, Square Town asks Google for your domain's icon and renders it on your square. No upload. If your site has no favicon there is nothing to render, so you get a clown emoji and a spot in the public Hall of Clowns until you fix it. It's the one line in how Square Town works that people find out about the hard way.

/favicon.ico is the 1999 convention: browsers request it from the site root without being told. It still works, and some clients (old crawlers, some email apps, some favicon services) only look there. Keep it, and make it a real ICO containing 16×16 and 32×32 images (an ICO is a container; a PNG renamed to .ico mostly works but isn't the same thing).

<link rel="icon"> is what modern browsers actually use. It lets you point at any path and any format, including SVG, and declare sizes. Browsers pick the best match from what you list. The order and type attributes matter for SVG support detection.

Method Who reads it Formats Notes
/favicon.ico at site root Every browser as a fallback; many services and crawlers ICO (multi-size) Requested automatically; keep it even if you use <link>
<link rel="icon" type="image/svg+xml"> Modern browsers (Chrome, Firefox, Edge; Safari support has been partial and version-dependent) SVG Crisp at any size, supports dark mode via CSS inside the SVG
<link rel="icon" sizes="32x32"> PNG All browsers PNG Explicit raster fallback
<link rel="apple-touch-icon"> iOS/iPadOS home screen, some Android browsers, macOS Safari pinned tabs PNG 180×180 No transparency; iOS rounds the corners itself
Web app manifest icons Android/Chrome install prompt and home screen PNG 192×192 and 512×512 Only needed if you want "Add to home screen" to look right

The sizes that actually matter in 2026

  • 16×16 and 32×32 — tabs and bookmarks on standard and HiDPI screens. Put both in the ICO.
  • SVG — one file, every size, sharp everywhere it's supported. If your logo is a simple shape, this is your primary icon.
  • 180×180 PNG — apple-touch-icon. Apple devices ignore your SVG and ICO for the home screen.
  • 192×192 and 512×512 PNG — manifest icons for Android install and splash screens.

You do not need the 2014-era pile of 57, 60, 72, 76, 114, 120, 144, 152 px Apple sizes, Windows tile colours, or browserconfig.xml. Those generator packs still exist; ignore them.

The dark-mode SVG trick

Because an SVG favicon is a document, it can contain a <style> block with a prefers-color-scheme media query. Browsers that support SVG icons will re-render it to match the tab strip's theme. A black glyph that turns white in dark mode:

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

Two caveats. First, this only affects clients that render SVG icons; the ICO and PNGs don't change, so make sure the raster fallbacks have enough contrast on both light and dark backgrounds (a coloured shape on a transparent background usually works). Second, third-party favicon services, including the one Square Town uses, generally serve a raster of your icon and won't reflect the media query — design so it looks fine either way.

Copy-paste <head> snippet

<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">

And the manifest, if you want it:

{
  "name": "Your Site",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Files to ship: /favicon.ico (16 + 32), /icon.svg, /apple-touch-icon.png (180), /icon-192.png, /icon-512.png. Five files, four lines. Serve them with a long cache lifetime and change the filename when you change the icon.

Framework one-liners

  • Next.js (App Router): drop app/icon.png (or icon.svg) and app/apple-icon.png in the app directory; Next generates the <link> tags. app/favicon.ico is also picked up.
  • Astro, Vite, SvelteKit, Nuxt, plain static: put the files in public/ so they're served from the root; add the <link> tags to your layout's <head>.
  • WordPress: Appearance → Customize → Site Identity → Site Icon (512×512 PNG). WordPress writes the tags for you.
  • Hugo / Jekyll / Eleventy: files in static/ (Hugo) or the site root (Jekyll, Eleventy passthrough) plus the tags in your base template.
  • Shopify / Squarespace / Wix / Webflow: each has a "favicon" field in site settings; upload a square PNG or SVG.
  • GitHub Pages: commit favicon.ico and friends at the repo root (or docs/), add the tags to your HTML.

How to check your favicon in ten seconds

  1. Open https://yoursite.com/favicon.ico in a browser. You should see an icon, not a 404 or your homepage.
  2. Open https://www.google.com/s2/favicons?domain=yoursite.com&sz=64. This is Google's favicon service, the same URL pattern Square Town uses to fetch icons. If it returns your icon at 64 px, every service that relies on it will show you correctly. If it returns a generic globe or nothing, you have work to do or you're waiting on Google's cache.
  3. Load your site in a private window and look at the tab. Private windows skip your local favicon cache.
  4. Check the browser's DevTools Network tab for a 200 on the icon URLs from your <link> tags.

How Square Town detects missing favicons — and the recheck button

When you buy a square, Square Town requests your domain from Google's favicon service at 64 px. Google's service answers 404 for domains it has no real icon for and 200 when it does. 404 means clown: your square shows 🤡, your domain appears in the Hall of Clowns list in the side panel, and the live feed announces it. It's automatic and it's the whole detector.

To get out: add a favicon, confirm the Google URL above shows it, then click your square on the wall and press "I fixed my favicon — recheck". Square Town re-asks Google; if the answer changed, your icon appears and the feed announces your escape (🎈). Google's service caches, so if you just added the icon and the URL still shows nothing, wait and try again rather than mashing recheck. Read the longer story in Hall of Clowns: sites without favicons.

Common mistakes

  1. Wrong path. href="favicon.ico" (relative) breaks on any page not at the root. Use /favicon.ico.
  2. The old icon won't go away. Browsers cache favicons aggressively and separately from pages. Rename the file (icon-v2.svg), or open a private window to confirm the server is right.
  3. Blocked by robots.txt or auth. If your icon lives behind a login, a Cloudflare challenge, or a Disallow rule for crawlers, third-party services can't fetch it. Serve icons publicly and let bots have them.
  4. Redirects. www → apex → https chains that end at a 404 for /favicon.ico because only the app routes were migrated. Test the final URL.
  5. Wrong content type. An SVG served as text/plain won't render. Check the response header is image/svg+xml.
  6. Non-square or padded images. Icons are square; a wide logo shrunk into 16 px becomes a smear. See favicon design tips at 16 px.
  7. PNG renamed to .ico. Usually renders in browsers, sometimes fails in strict tools. Generate a real ICO.
  8. Only setting a Next/Nuxt "head" component on some pages. Put the icon links in the root layout so they're on every route.

FAQ

What is the minimum favicon setup that works everywhere?

A multi-size favicon.ico at the site root plus an SVG icon via <link rel="icon" type="image/svg+xml"> and a 180×180 apple-touch-icon.png. Add manifest icons (192, 512) if you want a proper Android home-screen icon.

Do I still need favicon.ico in 2026?

Yes, keep it. Modern browsers use <link rel="icon">, but many services, crawlers and older clients still request /favicon.ico directly.

Can a favicon change with dark mode?

Yes, if it's an SVG: include a <style> with @media (prefers-color-scheme: dark) inside the SVG. Raster icons (ICO, PNG) don't switch, so keep them legible on both backgrounds.

How do I check what Google (and Square Town) see for my favicon?

Open https://www.google.com/s2/favicons?domain=yoursite.com&sz=64. That's the URL pattern Square Town uses when it fetches your icon; if it shows your icon, Square Town will too.

Why does my site have a clown on Square Town?

Square Town asked Google's favicon service for your domain and got a 404, meaning no favicon was found. Add one, verify the Google URL above shows it, then click your square and press "I fixed my favicon" to be rechecked.

I added a favicon but Square Town still shows a clown. Why?

Most likely Google's favicon service hasn't refreshed its cache yet, or the icon isn't reachable (wrong path, redirect to 404, blocked for bots). Fix the URL check first, then press recheck again later.

Put your favicon on the wall

1 square = $1, one-time, no account. Paste a URL, pick a cell, done. Open the wall →

Keep reading