How to Download a Logo from Any Website — 5 Legitimate Ways

You need a bank's logo for a deck, a service icon for an integrations diagram, a partner's mark for a "trusted by" slide. The hand reaches for a screenshot, and a mushy raster with a chunk of someone else's background lands in your layout. Meanwhile the logo you just photographed off the screen sits on that same site as a vector: the site had to load it from somewhere to show it to you. A screenshot only means you looked in the wrong place. Let's go through where the file actually lives, from the fastest sources to the most laborious.

Method 1. Right‑click — when you're lucky

Right‑click the logo → "Save image as…" or "Open image in new tab". If the logo is placed with a plain <img> tag, you get the source file, and often that's already an SVG.

Luck holds about half the time. The "save image" entry disappears when the logo is inlined in code, painted as a CSS background or covered by a transparent element. The file still exists then — you just have to reach it through the developer panel.

Method 2. DevTools — pulls anything in 30 seconds

The panel works the same in Chrome, Yandex Browser and Firefox:

1. Right‑click the logo → "Inspect".
2. The panel opens on the logo element. Three cases follow:

• <img src="..."> — open the src link in a new tab and save the file.
• <svg>...</svg> — the logo is inlined. Right‑click the tag → Copy → Copy element, and the SVG code is on your clipboard. Paste it into a .svg file or straight into Figma: it reads SVG code from the clipboard on Ctrl+V.
• background-image: url(...) in the styles — open the URL from the CSS and save.

1. Inspect the loot: a real vector consists of <path> and shapes, while a single <image> tag inside means a raster in vector wrapping.

Sprites are a case of their own. When the <svg> contains nothing but <use href="#logo">, the copied code lands in your file empty: the shape itself sits elsewhere on the page, in a <symbol> block or in a linked sprite file. Find that id with a document search (Ctrl+F in the Elements panel) and copy the shape from there, or open the whole sprite file via the href link — which hands you every icon on the site at once.

Method 3. The brand's press kit — a source that stands behind its files

DevTools will pull any file, but it won't tell you whether that file is current. A press kit solves this too: most mid‑size and large companies have a "Press", "Media" or "Brand assets" section with logos in SVG and PNG, brand colors and usage rules.

Hence two advantages that markup scraping lacks: the files are guaranteed fresh, and the usage rules sit right next to them. Look for the link in the site footer or search "brand name logo press kit" or "brand assets".

A good press kit keeps the minimum clear space around the mark, the list of forbidden distortions and dark‑background versions right next to the files. Those rules save approval time: if a partner asks you to redo a slide, a link to their own guideline settles it in a minute.

Method 4. Logo catalogs — when you need many marks

A press kit is great for one brand. But when you're assembling a grid of ten logos — a list of banks, a services diagram, a "trusted by" block — visiting ten press sections becomes a task of its own, and the files arrive in different quality and proportions.

A catalog removes both problems at once: official versions gathered in one place and normalized to a single look. Our logo catalog is built exactly for this: hundreds of Russian and global brands, each with SVG, PNG at the size you need, one‑click code copying and recoloring right on the page.

Method 5. Screenshot — the last resort

One case remains where the file genuinely doesn't exist: the logo is baked into a raster image together with its background — in a video thumbnail, say, or a photo of a storefront sign. Then a screenshot with cropping and background removal is the only option, and the quality will equal the size on screen.

Before settling for it, check methods 3 and 4: for almost any notable brand a proper file exists somewhere.

What to do when Inspect finds nothing

A separate category of sites hides the logo well enough that plain Inspect won't show it. Three deeper techniques help here:

• The Network tab. DevTools → Network → the Img filter, then reload the page. The list will hold every image the site downloaded, including those buried in CSS and scripts. Sort by name: the logo is usually called logo‑something, and a double click opens the file for saving.
• Search across sources. DevTools → Ctrl+Shift+F → query "logo" or ".svg". This finds paths baked into JS bundles and JSON configs, where Inspect never looks.
• Pseudo‑elements and icon fonts. If the mark is drawn via ::before with an icon font, no image file exists at all. Check Computed → content and font‑family: you'll be downloading a font or looking for an alternative in the press kit.

One general tip: the mobile version of a site sometimes serves a different, simpler logo file — switch on device emulation in DevTools and check.

Where else the vector lives besides the site

A website is not the only place the file has already reached in vector form.

PDF. A deck, a proposal or an annual report stores the logo as curves. Open the PDF in Illustrator or Inkscape, select the mark and copy it as an ordinary group of shapes. It comes out raster only when it was placed into the layout as an image.

Decks and documents. PPTX and DOCX files are built as zip archives. Change the extension to .zip, unpack it and look into ppt/media or word/media: the embedded images sit there in their original form, SVG included.

A mobile app. An APK unpacks the same way, and the icons live in res/drawable — a set of PNGs for different screen densities plus vector XML, which a converter turns into SVG.

Browser extensions. Plugins like SVG Export and SVG Grabber collect every vector on the page into one list: faster than walking DevTools by hand when you need a dozen icons off one page. You still have to vet the haul, since the extension also pulls interface glyphs.

Four checks on the downloaded file

The loot is in hand, but before it goes into a layout it's worth checking four things:

1. Vector or wrapper. Open the SVG in a text editor: a real vector consists of <path> and shapes; a single <image> tag gives away a raster masquerading as SVG.
2. Currency. Brands go through redesigns, while footers, old landing pages and subdomains keep previous versions of the mark alive for years. Compare the file against the brand's homepage or recent social accounts.
3. Completeness. The header often carries a trimmed variant — the mark alone, without text. A deck usually needs the full logo, and that lives in the press kit.
4. Canvas and padding. An SVG pulled out of markup often carries a generous viewBox: the mark sits in the corner of a large transparent rectangle and aligns crookedly in a layout. Open the file in Figma — if the selection box is visibly larger than the shape, crop the canvas to the content.

Which path fits which task

That last row saves the day more often than you'd think: the Wayback Machine keeps old site versions along with their logo files, and it's the only way to retrieve a historical mark after a rebrand. Check the inner pages in the archive too: snapshots of press sections are saved along with their files, and the older logo version usually turns up there.

Is any of this legal

Downloading breaks no law — the questions concern how you use the file. The general principle: showing a logo to point at the brand itself (in an article, a deck, a list of integrations, payment methods) is fine; passing it off as your own, implying a partnership that doesn't exist, or printing it on merchandise you sell is not. A detailed breakdown with case law and a situation table is in can you use someone else's logo.

In short

The screenshot comes last because a vector almost always already exists: the site loaded it to show you, and the brand often published an official copy separately. So the order of operations runs opposite to instinct — catalog or press kit first, then DevTools, and only then raster compromises. Check the file you get for authenticity, currency and completeness, and place it in your layout undistorted.

Save yourself the DevTools: in our logo catalog any major brand's mark downloads as SVG and PNG in one click — or copies as code straight into Figma.