Skip to main content

My icons look blurry (Retina Fix)

If your trust badges look sharp on your computer but blurry or "pixelated" on a mobile phone or high-quality monitor, it is likely a resolution issue.

P
Written by Petras Nargela
Updated today

Method 1: Use SVG Files (Best Quality)

Scalable Vector Graphics (.SVG) are the gold standard for icons. Unlike PNGs or JPGs, they are made of math, not pixels.

  • Benefit: They never blur, no matter how big you make them or what screen they are viewed on.

  • How to fix:

    1. Ask your designer for the .SVG version of your logo or icon.

    2. In the app editor, go to Content > Select Icon > Uploads.

    3. Upload the .svg file instead of the .png.

Method 2: The "2x Rule" for PNGs

If you must use a PNG or JPG file, you need to upload it at double the size you want it to display.

  • The Rule: If you want the icon to appear 50px wide on your store, upload an image that is 100px wide.

  • Why? This gives high-resolution screens the extra data they need to display a crisp image, while the app automatically scales it down to fit the layout.

Method 3: Check Design Settings

Sometimes an icon is blurry simply because the Icon Size setting in the app is larger than the original image you uploaded.

  1. Go to the Design tab in the app editor.

  2. Look at the Icon style section.

  3. Check the number in the Icon size input field (e.g., set to 32px).

  4. Ensure your uploaded image is at least as big as this number (ideally double).

Example: Do not set the size to 64px if your uploaded image is only 32px. It will look stretched and fuzzy.

Did this answer your question?