Printable Guest Wi-Fi QR Cards: Design, Security and Testing

A guest Wi-Fi sign can look perfect on a laptop but fail at the reception desk. The QR code may be printed too small, a dark background may reduce contrast, or the scanner may not understand the network’s security mode. And a code that scans successfully can still point to credentials the router no longer accepts.

A useful Wi-Fi card has two jobs: it helps visitors connect quickly, and it gives them an alternative if scanning fails. This tutorial walks through the full workflow, from setting up guest credentials to printing and testing an accessible, easily maintained card.

First decide what network you are sharing

A QR code does not create a Wi-Fi network or change a router password. It represents connection information. Before designing the card, check the router or access-point configuration:

• Is there a dedicated guest SSID (network name)?
• Is guest isolation enabled if you want visitors separated from office or home devices?
• Is the network set to WPA2 Personal with AES, WPA2/WPA3 mixed mode, or WPA3 Personal?
• Is a captive portal required after joining?
• Who is responsible for rotating the password and replacing printed signs?

Guest isolation and connection limits are router features, not QR-code properties. Hiding an SSID also does not make a network secure. If visitors only need internet access, consider a separate guest network instead of publicly posting credentials for the main network.

For the security-mode trade-offs, see the Wi-Fi QR code generator documentation, which distinguishes WPA2, WPA3, Enhanced Open and legacy WEP. Its main purpose is to produce a code from details that already work on your router.

Create a strong, usable guest password

An event venue might value a password that can be read aloud or typed manually; a workspace might prefer a long random value that visitors never need to type because they scan it. Both approaches can work if the secret is unpredictable and compatible with the router.

The password and passphrase generator supports random-character passwords and random-word phrases. For ordinary WPA/WPA2 Personal network settings, observe the passphrase length and byte rules your router supports. The guide to strong passwords and passphrases also explains why length, randomness and uniqueness matter more than clever substitutions.

Use a fictitious example when designing your card:

Network: Example Guest
Password: example-guest-passphrase

Replace these with actual network settings only after you have finished testing the design. Store the real guest password securely and decide when it should be changed. Remember that everyone who can read or decode the printed QR code can recover its embedded password. A QR image is not an encrypted secret container.

Generate the code with the actual router settings

Open the Web2Generators Wi-Fi QR code generator and enter the exact SSID and password, including capitalization and spaces. Choose the connection security type that matches the router, not the type you wish the network had.

The generator can create a PNG for screen use or printing. It supports common WPA/WPA2 settings as well as WPA3 Personal (SAE), open networks, Enhanced Open and certain special cases. The Enhanced Open option uses a no-password payload; encryption depends on the device and network, and is not enforced by the code. However, scanners vary in their support, especially for WPA3-only or less common formats. WPA3-only support on one phone does not guarantee every guest device will understand the same QR payload.

If a network name includes punctuation such as a semicolon or backslash, do not manually remove or alter those characters. The tool handles separators for its QR format. It also lets you inspect the encoded data, which can help with diagnostics but will reveal the credential to anyone who sees it.

The tool exports a PNG with a white margin around the code. Keep that margin. It is called the quiet zone: keep at least four modules of clear space on all four sides so a scanner can identify the code’s boundaries.

Make a printed card that can be understood at a glance

Avoid treating the QR image as a decorative icon. The layout should communicate a simple instruction and make the code easy to scan:

1. A clear heading: “Guest Wi-Fi”.
2. A short instruction: “Open your camera and scan to connect”.
3. A large, sharp QR image with adequate white space.
4. A readable network name and, where appropriate, a manually typeable password.
5. A line explaining where to get help, such as “Ask reception if scanning does not work”.

Do not put the QR code over a photo, gradient or texture. Use dark code modules on a plain, light surface. Avoid rounding or recoloring its individual squares unless you can thoroughly test the resulting image with multiple scanners. A clean black-and-white code is easier to reproduce consistently across printers.

The Color Studio palette and contrast checker can help choose accent colors for the heading and surrounding card, and check text against its background. Contrast checks for a text label do not certify a QR code’s scan reliability. Keep the QR itself simple.

A simple HTML card with print-friendly CSS

For a local HTML file or a restricted staff page used to print the card, use ordinary semantic HTML. Save the QR PNG from the generator as guest-wifi.png, then reference it locally. The following markup uses placeholders. A real QR PNG still contains the credentials even when the HTML does not spell them out, so keep both files within your intended sharing workflow.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Guest Wi-Fi card</title>
  <link rel="stylesheet" href="wifi-card.css">
</head>
<body>
  <main class="guest-card" aria-labelledby="card-title">
    <p class="eyebrow">Welcome</p>
    <h1 id="card-title">Guest Wi-Fi</h1>
    <p>Scan with your camera to join.</p>
    <img src="guest-wifi.png" width="300" height="300"
         alt="Wi-Fi QR code for Example Guest. Ask reception for manual connection details.">
    <dl>
      <div><dt>Network</dt><dd>Example Guest</dd></div>
      <div><dt>Password</dt><dd>Ask at reception</dd></div>
    </dl>
    <p class="help">Having trouble? Ask a member of staff.</p>
  </main>
</body>
</html>

This alternative text identifies the image and points readers to a non-visual alternative. It does not pretend that screen-reader software can use a camera scan. Staff should be able to provide the network details in an accessible way.

Here is a CSS starting point for a small A6-format print card. Browsers and printers vary; preview the result and adjust for your paper and printer margins.

* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 1rem;
  font: 16px/1.4 system-ui, sans-serif;
  color: #17212b;
  background: #f3f6f9;
}
.guest-card {
  width: min(100%, 420px);
  margin: 0 auto;
  padding: 18px;
  text-align: center;
  background: white;
  border: 1px solid #17212b;
  border-radius: 8px;
}
.guest-card h1 { margin: .2em 0; }
.guest-card img {
  display: block;
  width: min(100%, 260px);
  height: auto;
  margin: 1rem auto;
  background: white;
}
.guest-card dl { text-align: left; }
.guest-card dl div { display: flex; gap: 1rem; margin: .4rem 0; }
.guest-card dt { min-width: 6rem; font-weight: 700; }
.guest-card dd { margin: 0; overflow-wrap: anywhere; }
.help { font-size: .95rem; }
@page { size: A6; margin: 10mm; }
@media print {
  body { padding: 0; background: white; color: black; font: 11pt/1.3 sans-serif; }
  .guest-card {
    width: 100%; margin: 0; padding: 0;
    border: 0; border-radius: 0;
    break-inside: avoid;
  }
  .guest-card h1 { font-size: 18pt; }
  .guest-card p { margin: 2mm 0; }
  .guest-card img { width: 40mm; max-width: 100%; margin: 3mm auto; }
  .guest-card dl { margin: 3mm 0; }
  .guest-card dl div { flex-wrap: wrap; gap: 1mm 3mm; margin: 1.5mm 0; }
}

Avoid relying on a colored background or an image that only appears when the user enables a particular print setting. The QR image should be an actual <img>, not a background image that the browser might suppress. The CSS property print-color-adjust: exact can request faithful colors, but user settings and printer behavior can still override the request.

Choose size for the real scanning distance

A 300-pixel image is not automatically a good printed code. Final scan performance depends on how many QR modules it contains, physical printed size, print resolution, contrast, camera focus and viewing distance.

The print CSS above starts at 40 mm across, including the quiet zone. That is a layout starting point, not a guaranteed minimum: test from the distance where guests will actually stand and increase it when needed. The QR generator offers sizes up to 2,048 pixels, rounding the actual export down to keep whole-pixel modules; larger source dimensions help avoid visibly pixelated edges when printing at the intended size. Do not resize a small raster source upward until its edges become blurred.

Use the print dialog’s preview and print one physical sample. Verify the full quiet zone survives trimming, that no printer border clips the image, and that the ink is dark enough. If you need to place the card on a table, test under reflections and indoor lighting too.

Test the complete journey, not just the image

The important question is whether guests can join the network. A code that triggers a Wi-Fi dialog is only an intermediate success.

Forget any saved connection on test phones before scanning, so stored credentials do not hide a wrong password in the code. Try this matrix before making fifty copies:

Check the phone’s connected network name, then load an HTTPS page to verify actual internet access. The QR format does not bypass captive portals or grant devices access your router blocks.

For a simple introduction to this tool, see Free Wi-Fi QR Code Generator: Share Your Network with a Scan. For a broader view of image sizing on the web, read Responsive Images That Actually Save Bandwidth.

Keep the sign maintainable and the credentials controlled

Someone needs to replace every physical or digital copy after the guest password changes. Note where signs are displayed, which version is current and whether old PDFs or event emails still contain the previous code. A static QR image does not update when the Wi-Fi password changes.

Do not publish a password-bearing QR code on an unrestricted web page unless you are comfortable sharing the credential with everyone who can access that page. If the network is meant for visitors only, distribute the printed card in the intended location, or have staff provide the details. Separation from trusted devices and sensible router settings matter more than hiding the password inside a pattern.

A good sign gives guests options and staff a predictable replacement process. That is more valuable than a visually elaborate QR image.

Further reference

• DENSO WAVE: QR Code quiet zone and sizing 
• MDN: print-color-adjust