Favicon- und App-Symbole

Mit diesem Icon-Generator erstellen Sie aus einem quadratischen Bild Website-Icons samt Markup.

  1. Hinzufügen
  2. Anpassen
  3. Erstellen
  4. Behalten
Tool wird geladen …

So verwenden Sie dieses Tool

  1. Fügen Sie Ihre Dateien hinzu – ziehen Sie sie auf die Seite oder wählen Sie sie aus. Sie bleiben auf Ihrem Gerät.
  2. Fügen Sie ein annähernd quadratisches Ausgangsbild hinzu. Das Motiv sollte nahe der Mitte liegen, da es bei den kleinsten Größen optisch zugeschnitten wird.
  3. Wählen Sie eine Hintergrundfarbe für die deckenden Symbole und legen Sie fest, ob die Social Card mit 1200×630 enthalten sein soll.
  4. Klicken Sie auf „Build icon set“ und laden Sie die Ergebnisse einzeln oder als ZIP herunter.

Über dieses Tool

Mit diesem Icon-Generator erstellen Sie aus einem quadratischen Bild Website-Icons samt Markup. Die Verarbeitung läuft im Browser; nichts wird hochgeladen. Kostenlos, ohne Konto und Wasserzeichen.

Datenschutz und Einschränkungen

Ein Durchlauf erstellt einen festen Satz: favicon.ico (16, 32, 48 und 256 px), apple-touch-icon.png (180 px), icon-512.png und, falls ausgewählt, og-image.png (1200×630). Die Größen lassen sich nicht ändern. manifest.json-Einträge werden nicht erstellt – übernehmen Sie die Dateinamen in Ihre eigene Manifestdatei. Die Social Card wird mittig aus Ihrem Bild auf 1200×630 zugeschnitten. Bei einem hochformatigen oder quadratischen Ausgangsbild entfallen dadurch der obere und untere Bereich; kleine Ausgangsbilder werden hochskaliert und wirken dadurch unscharf.

Zuletzt aktualisiert:

Häufig gestellte Fragen

Wie groß sollte das Quellbild sein?

Mindestens 512 × 512 Pixel, quadratisch und mit genügend Abstand zwischen Motiv und Bildrand. Alle Größen werden daraus herunterskaliert. Ist das Quellbild kleiner, wirkt das Motiv in den größeren Größen unscharf.

Warum brauche ich so viele Icon-Größen?

Jede Plattform verwendet eine eigene Größe: 16 Pixel im Browser-Tab, 180 Pixel für den iPhone-Home-Bildschirm und 512 Pixel für den Android-Startbildschirm. Wenn Sie jede Größe bereitstellen, muss das System kein unpassend großes Icon skalieren, was die Darstellung beeinträchtigen kann.

Brauche ich favicon.ico trotzdem?

Es ist sinnvoll, die Datei bereitzustellen. Einige ältere Browser und Crawler rufen /favicon.ico direkt ab und ignorieren die Link-Tags. Die ICO-Datei mit mehreren Größen deckt diese Fälle ab.

Wofür ist die Open-Graph-Karte gedacht?

Sie zeigt das Bild an, wenn Ihr Link in sozialen Medien oder einem Chat geteilt wird. Ohne ein solches Bild erscheint der Link als schlichtes blaues Rechteck.