Favicons: The Quiet Tell of a Professional Website

The favicon is the smallest piece of branding on a website. Sixteen by sixteen pixels in the browser tab, slightly larger on a phone home screen, slightly larger still on the bookmarks bar. Most visitors never consciously look at it. And yet a missing or broken favicon is one of the clearest tells that a website was put together carelessly. The browser fills the gap with a generic page-icon glyph; the visitor reads that as a vendor that did not finish.

This post walks through what a complete favicon set actually looks like in 2026, why the modern requirements are different from the favicon.ico-only era, how I produce the set on every build, and how you can check your own site with a free tool I have started recommending called Favicraft.

Why the favicon matters

A working favicon does three small things that compound:

It distinguishes your tab in a stack of open tabs. Most people have somewhere between five and twenty tabs open at any given moment. The favicon is what lets a visitor flick back to your site without reading the truncated tab title. A missing favicon means your tab looks like every other generic tab; the visitor has to read the title and search for it.

It identifies your bookmark. When a visitor bookmarks a page or pins your site to their home screen, the icon is what they see. A polished icon reads as a polished business. A blank rectangle or a cropped screenshot reads as a vendor still figuring out the basics.

It signals craftsmanship. The visitor who notices a clean favicon does not consciously think "that company sweats the details." The visitor who notices a missing one consciously thinks something is off. The asymmetry is real.

The cost of getting it right is one afternoon of work, once. The cost of getting it wrong is a small but constant drag on every visit thereafter.

What "complete" looks like in 2026

The modern favicon set is six files plus a manifest. Each one serves a specific surface:

• favicon.svg?v=32cf83035697 — the master vector. Modern browsers (Chrome, Edge, Safari, Firefox, Brave, Arc) all prefer the SVG when it is available. It scales infinitely and stays crisp at every size. It is also the source you regenerate the rasters from.
• favicon.ico — the legacy multi-resolution Windows icon, embedding 16x16 and 32x32 PNGs. Required for older browsers and a few corporate environments that still request /favicon.ico at the root by reflex.
• favicon-32.png?v=f60587eb95f7 — the 32x32 raster, used by some browsers when SVG is unavailable.
• apple-touch-icon.png?v=393bfa6a2e45 — 180x180 PNG used by iOS and iPadOS when a visitor adds your site to the home screen. iOS does not use the SVG; without this, the home-screen icon is a screenshot of the page header, which looks unintentional.
• favicon-192.png?v=617d887fa1cf and favicon-512.png?v=ca56f4e75c7c — Android home-screen icons, referenced from the manifest below.
• site.webmanifest (or manifest.json) — the small JSON file that tells the browser the site name, theme color, and which icons to use for the home-screen install. Without this, Android's home-screen install looks janky.

Six files, one manifest. Each one has a specific job. Together they cover every place a favicon shows up: browser tabs, bookmark menus, history lists, recently-closed-tab menus, iOS home screen, Android home screen, Slack and Discord link unfurls, RSS readers that pull a site icon, and the tiny icon next to your site in Google search results when Google's crawler decides to render one.

The most common ways favicons go wrong

I have audited enough small-business websites to see the same five patterns over and over.

Missing entirely. The single most common pattern. The site has no favicon at all; every browser draws the default page icon. Often happens on freshly-launched WordPress or Wix sites where the favicon upload step was skipped during setup.

A 32x32 PNG used everywhere. A common WordPress shortcut: one PNG uploaded as the "site icon" and reused for every favicon surface. It works in browser tabs but looks pixelated on Apple devices (which expect 180x180) and on Android home screens (which expect 192x192 or 512x512).

Wrong colors. The favicon was designed with the same dark text on a light background as the logo. On a dark-mode browser tab, the dark icon disappears. The fix is either an SVG with a tile-style background or a separate icon optimized for both modes via the media attribute on the <link> tags.

Broken cache. The favicon was updated on the server but the browser is still serving the old one from cache. The visitor sees the old icon for weeks. Common after a rebrand. The fix is a versioned filename or a cache-bust query string.

The "P" letter mark from a default generator. A platform's default icon-generator creates a generic letter-on-color tile from the page title. The result is technically a favicon, but it does not match the brand and shows up identically on every site that started with the same default. Looks unfinished even though the slot is filled.

How I produce the set

For every site I build, the favicon set is part of the standard plan. The flow:

1. The brand designer (which is also me, on most builds) draws the master icon in SVG. The icon lives at src/assets/img/favicon.svg?v=32cf83035697&v=32cf83035697 and is hand-tuned for legibility at 16 pixels. That last constraint is non-negotiable; if the icon does not read at 16, it does not get shipped.
2. A small Node script runs at build time, takes the SVG, and renders it at 32, 180, 192, and 512 pixels via headless Chrome. The rasters are saved alongside the SVG and the legacy favicon.ico, plus a site.webmanifest with the brand name and theme color.
3. The site's <head> template references all six files with the appropriate rel and sizes attributes so the right browser picks the right icon. No fallback or guessing.
4. Cache-busting is handled by an Eleventy plugin that hashes the file contents into the URL, so when the icon changes the browser fetches the new one immediately.

The whole pipeline is one command (npm run favicons) and it runs whenever the brand changes. Once at the start of an engagement, occasionally during a rebrand, never as ongoing maintenance. After that the favicon ships with every deploy without anyone thinking about it.

How you can check your own site

The cleanest free tool I have found is Favicraft. It is run by a small team that also makes a paid favicon generator, but the check tool itself is free and has no email gate.

The flow is the same as most inspection tools:

1. Visit favicraft.com/check.
2. Paste your site's URL.
3. Wait a few seconds for the report.

The report tells you which favicon files are present, which are missing, what the actual served sizes are, whether the manifest is wired up correctly, and which browser surfaces are likely to fall back to the default page icon. It is the most thorough free favicon inspector I have found, and it tells you more than the standard browser-tab visual check.

What to look for in the report

A clean pass shows green checks across the SVG icon, the legacy ICO, the apple-touch-icon, both Android sizes, and the manifest. If any of those are red or missing, you have a real gap.

The two reds I see most often:

Missing apple-touch-icon. iOS users adding the site to their home screen will see a screenshot rather than your branded icon. Easy fix; render a 180x180 PNG from your SVG and add a <link rel="apple-touch-icon"> tag.

Missing or invalid manifest. Android home-screen installs look unfinished without it. Easy fix too; the manifest is a 10-line JSON file referencing your two PNG sizes plus a name and a theme color.

The fixes are not expensive and the difference shows up immediately on every device that visits next.

The thirty-day argument

If your site is missing favicons or only has a partial set, the lift from completing it is small but compounds over time. Every browser tab looks more polished. Every iOS home-screen install reads as intentional. Every Android install behaves like a real site rather than a half-built one. Every bookmark in someone's bookmarks bar identifies your business.

None of this drives a measurable conversion lift in isolation. But favicons are part of the broader pattern that separates a site that reads as professional from a site that reads as cobbled together. The cost of fixing it is one afternoon. The cost of leaving it broken is a small constant drag on every visitor for the lifetime of the site.

Run the check on your site. The result usually tells you what to do next.