How to Grab Any Website's Favicon (and Why Yours Is Probably Broken)

A favicon is the smallest asset on your website and one of the most-seen. It sits in the browser tab, next to the bookmark, in the autocomplete dropdown when someone types your domain from memory, and (increasingly) right next to your listing in search results and AI-generated summaries. Sixteen pixels, maybe thirty-two, and it’s doing more branding work per pixel than almost anything else you own.

Which is exactly why people neglect it. Nobody budgets design time for a 16x16 square. Most sites end up with whatever their CMS auto-generated years ago, a stretched logo that reads as a gray smudge, or in some cases nothing at all, just the browser’s generic globe icon sitting where a brand mark should be.

There are two situations where you need to actually grab a favicon. First: you’re building a directory, a comparison table, a bookmarks page, or a competitor teardown, and you need a batch of site icons fast, without screenshotting a browser tab forty times. Second: you’re auditing your own site and need to see, honestly, what your favicon looks like at the sizes that matter, because “it looks fine in my editor” and “it looks fine in a Chrome tab at 16px” are not the same claim.

Both cases have the same fix.

Grab any site’s favicon in one click

Use the Favicon Fetcher. It’s free, it runs entirely in your browser, and it does one thing: turns a list of domains into a grid of ready-to-use icons.

The workflow is deliberately boring:

1. Paste domains. One per line, in the text box. Full URLs, bare domains, www. or not, doesn’t matter, the tool normalizes all of it. Paste one domain or fifty.
2. Pick a size. Buttons for 16, 32, 64, 128, and 256px. 64 is selected by default because it’s the sweet spot for previewing quality without asking for a file that doesn’t exist (more on that below).
3. Fetch. Every domain turns into a card: the icon, the domain name, and three actions.
4. Copy the URL, copy the <img> tag, or download the PNG. Whichever you need. There’s also a “copy all” button that dumps every fetched URL to your clipboard at once, which is the fast path if you’re populating a spreadsheet or a directory listing.

Nothing gets uploaded, nothing gets stored, there’s no signup wall. You paste, you fetch, you leave with an icon.

One honest caveat: the tool sources icons the same way your browser does when it can’t find a site’s declared favicon, by asking a favicon-resolution service for whatever it has cached for that domain. That means it’s excellent for “get me a quick icon for this competitor’s row in my comparison table” and not the tool to reach for when you need pixel-perfect proof of your own site’s <link rel="icon"> setup. For that, check your own markup directly (next section).

If you’re building anything list-shaped, a directory, a “best of” roundup, a submission page, favicons are what make it scannable. Case in point: our Directory Finder tool renders a small icon next to every listing for exactly this reason. A wall of text links is forgettable. A wall of text links with recognizable icons next to them is a wall you can actually skim.

The favicon cheat sheet

Here’s what actually gets requested and rendered in 2026, cut down to what you need and nothing else.

Sizes that matter:

• 16x16 - the browser tab and bookmarks bar. This is the one people forget to check. Detail that looks crisp at 64px turns into mud at 16px.
• 32x32 - Windows taskbar, some bookmark managers, and the size most browsers actually request by default now on higher-density displays.
• 48x48 - some older Windows shortcuts and a handful of desktop integrations. Low priority but cheap to include.
• 180x180 - Apple touch icon. This is what shows up when someone adds your site to their iPhone home screen. Skip it and iOS will crop and scale your regular favicon, badly.
• 192x192 and 512x512 - PWA and Android home-screen icons, declared in your web app manifest. If you’re not shipping a manifest, you can ignore these. If you are, get them right or your “installed” icon looks like a smudge.

Formats, ranked by what you should actually use:

• PNG is the default answer. Every modern browser supports it, it compresses well, and it’s what you should be generating for every size above.
• ICO is the legacy multi-resolution format (literally multiple images bundled into one .ico file). Still worth keeping as favicon.ico at your root because some crawlers and very old browsers fall back to it automatically even with no <link> tag present, but it’s a safety net, not your primary format.
• SVG favicons are real and lightweight, and a small number of browsers (Chromium-based, mostly) support automatic light/dark switching within a single SVG file. Don’t rely on it as your only format yet; support is inconsistent enough that you still want PNG fallbacks.

The tags that actually get used:

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

That’s the whole practical list. You do not need a dozen <link> tags with every conceivable size baked in; that’s a holdover from an era of far more fragmented browser support. Cover the tab sizes, cover Apple touch, cover the manifest if you have a PWA, and you’re done.

Why your favicon is probably broken

Favicons fail quietly. Nobody files a bug report because your tab icon didn’t load, they just don’t notice your brand. Here’s what’s usually going on, ranked roughly by how often we see each one.

Wrong path or missing file. The classic: favicon.ico isn’t actually sitting at your domain root, or a redesign moved assets into a new folder and nobody updated the <link> tag. Check it directly: visit yourdomain.com/favicon.ico in a browser. If you get a 404, that’s your bug, full stop.

Aggressive caching. Browsers cache favicons hard, sometimes for the life of the tab session or longer, which means you can fix the file and still see the old, broken icon for days. If you just shipped a new favicon and it’s not showing, don’t panic-edit your HTML further. Hard-refresh, or check in a private/incognito window, before you conclude the fix didn’t work.

Missing sizes, not missing the icon. The favicon “exists” but only as one low-res file, so the browser is scaling a 16px image up to fill a 32px or 180px slot. It looks soft, blurry, or pixelated in exactly the places where crispness matters most (the Apple touch icon slot, mainly). The fix is generating the full size set, not just re-uploading the same file.

No dark-mode variant. If your favicon is a dark mark on a transparent background, it disappears against a dark browser tab bar. If it’s light-on-transparent, same problem in reverse. Either design something that holds up on both, or ship an SVG with a prefers-color-scheme media query inside it for the browsers that support it.

Blocked hotlinking or aggressive CDN rules. If your CDN or WAF blocks unrecognized user agents or referrers, favicon-resolution services (and some browsers under strict privacy settings) can get a blocked or empty response instead of your icon. If your favicon works when you visit directly but shows blank in third-party contexts, check your CDN’s bot and hotlink rules before you assume the file itself is the problem.

FAQ

Can I grab a favicon without downloading anything? Yes. Use the Favicon Fetcher, paste the domain, and copy the URL directly. No download needed unless you specifically want the PNG file saved locally.

What’s the actual difference between favicon.ico and a PNG favicon? .ico is a container format that can bundle multiple resolutions into one file, which is why it became the historical default. PNG is simpler, compresses better, and is what modern <link rel="icon"> tags typically point to. Keep an .ico at your root as a fallback; use PNG for everything declared explicitly in your <head>.

Why does my favicon show the wrong (old) icon? Almost always caching. Try a hard refresh or an incognito window before assuming your fix didn’t take. If it’s still wrong after that, check that your <link> tags point at the actual updated file path and not a stale filename.

Do I need a separate favicon for Apple devices? Yes, if you want it to look right. Without an apple-touch-icon tag pointing to a 180x180 image, iOS will auto-generate one from your existing favicon, usually by cropping or scaling it, and the result rarely looks intentional.

Is an SVG favicon worth the effort? Worth having as an enhancement, not worth relying on alone. Support for dynamic light/dark SVG favicons is still inconsistent across browsers. Ship PNG sizes as your baseline and add SVG on top if you want the extra polish.