QR Code Guide: Logo, Custom Styles, Frames & 18+ Content Types

A QR (Quick Response) code is a two-dimensional matrix barcode that encodes data as a pattern of black and white modules arranged in a square grid. Invented in 1994 by Masahiro Hara at Denso Wave, a subsidiary of Toyota, QR codes were originally designed to track automotive parts during manufacturing. Their ability to store significantly more data than traditional one-dimensional barcodes — up to 4,296 alphanumeric characters — and their fast readability made them quickly popular beyond the automotive industry.

QR codes work by encoding data into patterns of modules (the small squares) within a fixed-size grid. The three large squares in the corners — called finder patterns — help scanners detect and orient the code regardless of viewing angle. The code also contains timing patterns, alignment patterns, format information, and error correction data that allow it to be read even when partially damaged or obscured.

Modern smartphones can scan QR codes natively through their camera apps — no separate scanning app is needed. When a QR code containing a URL is scanned, the phone automatically offers to open the link. This frictionless interaction is why QR codes have become the standard bridge between physical and digital experiences.

Static QR codes encode data directly into the code pattern itself. Once generated, the content cannot be changed — the URL, text, or other data is permanently embedded. Static codes are ideal for content that will never change: a company website URL, a Wi-Fi password, contact information (vCard), or a fixed product page. They work without any server or internet connection on the code's side.

Dynamic QR codes encode a short redirect URL instead of the final destination. This redirect URL is controlled by a server, which means you can change where the QR code points without reprinting it. Dynamic codes also enable scan analytics — tracking how many times, when, and where the code was scanned. However, they require a subscription to a QR code management service and depend on that service remaining operational.

For most personal and small business use cases, static QR codes generated with a free tool like Zutily are the best choice. They have no dependencies, no expiration dates, and no recurring costs. Dynamic QR codes make sense for large marketing campaigns where tracking and URL flexibility justify the ongoing service cost.

One of the most powerful features of QR codes is error correction — the ability to recover encoded data even when part of the code is damaged, dirty, or obscured. QR codes use Reed-Solomon error correction, the same algorithm used in CDs, DVDs, and satellite communications, to add redundant data to the code.

There are four error correction levels: L (Low) recovers up to 7% of damaged data and produces the smallest, simplest codes. M (Medium) recovers up to 15% and is the recommended default for most applications. Q (Quartile) recovers up to 25% and is useful for codes that may be partially covered. H (High) recovers up to 30% and is essential when adding a logo or image overlay to the center of the code.

Higher error correction levels make the QR code denser (more modules in the grid), which means the code needs to be printed or displayed at a larger size to remain scannable. The tradeoff is between resilience and minimum display size — choose the level that matches your use case rather than defaulting to the highest level.

Step 1: Choose your content type. Select from 18+ content types organized into three categories — General (URL, text, email, phone, SMS, Wi-Fi, vCard, WhatsApp, geo), Social Profiles (Instagram, Twitter/X, Facebook, LinkedIn, TikTok), and Apps & Files (YouTube, PDF, App Store, Play Store). Each type uses the appropriate URI scheme for automatic device actions.

Step 2: Enter your content. For URLs, include the full address with https://. For social profiles, simply enter your @username and the generator formats the correct link automatically. For Wi-Fi, fill in the network name, password, and security type in the structured form. For YouTube, paste a video URL or just the video ID.

Step 3: Customize the style. Set foreground and background colors to match your brand. Choose a dot shape — square (classic), rounded (modern), dots (playful), or diamond (geometric). Upload your logo to embed it in the center with adjustable sizing. Select a frame style with CTA text like 'Scan Me' to boost scan rates.

Step 4: All style changes auto-apply. After generating your first QR code, every change — colors, dot shape, logo, frame, size, error level — updates the preview instantly in real-time. No need to press generate again. This lets you experiment with different looks quickly.

Step 5: Download in your preferred format. Download as PNG for digital use, SVG for scalable print materials, JPEG for documents and presentations, or PDF for print-ready output. You can also copy the image or SVG code directly to your clipboard.

Maintain sufficient contrast. The most critical design rule is ensuring high contrast between the foreground (dark modules) and background. Dark foreground on light background is standard and works with virtually all scanners. Inverted colors (light on dark) can work but reduce compatibility with older devices. This applies to all dot shapes — rounded, dots, and diamond styles rely on the same contrast principles as classic squares.

Keep adequate quiet zone. The quiet zone (white space surrounding the QR code) helps scanners distinguish the code from its surroundings. A minimum of 2-4 modules of quiet zone is recommended. When using frames with CTA text, the frame adds its own padding around the code, but the internal quiet zone is still important for reliable scanning.

Size matters. For print, the minimum recommended size is 2×2 cm (0.8×0.8 inches) at 300 DPI for simple codes. Codes with more data, higher error correction, or custom dot shapes may need to be slightly larger. For billboards and large signage, use SVG output for infinite scalability.

If adding a logo, use High error correction. Placing a logo over the center of a QR code obscures some modules. Zutily automatically sets H-level error correction (30% recovery) when a logo is present, allowing the code to tolerate the obscured area. Adjust the logo size ratio to find the right balance between branding visibility and scan reliability — always test the code after adding a logo.

Use frames to increase scan rates. Studies show framed QR codes with CTA text like 'Scan Me' or 'Point & Scan' receive significantly more scans than bare codes. The text gives users a clear visual prompt, especially when the QR code is displayed in an environment where people may not instinctively know to scan it — menus, posters, product packaging.

QR codes have become a cornerstone of omnichannel marketing, bridging print materials with digital experiences. A QR code on a product package can link to assembly instructions, warranty registration, or YouTube product videos. A code on a business card — branded with your company logo and custom dot shapes — can share a complete vCard that automatically adds to the scanner's contacts.

Social media marketing is one of the fastest-growing QR code use cases. Create QR codes linking directly to your Instagram, TikTok, YouTube, LinkedIn, or Twitter/X profile. Add your brand logo, match your brand colors, and include a 'Follow Us' frame to drive engagement from physical materials — storefronts, packaging, flyers, and event booths.

App developers can create QR codes linking directly to their Apple App Store or Google Play Store listings. Displaying these on posters, business cards, or websites eliminates the friction of users having to search for the app manually. Branded QR codes with your app icon as the center logo create a professional, recognizable call-to-action.

Track your QR code campaigns by using UTM parameters in URLs (e.g., ?utm_source=flyer&utm_campaign=spring2026). This allows Google Analytics to attribute website traffic and conversions to specific printed materials. Combine this with a 'Scan Me' frame and your brand logo for maximum scan rates.

Wi-Fi QR codes are one of the most practical applications. Instead of asking guests to type a complex Wi-Fi password, display a QR code that automatically connects their device to your network. The WIFI: format supports WPA, WPA2, WPA3, WEP, and open networks. Hotels, restaurants, offices, and Airbnb hosts all benefit from Wi-Fi QR codes.

Payment QR codes are the foundation of mobile payment systems in many countries. PayPal, Venmo, Cash App, and cryptocurrency wallets all support QR codes for receiving payments. Small businesses can generate payment request QR codes that include the amount, recipient, and payment reference — reducing transaction friction at the point of sale.

Contact sharing via QR codes uses the vCard format to encode name, phone number, email, address, company, title, and website into a scannable code. When scanned, the contact is automatically added to the phone's address book. This is far more reliable than exchanging business cards, which often sit in a pocket and are never entered into a contact list.

The most common mistake is not testing the QR code before deployment. Always scan the code with at least two different devices (iOS and Android) from the intended scanning distance. A code that works on screen may fail when printed at a different size, on textured paper, or with insufficient contrast.

Using dynamic QR codes when static codes would suffice is another frequent error. Dynamic codes depend on a third-party service — if that service goes offline, changes pricing, or shuts down, all your printed codes stop working. For permanent content like your website URL, a static code is far more reliable.

Linking to non-mobile-friendly pages defeats the purpose of QR codes. Since QR codes are scanned exclusively by mobile devices, the destination must provide an excellent mobile experience. Link to responsive pages, app store links, or mobile-optimized landing pages — never to desktop-only websites or PDFs that are unreadable on a phone.

Placing QR codes where they cannot be scanned — on moving vehicles, behind glass with reflections, on screens with insufficient brightness, or at heights that prevent cameras from focusing — wastes the code entirely. Consider the physical context where the code will be encountered and test in that exact environment.

Adding a logo to the center of your QR code transforms a generic barcode into a branded touchpoint. Upload any image — your company logo, app icon, or profile photo — and it gets composited into the QR code center with a clean rounded white background pad and a subtle border for contrast. The result looks professional and immediately recognizable.

The logo size is adjustable via a ratio slider. Larger logos are more visually impactful but cover more data modules, which is why the error correction level is automatically set to H (30% recovery) whenever a logo is present. This ensures the code remains scannable even with the center area partially obscured. Logo embedding works with all dot shapes, frame styles, and both PNG and SVG output formats.

For best results, use a square logo with a transparent or white background. Keep the logo size ratio under 30% for reliable scanning on all devices. Test the code after adding a logo — if it doesn't scan reliably, reduce the logo size or simplify the encoded content to create a less dense code.

Traditional QR codes use square modules — the standard black-and-white grid most people recognize. But you can now customize the shape of each data module to create distinctive, design-forward QR codes that match your brand aesthetic without sacrificing scannability.

Four dot shapes are available. Square is the classic, universally compatible look. Rounded softens the corners of each module for a modern, approachable feel — popular for lifestyle brands and consumer products. Dots renders each module as a circle, creating a playful, eye-catching pattern ideal for creative agencies and event invitations. Diamond rotates each module 45 degrees, producing a geometric pattern that stands out on premium packaging and luxury branding.

All four shapes preserve the standard finder patterns (the three large squares in the corners) — these must remain recognizable for QR scanners to detect and orient the code. The shape customization applies only to the data modules, which is why all four styles remain fully scannable by any standard QR reader.

A bare QR code on a poster or menu doesn't always communicate that it should be scanned. Adding a frame with call-to-action (CTA) text provides a clear visual prompt that dramatically increases scan rates. Common CTA phrases include 'Scan Me', 'Point & Scan', 'Order Here', 'Get the App', and 'Follow Us'.

Three frame styles are available. The Text Label style places clean text below the QR code — minimal and professional, ideal for business cards and letterheads. The Banner style renders the CTA inside a colored strip at the bottom — high visibility for menus, posters, and window decals. The Border style wraps the entire code in a rounded border with a label — a premium look for event tickets, product packaging, and retail displays.

Frame colors are fully customizable and can be matched to your brand palette. Frames work seamlessly with all dot shapes and logo combinations — you can create a fully branded QR code with a diamond dot pattern, your company logo in the center, and a 'Scan for Menu' banner at the bottom, all in your brand colors.

Creating QR codes for social media profiles is one of the most requested features. Instead of sharing a long URL or asking people to search for your username, a branded QR code on your business card, store window, or event booth lets people follow you with a single scan. Supported platforms include Instagram, Twitter/X, Facebook, LinkedIn, and TikTok.

The generator uses smart input parsing — enter @username, a full profile URL, or just a username, and the generator automatically formats the correct link for each platform. For YouTube, paste a video URL, share link, or just the video ID and it's normalized to a clean youtu.be short link. PDF documents work the same way — paste any URL ending in .pdf and it becomes a scannable link.

App Store and Play Store QR codes are powerful for app developers and marketers. Enter your app's store URL or app ID, and the QR code links directly to your app listing. Combine this with your app icon as a center logo and a 'Download Now' frame for a professional, high-converting mobile download experience.

Choosing the right export format depends on where and how the QR code will be used. PNG is the default raster format — perfect for websites, social media posts, email signatures, and digital presentations. It supports transparent backgrounds and produces crisp output at the generated resolution.

SVG is a vector format that scales infinitely without quality loss. It's the best choice for print materials — business cards, posters, banners, merchandise, and packaging. SVG files are also smaller than PNGs and can be edited in design tools like Illustrator, Figma, or Inkscape.

JPEG export converts the QR code to a compressed image with a white background (since JPEG doesn't support transparency). This is ideal for embedding in Word documents, PowerPoint presentations, and email templates where PNG support may be inconsistent. The compression keeps file sizes small while maintaining scan-quality clarity.

PDF export wraps the QR code in a print-ready document with margins. This is perfect for directly printing QR codes, sharing via email as an attachment, or handing off to print shops. The PDF is generated entirely in the browser using a zero-dependency inline builder — no server calls, no third-party libraries.

Zutily's free QR Code Generator supports 18+ content types, logo embedding, four custom dot shapes, three frame styles with CTA text, custom colors, adjustable sizing, and four export formats — all with real-time auto-apply so every change updates the preview instantly.

Download as PNG, SVG, JPEG, or PDF. Copy images or SVG code directly to your clipboard. No watermarks, no branding, no limits — every QR code is generated entirely in your browser with zero data sent to any server. Your Wi-Fi passwords, contact details, and social profiles never leave your device. It is completely free, private, and requires no sign-up.