Device Preview

Device Preview shows how your icon will look in real-world contexts. It helps you catch readability issues, alignment problems, and background clashes before you export.

Available mockups

Zapicon offers three preview modes:

• iPhone — home screen grid with wallpaper.
• MacBook — macOS Dock and Launchpad context.
• Web — browser tab favicon and Apple touch icon.

How to switch previews

1. Edit your icon in the main canvas.
2. Click the device icons above or beside the preview area.
3. The mockup updates instantly.

What to check

iPhone preview

• Is the icon recognizable at small sizes?
• Does the foreground contrast well with the background?
• Is the padding consistent with surrounding app icons?

MacBook preview

• Does the icon look good in the Dock?
• Is it readable when reduced to a menu-bar or Finder size?
• Does the Squircle or corner radius feel right for macOS?

Web preview

• Is the favicon still clear at 16×16 px?
• Does the Apple touch icon stand out on a home screen?
• Are transparent backgrounds handled correctly in the browser tab?

Preview is non-destructive

The device mockups are only for reference. They do not change the exported files. Exported assets are always the raw icon images without the device frames.

Tips

• Test both light and dark wallpapers on the iPhone mockup.
• If your icon uses a transparent background, verify it on a non-white page in the Web preview.
• Zoom the canvas to inspect small-size clarity before exporting.