Brand Extractors·5 min read

Where Websites Store Their Logos: og:image, SVG, Favicon

The proposal is due Friday and the prospect's logo needs to sit on your title slide, preferably not as a blurry screenshot. Knowing where websites store their logos turns this from a twenty-minute devtools dig into a one-minute pull. Most sites publish their mark in four or five predictable places, and the Logo Extractor checks all of them from a single URL. This guide walks through each hiding spot, shows a real extraction, and covers the mistakes that make decks look amateur.

Open the tool All insights

Why grabbing a logo is harder than it should be

The client rarely has the files either.

Ask a client for their logo and you'll get a Word document with a JPEG pasted into it, if you get anything at all. Ask their website instead. The site has to render the mark somewhere, so a usable copy of the logo already exists at a public URL. The catch is finding it.

Modern builds make that surprisingly awkward. Header logos hide behind hashed filenames like a8f3c2.svg, get drawn as inline vector code, or load as CSS background images that never appear in an img tag. That's why a targeted scan beats scrolling through view-source.

Where websites store their logos

Five predictable spots, in rough order of quality.

Almost every site exposes its logo through at least one of these channels, and each has a different trade-off between availability and cleanliness.

og:image, the social sharing image. Nearly universal, but often a 1200x630 card with a tagline baked in rather than the bare mark.
schema.org logo, declared in Organization structured data. Usually the cleanest file, since Google asks for a standalone square-ish logo here.
apple-touch-icon, the 180x180 icon iOS uses for home screens. Almost always a flat, centered version of the mark.
img tags with logo in the src path or alt text, which is how most headers and footers actually render it.
The favicon. The favicon vs logo files question is really about size: a 32-pixel icon identifies a tab, it doesn't survive on a title slide.

A worked logo extraction

One URL in, four candidates out.

Run a typical SaaS homepage, say acmeanalytics.example, through the Logo Extractor and the grid might return: og:image at /social/card-1200x630.png, schema.org logo at /assets/acme-mark-512.svg, favicon at /apple-touch-icon.png, and an img match at /img/nav-logo.svg with alt text Acme Analytics logo.

For a deck, the schema.org SVG wins immediately: it's the official standalone mark and it scales. The nav logo SVG is the backup, the touch icon covers you at small sizes, and the social card goes in the trash. The source labels do the triage for you.

SVG logos in the wild

The format you actually want.

SVG logos in the wild have become the norm for any site built in the last five years, and they're the jackpot for reuse. A vector file renders sharp at 40 pixels in a footer and at 4 feet on a conference banner, and you can open it in a text editor to tweak the fill color for dark slides.

One caveat: plenty of sites inline their SVG markup directly into the HTML instead of referencing a file. Inline code isn't a downloadable asset, so when an extraction misses a logo you can clearly see on the page, that's usually why. Copy the svg element out of devtools in that case.

Mistakes that ruin an extracted logo

Seen in real pitch decks.

Most logo embarrassments trace back to one of these.

Dropping the og:image social card into a slide, complete with the baked-in headline and gradient background.
Scaling a 32-pixel favicon up to 300 pixels and hoping nobody notices the mush.
Placing a white transparent-background logo on a white slide, then wondering where it went.
Ignoring clear-space and color rules from the company's brand guidelines when the deck is going anywhere public.
Screenshotting the header instead of downloading the source file, which fuses the page background into the corners.

Three habits for cleaner logo pulls

First, check for a press or brand page before anything else; companies that care about their mark host official downloads at /press, /brand, or /media, and those files come with usage rules attached.

Second, prefer the schema.org candidate when one exists, because Google's guidelines push sites to publish a clean, current logo there. Third, keep the direct URL alongside the downloaded file. When the deck gets revised in six months, whoever inherits it can re-fetch the latest logo instead of reusing a stale copy.

Logo Extractor vs the related brand tools

Pick the scope you need.

Use the Logo Extractor when the logo is the whole job, since it's the only tool that ranks multiple candidates by source. When you want the logo plus favicon, OG image, and font list zipped together, the Brand Asset Pack does the full sweep in one download. The Brand Color Extractor complements both by pulling the site's palette from its CSS, and the Favicon Generator handles the reverse direction, turning a logo you already have into a complete icon set.

How to make logo online when what you need is the file, not a design

Two different searches, one honest answer.

Two very different needs hide behind the same words. Some people typing how to make logo online want to design a brand-new mark from nothing. Others already have a logo sitting on their website and just need the actual file at full resolution. This tool serves the second group. It's a logo extractor, so it scans a page and returns the logo it finds, and it doesn't draw anything.

If your how to create logo online search really means our designer built the logo months ago and now nobody can find the source file, paste the homepage and the extractor pulls it from og:image, schema.org markup, or the favicon. If you genuinely need to design from zero, that's a job for a design app, and we'd point you there rather than pretend a scanner can invent a mark.

How to make a logo for free by grabbing one that already exists

Free, with a clear catch.

When people ask how to make a logo for free, budget is usually the driver. This tool is free with no account and no watermark, but be clear on what free buys you here. It extracts an existing logo, and it doesn't generate a new one.

So how to create logo online free, in this tool's world, means downloading your published mark at no cost, in whatever format the site hosts, often a transparent PNG or a scalable SVG. That's genuinely handy when you need your logo for a deck or a partner's site and the original files went missing. It is not free design software, though. If a brand-new logo is the goal, no extractor can help, because there's nothing to extract yet.

How to design a logo for free versus pulling a company's existing mark

Two opposite jobs, side by side.

Designing and extracting are opposite jobs, and it's worth separating them. How to design a logo for free is about type, color, and shape decisions, which this tool never touches. How to create a company logo for free, when that company's logo is already live on its website, is really a retrieval task, and that's where this extractor earns its place.

Say you're onboarding a client and need their logo for a proposal. Paste their URL and download the file in seconds instead of trading emails for a week. For the whole set of assets in one go, the Brand Asset Pack zips the logo, favicon, and colors together. For icon sizes, the Favicon Generator builds a full set from a single image.

Try it now

Open Logo Extractor

The tool is one click away. No sign up, no upload, no payment.

Open Logo Extractor

Write a review