Getting Started

Quick Start Guide

5 minutes

Get your first logo with this step-by-step guide.

Create Your Account

Get Your Publishable Key

Copy a publishable key (pk_*) from API Keys in the portal. Publishable keys are required for every request.

Make Your First Request

30 seconds

Use the domain name of any company:

<img
  src="https://logos.getquikturn.io/apple.com?token=pk_live_1234567890abcdef"
  alt="Apple Logo"
/>

Verify the Response

The edge worker responds with a 302 redirect to the stored logo asset. The browser follows it automatically and renders the logo.

302Successful Response

HTTP/1.1 302 Found
Location: https://cdn.quikturn.io/logos/apple.com/128.png
Cache-Control: public, max-age=86400

Attribution Requirements

Free Tier Requirement

If you're on the Free tier, you must display attribution on pages using Quikturn logos. This is not required for paid plans (Launch, Growth, Enterprise).

How to Add Attribution

Add this snippet to your page footer or near the logo display:

<a href="https://getquikturn.io" target="_blank" rel="noopener">
  Logos by Quikturn
</a>

Or use our badge component:

<a href="https://getquikturn.io" target="_blank" rel="noopener">
  <img
    src="https://getquikturn.io/badge.svg"
    alt="Powered by Quikturn"
    height="20"
  />
</a>

View full attribution guidelines

Framework Examples

2 minutes

Choose your framework to see specific integration examples:

<!DOCTYPE html>
<html>
<head>
  <title>Quikturn API Demo</title>
</head>
<body>
  <h1>Partner Logos</h1>

  <img
    src="https://logos.getquikturn.io/apple.com?token=pk_your_key"
    alt="Apple"
    width="150"
  />

  <img
    src="https://logos.getquikturn.io/google.com?token=pk_your_key"
    alt="Google"
    width="150"
  />

  <!-- Attribution for Free tier -->
  <footer>
    <a href="https://getquikturn.io">Logos by Quikturn</a>
  </footer>
</body>
</html>

import React from 'react';

const LOGO_API_KEY = process.env.REACT_APP_LOGO_API_KEY;
const LOGO_BASE_URL = 'https://logos.getquikturn.io';

function CompanyLogo({ domain, alt, size = 128 }) {
  const logoUrl = `${LOGO_BASE_URL}/${domain}?token=${LOGO_API_KEY}&size=${size}`;

  return (
    <img
      src={logoUrl}
      alt={alt || `${domain} logo`}
      loading="lazy"
    />
  );
}

function App() {
  return (
    <div>
      <CompanyLogo domain="apple.com" alt="Apple" />
      <CompanyLogo domain="microsoft.com" alt="Microsoft" size={256} />
    </div>
  );
}

<template>
  <div>
    <img
      :src="logoUrl"
      :alt="alt"
      loading="lazy"
    />
  </div>
</template>

<script>
export default {
  props: {
    domain: {
      type: String,
      required: true
    },
    alt: String,
    size: {
      type: Number,
      default: 128
    }
  },
  computed: {
    logoUrl() {
      const apiKey = import.meta.env.VITE_LOGO_API_KEY;
      return `https://logos.getquikturn.io/${this.domain}?token=${apiKey}&size=${this.size}`;
    }
  }
}
</script>

import Image from 'next/image';

const LOGO_API_KEY = process.env.NEXT_PUBLIC_LOGO_API_KEY!;
const LOGO_BASE_URL = 'https://logos.getquikturn.io';

interface CompanyLogoProps {
  domain: string;
  alt: string;
  size?: number;
}

export function CompanyLogo({ domain, alt, size = 128 }: CompanyLogoProps) {
  const logoUrl = `${LOGO_BASE_URL}/${domain}?token=${LOGO_API_KEY}&size=${size}`;

  return (
    <Image
      src={logoUrl}
      alt={alt}
      width={size}
      height={size}
      loading="lazy"
      unoptimized // Required for external URLs
    />
  );
}

// Usage
export default function Page() {
  return (
    <div>
      <CompanyLogo domain="apple.com" alt="Apple" />
      <CompanyLogo domain="google.com" alt="Google" size={256} />
    </div>
  );
}

Environment Variables

Security Warning

Never hardcode your API key in client-side code for production. Use environment variables.

# Standard .env file
LOGO_API_KEY=pk_live_1234567890abcdef
LOGO_BASE_URL=https://logos.getquikturn.io

# .env.local (client-side accessible)
NEXT_PUBLIC_LOGO_API_KEY=pk_live_1234567890abcdef

# .env (client-side accessible)
VITE_LOGO_API_KEY=pk_live_1234567890abcdef

Preflight Checklist

Before going live, verify:

Check	Status
Publishable key is correct and active	☐
Domain allowlist matches your Origin (if enabled)	☐
404 errors show fallback image	☐
429 errors trigger backoff logic	☐
Attribution visible (Free tier only)	☐

Common Issues

Logo Not Loading

401Unauthorized

Error Message

Missing or invalid token

Solution

Verify the token parameter is present and starts with 'pk_'

CORS Errors

If domain restrictions are enabled, the request Origin/Referer must match your allowlist.
Without restrictions, CORS is * and no extra headers are needed.

Slow First Load

The first request may populate cache; subsequent requests are served from CDN.
Use loading="lazy" for below-the-fold images to improve perceived performance.