Was ist Icon-Ersteller?

Der Icon-Ersteller ermöglicht es Ihnen, einfache, professionelle Icons für Apps, Websites und Favicons zu gestalten. Kombinieren Sie Formen, Buchstaben und Farben auf einem Rastercanvas, fügen Sie optional einen Zweifarbverlauf hinzu und exportieren Sie in mehreren Größen (16×16 bis 512×512) als PNG, SVG, .ico mit mehreren Größen oder als komplettes Favicon-ZIP-Paket.

Als Basis wählen Sie Kreis, Quadrat oder abgerundetes Quadrat, legen Hintergrund- und Vordergrundfarbe fest und platzieren entweder einen einzelnen Buchstaben oder eines der mitgelieferten Symbole (Häkchen, Stern, Pfeil, Herz, Plus). Schriftgröße und Offset werden so feinjustiert, bis das Zeichen mittig sitzt, und sechs Standardgrößen von 16×16 bis 512×512 werden mit einem Klick exportiert.

Anleitung

1. Schritt 1 — Wählen Sie eine Grundform (Kreis, Quadrat, abgerundetes Quadrat) und legen Sie die Hintergrundfarbe fest.
2. Schritt 2 — Fügen Sie einen Buchstaben, ein Symbol oder eine einfache Form als Overlay hinzu. Passen Sie Vordergrundfarbe, Größe und Position an.
3. Schritt 3 — Sehen Sie sich die Vorschau in mehreren Größen an und exportieren Sie als PNG (16, 32, 48, 128, 256, 512 px), SVG, .ico oder laden Sie das vollständige Favicon-ZIP samt fertigem HTML-Snippet zum Einfügen herunter.

Wann verwenden

• Ein Favicon für ein Side-Projekt erzeugen, ohne Figma zu öffnen oder ein Icon-Pack zu kaufen.
• Ein Platzhalter-App-Icon für einen Android- oder iOS-Prototyp gestalten, bis das endgültige Design fertig ist.
• Ein Monogramm (Initiale auf farbiger Kachel) für eine private Website oder einen GitHub-Avatar bauen.

Ergebnis

Ein Entwickler erstellt ein Favicon für eine Todo-App: blauer abgerundeter Quadrat-Hintergrund (#3B82F6) mit einem weißen Häkchen-Symbol, exportiert als 32×32-PNG für den Browser-Tab und 512×512-PNG für das PWA-Manifest.

Häufige Fragen

Welche Größen brauche ich wirklich für ein Website-Favicon?

Mindestens ein 32×32 PNG für die Tabs der Desktop-Browser und ein 180×180 (bzw. 192×192) für iOS-Homescreen und Android-Verknüpfungen. Für eine PWA kommt 512×512 fürs Manifest dazu. Der Button Alle Größen exportieren erstellt den ganzen Satz in einem Schritt.

Lieber SVG oder PNG exportieren?

SVG skaliert verlustfrei und ist die richtige Wahl für In-App-Icons in verschiedenen Größen, etwa für Sidebar-Logos. PNG ist Pflicht für Favicons, App-Stores und alle Plattformen, die keinen Vektor entgegennehmen. Das Exportmenü bietet beides.

Kann ich ein eigenes Bild oder Symbol statt der mitgelieferten verwenden?

Ja. Stellen Sie das Overlay auf den Modus „Bild“ und laden Sie ein PNG, JPG, SVG oder WebP hoch — es wird auf die gewählte Form zugeschnitten, und Sie können es vor dem Export skalieren, verschieben und drehen. Für ein schnelles Zeichen nimmt der Modus „Buchstabe“ jedes einzelne Zeichen an, auch ein eingefügtes Emoji. Für ein komplett eigenes Logo laden Sie Ihr transparentes SVG und wählen den transparenten Hintergrund.

Warum sitzt mein Buchstabe bei kleinen Exportgrößen schief?

Das optische Zentrum einer Schrift fällt selten mit dem geometrischen zusammen. Buchstaben mit Unterlängen (g, p, y) oder hohe Großbuchstaben wirken ausgewogener, wenn Sie sie um ein bis zwei Pixel vom mathematischen Mittelpunkt verschieben. Vor dem Export Offset X und Offset Y nutzen.

Stimmt das abgerundete Quadrat mit der iOS- oder Android-Systemform überein?

Es ist ein generisches abgerundetes Quadrat nahe an der iOS-Form. Sowohl Android (rund, Squircle, Tropfen) als auch iOS legen eine adaptive Icon-Maske über das, was Sie liefern; gestalten Sie deshalb randvoll und überlassen Sie dem System den Beschnitt auf die aktuelle Form.

Ähnliche Tools