← Back to blog
2026-05-11 · 4 min read

How to Extract a High-Resolution Favicon from Any Website URL

Editorial illustration showing browser tabs with favicon icons in multiple sizes, color swatches, and a magnifying glass, on an off-white background

How to Extract a High-Resolution Favicon from Any Website URL

The default /favicon.ico path is a dead end for anything more than a 16x16 or 32x32 icon. It exists for browser tab compatibility, not for actual design use. If you need a quality version of a site's icon for a competitive audit, a brand reference doc, or a client presentation, you need to go a few layers deeper.

Here's how to get what you actually want.

Why /favicon.ico Falls Short

Most browsers will fall back to /favicon.ico if nothing else is declared. Many sites still maintain this file for legacy reasons. But because it was originally designed for 16x16 pixel rendering in IE5, the format stuck at small dimensions even as devices and screen densities evolved.

On a modern retina display, a 32x32 favicon looks soft next to sharp UI. If you grab /favicon.ico and drop it into a slide deck or brand research doc, it's going to look rough.

The high-res versions exist. They're just declared differently.

Step 1: Read the HTML <head> for Declared Icons

Paste any URL into your browser, view source (Ctrl+U on Windows/Linux, Cmd+U on Mac), and search for rel="icon" or rel="apple-touch-icon". You'll find link tags that reference specific icon files:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#111111">

The sizes attribute tells you exactly what you're getting. 180x180 (apple-touch-icon) is almost always the largest rasterized icon declared directly in the HTML. It was designed for iOS home screen use, so quality is typically good.

SVG favicons (rel="icon" type="image/svg+xml") are increasingly common and are infinitely scalable. If the site declares one, that's your best option:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Copy the href value, combine it with the site's origin, and you have a direct URL to the file.

Step 2: Check the Web App Manifest

The web app manifest is where modern sites store their full icon set. It's a JSON file, usually at /manifest.json or /site.webmanifest, and it's declared in the <head> like this:

<link rel="manifest" href="/site.webmanifest">

Fetch that file directly in your browser or with a quick curl. The icons array inside typically includes sizes up to 512x512:

{
  "name": "Example Brand",
  "short_name": "Example",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icons/icon.svg",
      "sizes": "any",
      "type": "image/svg+xml",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#111111",
  "background_color": "#ffffff",
  "display": "standalone"
}

The 512x512 PNG is enough for almost any use case. The SVG with "sizes": "any" is even better if it's there.

Note the purpose: "maskable" property. Maskable icons are designed to be cropped into a circle or squircle on Android home screens, so they include extra safe zone padding. If you're using the icon for display rather than installation, the non-maskable variant will look sharper.

Step 3: Network Tab for Sites That Obscure Asset Paths

Some sites serve icons through CDN paths with hashed filenames or don't follow standard conventions. The DevTools Network tab will catch everything the browser actually loads.

Open DevTools (F12), go to the Network tab, filter by Img type, reload the page, and look for requests with icon, favicon, or apple-touch in the filename. Right-click any image in the panel and choose Open in new tab to get the full URL.

You can also filter by file size. Favicons are small files, so sort by size ascending and look for sub-100KB images that loaded early in the waterfall.

Step 4: Try Predictable Paths Directly

Even without reading the HTML, many sites follow predictable file conventions from generators like RealFaviconGenerator:

/apple-touch-icon.png         (180x180)
/favicon-32x32.png            (32x32)
/favicon-96x96.png            (96x96)
/android-chrome-192x192.png   (192x192)
/android-chrome-512x512.png   (512x512)

For sites built on WordPress, Shopify, or Squarespace, these paths are predictable enough that you can just try them directly by appending to the site's origin. It takes about 30 seconds to check each one.

Doing This at Scale

All of these steps work fine for a single site. For a competitive audit spanning 20 or 30 brands, manually checking source, fetching manifests, and filtering DevTools gets repetitive fast.

Use Inspect Brand to pull brand assets including favicons from any URL automatically. It reads the HTML head, fetches the manifest, and returns the best available icon it finds, along with the full color palette and font stack. The output is structured and exportable, so you can go from URL list to organized brand data without clicking through DevTools for each one.

What to Actually Download

Once you have the URL of the best icon:

If the site only has an ICO file, tools like ImageMagick can extract individual sizes from it:

convert favicon.ico favicon_%d.png

This outputs each embedded size as a separate PNG. Useful in a pinch, but the HTML head route usually turns up something better before you need to go here.

---

The whole process takes under two minutes per site once you know the hierarchy: check the <head> first, grab the manifest if it's declared, use the Network tab as a fallback. For batch research, use Inspect Brand to skip the manual steps and get structured results across a full competitor set.

More free tools from Landing Page Labs