How to Copy a Website Favicon: The Pro Dev Workflow

If you're building a client mockup, a competitor analysis dashboard, or just trying to reverse-engineer how GitHub handles their slick dark-mode tab icon, you've probably hit a wall. You try appending /favicon.ico to a URL, and you get a 404 error. Browsers have moved way past a single root file. If you want to know exactly how to copy a website favicon today, you need to look at the DOM.

If you would rather skip the manual steps, a favicon grabber like ours does the lookup and the download in one go.

I do this constantly when auditing client sites. Grabbing their existing icon setup is step one before I fix it. Here is my exact workflow for copying a site's favicon implementation directly from the browser.

The Developer Workflow: How to Copy a Website Favicon

Don't bother viewing the page source. Modern JavaScript frameworks (like Next.js or Nuxt) often inject these tags dynamically. We need the rendered DOM.

Step 1: Open the Elements Panel

Right-click anywhere on the target webpage and select 'Inspect'. Press Cmd+F (or Ctrl+F) inside the Elements panel and search for rel='icon'.

Step 2: Copy the Exact HTML

You will likely find multiple tags. Stripe, for example, uses a mix of SVGs and PNG fallbacks. Right-click the <link> node, select 'Copy', and then 'Copy element'. This gives you the exact markup they use to serve the icon.

Step 3: Extract the Asset via Console

If you just want the image file itself, digging through relative paths (like /assets/images/icon.svg) is annoying. Jump to your DevTools Console and run this quick snippet:

const icon = document.querySelector('link[rel="icon"]').href;
console.log(icon);

This instantly resolves the absolute URL. Click it, and save the image.

Common Pitfalls When Copying Icons

Grabbing the icon is easy, but reusing it blindly usually breaks things. Watch out for these traps:

• Relative Paths: If you copy the HTML tag directly into your local project, a path like href='/favicon.svg' will look for the file on your localhost, resulting in a blank tab.
• Missing Apple Touch Icons: The standard rel='icon' doesn't cover iOS home screens. You often need to hunt for rel='apple-touch-icon' separately.
• SVG Media Queries: If you copy an SVG favicon, be aware it might contain internal CSS for dark mode. If your mockup environment doesn't match, it might render invisible.

If you are doing this manually for more than one site, you are wasting time. While the console trick is great for a quick one-off, I built Mzu favicondl to automate this. It parses the target URL, resolves all paths, and packages the icons for you.

If you want to dive deeper into alternative extraction methods, check out our guide on downloading favicons from any website, or learn why modern sites use SVG favicons in the first place. Stop guessing URLs and start inspecting the DOM.