Previews & Mockups
Build confidence by checking your logo across real usage contexts before you export.
The Preview dialog helps you decide whether your logo will still work once it leaves the editor. A design that looks strong at 512px can become unclear in a browser tab, feel cramped in a header, or lose contrast on a different background.
Use previews as a confidence check before export: inspect small favicon sizes, browser chrome, home-screen-style mockups, and background contrast. Open Previews from the header or the command palette (⌘K / Ctrl+K → Previews).
Mockups are approximations — OS masking, launcher themes, and browser chrome vary. Always verify on the real surface after export.
What to check
Before exporting, look for:
- Recognition at small sizes — the motif should still read at 16px and 32px.
- Enough contrast — check light, dark, and colored backgrounds where available.
- Comfortable padding — the logo should not feel clipped or crowded in browser tabs, headers, or home-screen icons.
- Shape fit — rounded backgrounds, transparent icons, and maskable assets can feel different across platforms.
- Export agreement — previews should help you catch issues before you download and install files.
Mockups are not a replacement for testing on the real site or device, but they reduce the chance of shipping a logo that only worked in the editor canvas.
Small sizes
Shows your logo at 16px, 32px, 48px, and 64px. Use these checks to catch readability problems before downloading files.
Focus on 16px and 32px first. If the motif disappears or blurs there, adjust padding and contrast in the editor before exporting.
Web mockups
The default preview combines small-size checks with browser-tab and PWA-style mockups for Web Assets. Use it to check contrast against light and dark chrome.
Additional mockups
Today, Previews & Mockups focuses on small-size checks and web mockups. As more Export Targets become available, this dialog may add matching context views.
Live favicon preview
Use Live Favicon in the header to push the current design to your browser tab while you edit. Helpful for spotting cache and contrast issues on the actual favicon slot.
Turn it off when you are done — it updates the tab icon for the current session only and does not affect exported files.
Workflow
- Design with small-size readability in mind — see Editor Guide.
- Open Previews and check small sizes plus web mockups.
- Export and install files — Web Assets.
- Hard refresh and verify on the live site — Troubleshooting if the old icon persists.