How to Extract a Company Logo from a Website

Extracting a company logo from a website is a common need for CRMs, business directories, SaaS dashboards, and data enrichment pipelines. But how do you reliably get a logo from any website?

In this guide, we'll explore three approaches: manual HTML scraping, Open Graph tag extraction, and using a dedicated API.

Why Extracting Logos is Harder Than It Looks

At first glance, getting a logo from a website seems simple — just find the <img> tag in the header, right? In reality, websites store logos in many different ways:

Open Graph tags — og:image or dedicated logo properties
JSON-LD structured data — Organization schema with logo field
Link tags — <link rel="icon">, <link rel="apple-touch-icon">
<img> tags — Logo images in headers, often with CSS classes like .logo, .brand, .navbar-brand
CSS background images — Logos embedded in stylesheets as background-image
SVG inline elements — Vector logos directly in the HTML
Web app manifests — manifest.json with icons array

Each approach comes with trade-offs in reliability, maintenance burden, and the quality of the extracted logo.

Method 1: Manual HTML Scraping

The simplest approach: fetch the HTML, parse it, and look for likely logo elements.

const response = await fetch('https://example.com');
const html = await response.text();

// Parse HTML and look for og:image
const ogMatch = html.match(/<meta property="og:image" content="([^"]+)"/);
if (ogMatch) {
  console.log('OG image:', ogMatch[1]);
}

// Fall back to looking for common logo selectors
// ... hundreds of lines of selector logic

Pros:

No external dependencies
Full control over the logic

Cons:

Requires JavaScript rendering for SPAs (React, Vue, Angular)
Must maintain selectors across thousands of site structures
No SVG vs PNG prioritization
No dark/light mode detection
No fallback chain (favicon → Apple icon → guessed path)
Timeout and error handling must be built from scratch
Breaks when sites change their HTML structure

Method 2: Open Graph and Social Metadata

Many websites include Open Graph tags for social sharing. These often contain a high-quality logo image.

import requests
from bs4 import BeautifulSoup

response = requests.get('https://example.com')
soup = BeautifulSoup(response.text, 'html.parser')

og_image = soup.find('meta', property='og:image')
if og_image:
    print('Logo from OG:', og_image['content'])

# Also check Twitter cards
twitter_image = soup.find('meta', attrs={'name': 'twitter:image'})

This approach works well for modern, well-structured websites. But it falls short when:

The website doesn't have OG tags (surprisingly common)
The OG image is a generic social share image, not a logo
JavaScript rendering is required (SPAs)
You need structured brand data beyond just the logo

Method 3: Using a Dedicated Logo API

A dedicated logo API handles all the edge cases for you:

const response = await fetch('https://api.brandohue.com/api/v1/extract', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY',
  },
  body: JSON.stringify({ url: 'https://stripe.com' }),
});

const data = await response.json();
console.log('Logo URL:', data.logoUrl);
console.log('Logo format:', data.logoFormat);
console.log('Dark mode logo:', data.darkModeLogoUrl);

What the API handles for you:

JavaScript rendering for SPAs
Multi-source detection (OG → JSON-LD → link tags → DOM analysis)
SVG prioritization with PNG fallback
Dark/light mode variant detection
Apple touch icon and favicon fallback chain
Timeout handling and retries
Caching for repeated lookups
Consistent JSON response format

Comparison Table

| Factor | Manual Scraping | OG Tags Only | Brandohue API | |--------|----------------|--------------|---------------| | SVG support | Manual logic | Depends on site | Automatic priority | | JS rendering | Not included | Not included | Built-in | | Maintenance | Ongoing | Minimal | Zero | | Error handling | Custom | Custom | Built-in | | Multi-source fallback | Custom | OG only | 4+ sources | | Response time | Varies | ~500ms | ~2s (or 0s cached) | | Dark/light logos | Manual | Manual | Automatic | | Cost | Developer time | Developer time | 1 credit/call |

When to Use Each Approach

Manual scraping makes sense if you're extracting from a known set of 5-10 websites with consistent structures. The maintenance burden is low when the target set is small and stable.

OG tag extraction is a good middle ground for websites that reliably use Open Graph. It's fast and requires minimal code.

A dedicated API is the right choice when you need to extract logos from any website at scale — especially when developer time and reliability matter more than the per-call cost.

Getting Started with Brandohue

Brandohue returns the logo plus favicon, color palette, and metadata in one call. New accounts get 1000 free credits.

Get your API key and start extracting logos from any website today.