My Tool Studio
Brand Extractors·3 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 toolAll insights
SVGPNG

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.

Try it now

Open Logo Extractor

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

Open Logo Extractor