40 · The small things that must be read
QR codes and favicons
Two tiny pieces with strict rules: a QR code that scans the first time and a set of icons that is recognized in any tab.
QR code
Illustrative example
- Colors
- Black (#0B0C0D) on white. If the background is dark, a white box around it.
- Quiet zone
- 4 modules of free space around it.
- Printed size
- Minimum 20 × 20 mm. Reading distance × 0.1 as a guide.
- Error correction
- Level M (15%).
- Center
- No logo in the center. A clean QR fails less.
- Destination
- A short nitente.com address, with no tracking parameters.
- Label
- Always a text nearby: “Scan to see the manual” and the written address.
- Test
- Scan it with two different phones, at real size, before printing.
Favicons and app icons
| File | Size | Symbol version |
|---|---|---|
| favicon.svg | Vector | 5 stripes, graphite background |
| favicon.ico | 48 × 48 | 5 stripes |
| favicon-16/32/48.png | 16, 32, 48 px | 5 stripes |
| apple-touch-icon.png | 180 × 180 | Reflect icon, full screen |
| pwa-192.png / pwa-512.png | 192 and 512 px | Reflect icon with 10% safe margin |
| og.png | 1200 × 630 | Black background, logo and headline |
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#08090a" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)">Do
- The graphite background makes the favicon visible on light and dark tabs
- Test in a tab of each theme
Don't
- Use the seven-stripe version at 16 px
- Recolor the favicon by the product on the page