> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tyrionurl.com/llms.txt
> Use this file to discover all available pages before exploring further.

# QR Code Customization

> Make your QR codes on-brand with custom colors, dot styles, and logo embedding.

## Why Customize Your QR Code?

A plain black-and-white QR code works — but a branded QR code with your company colors and logo works *and* builds trust. Audiences are more likely to scan a QR code that looks intentional and professional than one that looks generic.

TyrionURL's QR Builder gives you full control over the visual design without sacrificing scannability.

***

## Customization Options

### Foreground Color

The foreground color controls the color of the QR code dots (the dark elements that encode the data).

* Use your primary brand color
* Ensure sufficient contrast with the background (minimum 3:1 contrast ratio for reliable scanning)
* Darker colors scan more reliably than very light or pastel tones

### Background Color

The background color fills the area behind the dots.

* Default is white — the most reliable background for scanning
* Transparent backgrounds (for SVG) may cause issues if placed on a colored surface
* If using a non-white background, ensure the foreground dots remain clearly visible

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/docs-tyrionurl/images/qr-customization-colors.png" alt="QR code color picker interface" />
</Frame>

***

### Dot Style

The shape of the individual data dots in the QR code:

| Style             | Description                                                                    |
| ----------------- | ------------------------------------------------------------------------------ |
| **Square**        | Standard QR dot style — most compatible with all scanners                      |
| **Rounded**       | Slightly rounded corners on each dot — modern look with good compatibility     |
| **Custom shapes** | TODO: Needs Product Verification — confirm full list of available dot patterns |

<Warning>
  Exotic dot styles can reduce QR code readability on older or lower-quality camera apps. Always test scan after applying custom styles.
</Warning>

***

### Logo / Image Embed

Add a brand logo or icon to the center of the QR code.

<Steps>
  <Step title="Click the Logo Upload Button">
    In the QR Builder, click the **Add Logo** or upload area in the customization panel.
  </Step>

  <Step title="Upload Your Logo">
    Upload a PNG or SVG file. Square logos work best. The builder will center and resize the logo automatically.
  </Step>

  <Step title="Preview and Test">
    The preview updates immediately. Test scan the preview on your phone before downloading.

    <Info>
      QR codes use error correction to remain scannable even when part of the code is obscured (by a logo). TyrionURL's builder uses Level H error correction, which allows up to 30% of the code to be covered.
    </Info>
  </Step>
</Steps>

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/docs-tyrionurl/images/qr-customization-logo.png" alt="QR code with brand logo embedded in center" />
</Frame>

***

## Download Options

| Format  | Best For                                    | Notes                                           |
| ------- | ------------------------------------------- | ----------------------------------------------- |
| **PNG** | Digital use — social posts, websites, email | Rasterized; use at intended display size        |
| **SVG** | Print — posters, packaging, business cards  | Vector; scales to any size without quality loss |

Always download SVG when the QR code will be used in print production. Send the SVG file directly to your print vendor.

***

## Design Tips

<Check>Keep the logo small — it should cover no more than 25–30% of the QR code area to maintain reliable scannability.</Check>
<Check>Test scan the final QR code at the size it will appear in your design, not just in the builder preview.</Check>
<Check>If placing the QR code on a colored or photographic background, export with a white border (quiet zone) built into the file.</Check>
<Check>Provide your print vendor with the SVG — never a screenshot or JPEG of the QR code.</Check>

***

## Common Mistakes

<Warning>
  **Logo too large** — A logo that covers too much of the QR code disrupts error correction and can make it unscannable. Keep it under 30% of the QR area.
</Warning>

<Warning>
  **Low contrast color choices** — Pastel or mid-tone colors on white backgrounds often fail in low-light scanning conditions. Test in multiple lighting environments.
</Warning>

<Warning>
  **Downloading PNG for large-format print** — PNG becomes pixelated at large print sizes. Use SVG for anything above A5 paper size.
</Warning>

***

## Related Pages

<CardGroup cols={2}>
  <Card title="Generating QR Codes" icon="qrcode" href="/qr-codes/generating">
    Start here to create and download a QR code.
  </Card>

  <Card title="Custom Aliases" icon="pen" href="/url-shortening/custom-aliases">
    Point your QR code at a branded short link.
  </Card>
</CardGroup>