Brand Extractors·4 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 a handful of predictable places, and the Logo Extractor checks them all from a single URL. This guide walks through each spot, shows a real extraction, and covers the mistakes that make decks look amateur.

Open the free Logo Extractor 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 will 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 already exists at a public URL. The catch is finding it.

Modern builds make that 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 is why a targeted scan beats scrolling through view-source.

Where websites store their logos

Six places, in rough order of quality.

Almost every site exposes its logo through at least one of these, and each has a different trade-off between availability and cleanliness. The source label on each result card tells you which one a file came from.

schema.org logo, declared in Organization structured data. Usually the cleanest file, since Google asks sites to put a standalone logo here.
Inline SVG in the header, the logo drawn as code in the page. A vector that scales to any size.
Header images with logo in the file name, alt text or class, which is how many navigation bars render the mark.
apple-touch-icon, the icon phones use for home screens, often 180 by 180. Usually a flat, centered version of the mark.
Favicon and icon links. Useful to see how the mark reduces, but a 32-pixel tab icon will not survive on a title slide.
og:image, the social sharing picture. Nearly universal, but often a 1200 by 630 card with a tagline baked in rather than the bare mark.

A worked logo extraction

One URL in, a ranked grid out.

Paste a typical SaaS homepage, say acmeanalytics.example, click Extract logo, and the grid might return: schema.org logo at /assets/acme-mark-512.svg, an inline SVG (logo) from the navigation, a header image with alt text Acme Analytics logo, an apple-touch-icon 180x180, and the og:image social card last. Each card shows where the file was found, its format and its pixel size.

For a deck, the schema.org SVG wins immediately: it is the official standalone mark and it scales. The inline SVG is the backup, the touch icon covers you at small sizes, and the social card goes in the bin. The ranking and source labels do the triage for you, and the tool shows up to 20 candidates.

Why SVG is the format you want

Sharp at any size.

A vector file renders sharp at 40 pixels in a footer and at four feet on a conference banner, and you can open it in a text editor to change the fill color for dark slides. Most sites built in recent years ship their logo as SVG in some form.

Logos drawn as inline SVG in the header are saved as real .svg files when you click Download, and the card also has a button to copy the SVG code. What still slips through is a logo set as a CSS background image or injected by JavaScript after the page loads, because the tool reads the HTML the server sends. For those, the company's press or brand page is the next place to look.

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.
Ignoring the pixel size on the card and scaling a 32-pixel favicon up to 300 pixels.
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; companies that care about their mark host official downloads at paths like /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 image 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. If a card says the preview is blocked by the host, the link still works: click Download and save the file from the tab that opens.

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 shows every candidate with its source, format and size. When you want the logo plus icons, the OG image, colors and fonts zipped together, the Brand Asset Pack Downloader picks one logo automatically and does the full sweep in one download. The Website Color Extractor pulls the site's palette from its CSS, the PNG button on any SVG candidate saves it at up to 2048 px, the SVG to PNG Converter handles any other size, and the Favicon Generator goes the other way, 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

Write a review