A favicon is the smallest piece of branding a site has and the easiest to get wrong without noticing, because the browser you are testing in cached the right answer weeks ago. The checker above fetches the page cold, follows every icon it declares, and reports what each file really is.

What size should a favicon be?

The short answer, for a site being built today:

• 32×32 PNG — the tab icon on most screens. The one that matters most.
• 180×180 PNG — apple-touch-icon, used when someone adds the site to an iOS home screen.
• 192×192 and 512×512 PNG — declared in the web app manifest, for Android home screens, install prompts and splash screens. Chrome will not offer the install prompt without the 512.
• An SVG — modern browsers prefer it and it stays sharp at any size.
• /favicon.ico — a multi-size .ico (16 and 32) at the root, for old browsers, feed readers and the many link-preview bots that ask for that exact path without reading your HTML.

16×16 is no longer worth making on its own: browsers downscale the 32 cleanly, and a separate 16 mostly adds a file to maintain. The historical sizes you may still see in generators — 57, 60, 72, 76, 114, 120, 144, 152 — were for iOS versions that have not shipped in years.

The HTML, complete

<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="/site.webmanifest">

That is the whole set, and the order matters less than people think — browsers pick bytype and sizes, not by position. The manifest carries the large icons:

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

Two details that cost people hours. The apple-touch-icon must be a square PNG with no transparency — iOS composites it onto a white rounded square, and a transparent logo comes out as a black blob on some versions. And the file needs no rounded corners of its own; the operating system adds them.

Why a broken favicon looks fine to you

Browsers cache favicons harder than almost anything else, often for weeks, and in a store that a normal cache clear does not touch. So the sequence that hides a broken icon is ordinary: you had one, you changed the path, the old file is still in your browser’s icon database, and every visitor who has never been to the site sees a blank page. Checking in a private window helps; checking from outside the browser, as this tool does, is what actually settles it.

The failures worth naming, all of them invisible in your own tab:

• A declared icon that 404s. Worse than declaring none, because some browsers stop looking rather than falling back to /favicon.ico.
• An icon URL that returns the page. Single-page apps answer 200 with the app shell for any unknown path, so a missing icon looks present in every check that only reads the status code. The checker flags the content type.
• A sizes attribute that lies. The browser chooses by what you declared and then renders what it got.
• No apple-touch-icon. iOS falls back to a screenshot of the page, which is never what anyone wants on a home screen.

Does a favicon affect SEO?

Indirectly and specifically: Google shows a favicon next to the result on mobile search. Its documented requirements are that the file is a multiple of 48×48 (so 48, 96, 144 or larger), that the URL is stable, that Googlebot can crawl it — it must not be blocked in robots.txt — and that the icon is not adult or hateful. A site without a usable one gets a generic globe next to its listing, which is a small loss on every mobile impression.

Google reads the favicon from the home page’s declaration, so the icon on the root of the domain is the one that shows in results even when a deeper page has its own. And it does not re-crawl it often, which is why a fixed favicon can take weeks to appear in search.

Frequently asked

Do I still need favicon.ico?

Yes, as a fallback. Plenty of bots, feed readers and link-preview services request /favicon.ico directly without parsing your HTML. It costs one small file at the root.

PNG, SVG or ICO?

All three, for different readers: SVG for modern browsers, PNG for the manifest and iOS, ICO at the root for everything old. If you only make one, make the 32×32 PNG and keep an .ico at the root.

Why is the favicon on Google still the old one?

Google caches it independently of your visitors’ browsers and refreshes it on its own schedule. Make sure the new file is crawlable and the URL is stable, then wait; there is no submit button for this.

Can the favicon be on a CDN?

It can, and the checker follows it there. Keep /favicon.ico on the domain itself as well, because the clients that guess that path will not know about the CDN.