QR maker + image scanner · Local

Put the useful thing
inside the square.

Make a QR code for a link, Wi-Fi network, contact, event, or plain text—or read one from an image without automatically opening anything suspicious.

QR contents stay in your browser. Generation and image scanning happen locally. HandyPebble does not receive passwords, contacts, links, or uploaded images.

Version 2.1.0 QR codes now refresh as you type, common web addresses work without the protocol, and clearer scan-readiness checks help before you download.

Make one or read one

A decoded link is displayed first and never opened automatically. You stay in charge of the click.

What should it contain?

Website address

Text

<label class="field"><span>Network name (SSID)</span><input id="wifiName" autocomplete="off"></label><div class="field-grid"><label class="field"><span>Password</span><input id="wifiPassword" type="password" autocomplete="new-password"></label><label class="field"><span>Security</span><select id="wifiSecurity"><option value="WPA">WPA / WPA2 / WPA3</option><option value="WEP">WEP</option><option value="nopass">No password</option></select></label></div><label class="check-row"><input id="wifiHidden" type="checkbox"><span>This network is hidden</span></label></div>
<div id="contactFields" class="content-fields" hidden><div class="field-grid"><label class="field"><span>Full name</span><input id="contactName"></label><label class="field"><span>Organization</span><input id="contactOrg"></label><label class="field"><span>Phone</span><input id="contactPhone" type="tel"></label><label class="field"><span>Email</span><input id="contactEmail" type="email"></label></div><label class="field"><span>Website</span><input id="contactUrl" type="url"></label></div>
<div id="eventFields" class="content-fields" hidden><label class="field"><span>Event name</span><input id="eventName"></label><div class="field-grid"><label class="field"><span>Starts</span><input id="eventStart" type="datetime-local"></label><label class="field"><span>Ends</span><input id="eventEnd" type="datetime-local"></label></div><label class="field"><span>Location</span><input id="eventLocation"></label></div>
<p class="input-status" id="inputStatus" aria-live="polite">QR code ready.</p>
<div class="customize-block"><span class="eyebrow">Make it yours without making it fragile</span><div class="field-grid three"><label class="field"><span>Dark color</span><input id="darkColor" type="color" value="#000000"></label><label class="field"><span>Background</span><input id="lightColor" type="color" value="#ffffff"></label><label class="field"><span>Error correction</span><select id="errorLevel"><option value="M">Medium</option><option value="Q">Quartile</option><option value="H">High · best with logo</option><option value="L">Low · smallest</option></select></label></div><div class="setting-actions"><p class="contrast-warning" id="contrastWarning" hidden>Low contrast may make this QR code harder to scan.</p><button class="utility-button" id="resetColors" type="button">Reset colors</button></div><div class="field-grid"><label class="field"><span>Download size</span><select id="qrSize"><option value="512">512 px</option><option value="1024" selected>1024 px</option><option value="2048">2048 px</option></select></label><label class="field"><span>Quiet-zone padding</span><select id="qrMargin"><option value="4">Standard</option><option value="6">Generous</option><option value="2">Compact</option></select></label></div><label class="field"><span>Optional center logo</span><input id="logoInput" type="file" accept="image/png,image/jpeg,image/webp,image/svg+xml"><small>A small square logo works best. High error correction is selected automatically. Large logos can reduce scan reliability.</small></label></div><div class="editor-actions"><button class="secondary-button" id="generateQr" type="button">Refresh QR code</button><button class="utility-button" id="resetStudio" type="button">Reset this QR</button></div><p class="remember-note"><strong>Style memory only:</strong> colors, size, padding, and error correction stay on this device. QR contents and Wi-Fi passwords do not.</p></section>
<aside class="panel soft"><span class="eyebrow">Live code</span><div class="qr-preview" id="qrPreview"><canvas id="qrCanvas" width="1024" height="1024"></canvas><div id="qrRenderSource" hidden></div></div><p class="payload-note" id="payloadNote">Website QR code · 24 characters</p><div class="qr-health" id="qrHealth"><strong id="qrReadyStatus">Ready to scan</strong><dl><div><dt>Contrast</dt><dd id="contrastStatus">Good</dd></div><div><dt>Error correction</dt><dd id="correctionStatus">Medium</dd></div><div><dt>Quiet zone</dt><dd id="quietStatus">Good</dd></div></dl></div><div class="button-row"><button class="primary-button" id="downloadPng" type="button">Download PNG</button><button class="secondary-button" id="copyPayload" type="button">Copy contents</button></div><div class="notice" id="scanReminder">Test important printed codes with the actual phone and print size you plan to use. Fancy colors and oversized logos can reduce reliability.</div><p class="status-line" id="makeStatus" aria-live="polite"></p></aside></div></section>
<section id="scanPanel" hidden><div class="split-layout"><section class="panel"><label class="drop-zone" id="scanDropZone"><input id="scanInput" type="file" accept="image/*"><span><strong>Choose a QR image or drop it here</strong><span>PNG, JPG, WebP, or another browser-readable image</span></span></label><div class="preview-box scan-preview" id="scanPreview"><span class="muted">The image preview stays here on your device.</span></div></section><aside class="result-card"><span class="eyebrow">Decoded result</span><strong class="scan-result-title" id="scanResultTitle">Nothing scanned yet</strong><pre class="code-box" id="scanResult">Choose an image to begin.</pre><div class="button-row"><button class="secondary-button" id="copyScan" type="button" disabled>Copy result</button><a class="secondary-button" id="openScan" href="#" target="_blank" rel="noopener noreferrer" hidden>Open link</a></div><div class="notice">A QR code is data, not a trust signal. Read the destination before opening a link or joining a network.</div><p class="status-line" id="scanStatus" aria-live="polite"></p></aside></div></section>
</div></div></section>
<section class="explain-section"><div class="shell"><span class="kicker">The useful details</span><h2>Useful presets, cautious scanning.</h2><div class="info-grid"><article><span>01</span><h3>Payloads are formatted correctly</h3><p>Wi-Fi, contact, and event modes build the standard text structure expected by common scanners.</p></article><article><span>02</span><h3>Quiet space stays around it</h3><p>The download keeps a clean margin so camera apps can find the code boundary.</p></article><article><span>03</span><h3>Decoded links wait for you</h3><p>The scanner reveals the text first and never redirects the page on its own.</p></article></div></div></section>
<section class="shell faq-section" id="faq"><span class="kicker">Straight answers</span><h2>QR code questions.</h2><div class="faq-list"><details><summary>Will a custom color QR code still scan?</summary><p>Usually, if the modules remain much darker than the background. Black on white is the safest. Avoid low contrast, transparent backgrounds, and inverted light-on-dark codes unless you test every scanner that matters.</p></details><details><summary>How large can the center logo be?</summary><p>This tool keeps it conservative and adds a white backing square. High error correction helps, but no logo placement is guaranteed—always test the final downloaded or printed code.</p></details><details><summary>Does the Wi-Fi password get uploaded?</summary><p>No. The Wi-Fi payload and QR image are generated in the browser. The password exists in the open page only and is not included in saved style preferences.</p></details><details><summary>Why doesn’t the scanner open links automatically?</summary><p>Because a QR image can point anywhere. Showing the decoded destination first gives you a chance to check the domain and context.</p></details></div></section>
</main><footer class="site-footer"><div class="site-footer-inner"><a class="site-footer-brand" href="/"><span class="site-footer-mark">H</span><span>HandyPebble</span></a><p>Made by one human who likes useful little tools. · <a href="/privacy/">Privacy</a> · <a href="/changelog/">What’s new</a> · <a href="/">All tools</a> · <a href="/disclaimer/">Disclaimer</a></p></div></footer><script src="/qr-code-studio/vendor/qrcode.min.js"></script><script src="/qr-code-studio/vendor/jsQR.js"></script><script src="/qr-code-studio/app.js?v=20260927-qr21" defer></script></body></html>

Put the useful thinginside the square.

Make one or read one

Put the useful thing
inside the square.