Skip to main content
Every response from img.logo.dev carries Access-Control-Allow-Origin: *. Set crossorigin="anonymous" and canvas calls like toDataURL() keep working without a proxy. For OG images and PDFs rendered on the server, fetch the bytes directly and skip CORS entirely.

Draw a logo on a canvas

A <canvas> taints when you draw a cross-origin image onto it, and a tainted canvas throws a SecurityError the moment you call toDataURL() or getImageData(). Set crossorigin="anonymous" so the browser makes a CORS request and keeps the canvas clean:
<img
  src="https://img.logo.dev/stripe.com?token=LOGO_DEV_PUBLISHABLE_KEY"
  crossorigin="anonymous"
  alt="Stripe logo"
/>
Loading the image from script works the same way. Set crossOrigin before src:
const img = new Image();
img.crossOrigin = "anonymous";
img.src = "https://img.logo.dev/stripe.com?token=LOGO_DEV_PUBLISHABLE_KEY";
img.onload = () => {
  ctx.drawImage(img, 0, 0);
  canvas.toDataURL(); // succeeds: the canvas is not tainted
};

Allow img.logo.dev in your Content Security Policy

If your app sets a Content-Security-Policy, the browser blocks any image whose origin isn’t in img-src. The browser fires the image’s error event, the same as a broken link or a 404. The only trace is a CSP violation in the console. Add img.logo.dev to img-src:
Content-Security-Policy: img-src 'self' https://img.logo.dev;
The REST APIs (api.logo.dev) take a secret key and are server-side only, so they don’t need a connect-src entry for browser code. If your own backend calls them, you don’t need a CSP change there either. CSP only governs requests the browser makes directly.

Generate OG images and PDFs on the server

For Open Graph images (Satori, @vercel/og), PDF or screenshot rendering (Puppeteer, Playwright), or image processing (sharp), fetch the logo on the server and pass the bytes to the renderer. A server-side fetch sidesteps canvas tainting entirely and keeps your publishable key out of the rendered output:
const res = await fetch("https://img.logo.dev/stripe.com?token=LOGO_DEV_PUBLISHABLE_KEY");
const logo = await res.arrayBuffer();
// Satori and @vercel/og take the ArrayBuffer as-is (works on Edge runtimes).
// Node-only libraries (sharp, PDF kits) want Buffer.from(logo).
A server-side fetch sends no Referer header. If your publishable key has domain restrictions enabled, this request is blocked. Use a separate, unrestricted key for server-side rendering, or disable domain restrictions on the key you use here.

Use Logo.dev with Next.js

Add img.logo.dev to remotePatterns and render with next/image.