Shop-Icons Generator

Zeigen Sie Icons im Shop lieber per CSS kleiner an, als sie in dieser Größe zu exportieren. Das sorgt für bessere Schärfe auf Smartphones und bei Zoom.

PNG und WebP sind Pixelgrafiken. Wenn ein Icon im Shop auf einem Smartphone oder bei Zoom vergrößert wird, kann es schnell verpixelt wirken.

Praxis-Tipp: Exportieren Sie PNG/WebP in einer höheren Auflösung (z.B. 2× oder 3×) und verkleinern Sie die Anzeige im Shop per CSS. Dadurch bleibt das Icon bei hoher Display-Auflösung (Retina) und bei Zoom deutlich schärfer.

Beispiel: Anzeige im Shop 100×60 px, Export im Generator 200×120 px (2×).

SVG-Hinweis: SVG ist vektorbasiert und bleibt beim Skalieren grundsätzlich scharf. Bei SVG ist die Exportgröße weniger relevant als die Darstellung im Layout.

WebP mit PNG-Fallback

WebP ist meist kleiner als PNG und lädt schneller. Manche Systeme oder alte Browser können WebP jedoch nicht zuverlässig verwenden.

Darum stellen Sie am besten beide Dateien bereit: shop_icons.webp und shop_icons.png.
Der Browser nutzt automatisch WebP, wenn möglich, und fällt sonst auf PNG zurück (Fallback). Beispiel (HTML):

<picture>
  <source type="image/webp" srcset="/assets/icons/shop_icons.webp" />
  <img class="shop-icon" src="/assets/icons/shop_icons.png" alt="Versand &amp; Zahlung" />
</picture>

Beispiel (CSS):

.shop-icon{
  width: 100px;
  height: 60px;
  object-fit: contain;
  display: block;
}

Proportional (keine Verzerrung)
Wenn aktiv, werden Logos immer im Original-Seitenverhältnis in die Icon-Fläche eingepasst (keine Stauchung / Dehnung).

Skalierung / Füllgrad
Steuert, wie groß das Logo innerhalb der Icon-Fläche dargestellt wird. Ein geringerer Wert erzeugt mehr Randabstand (Padding) und sorgt oft für ein ruhigeres, einheitlicheres Gesamtbild.