Avatar-Platzhalter-Generator (Initialen und Muster)
Avatar-Platzhalter-Generator
Avatar-Platzhalter-Generator: Initialen- und Muster-Avatare als SVG | We.Inc
Erstelle Initialen-Avatare und geometrische Muster-Avatare aus jedem Namen. Gleicher Name, gleicher Avatar. Lade SVG oder PNG herunter, kopiere eine Data-URI oder erzeuge ein ganzes Team auf einmal. Inklusive React-Code.
Ein Platzhalter-Avatar ersetzt ein Profilfoto, bis jemand eines hochlädt. Üblich sind die Initialen der Person auf einer Farbe, die aus ihrem Namen abgeleitet wird, sodass derselbe Name immer denselben Avatar bekommt. Gib unten Namen ein, um Initialen-, Verlaufs- oder Muster-Avatare zu erstellen, und lade danach SVG- oder PNG-Dateien herunter oder kopiere den Code.
Avatar-Stile in diesem Generator
Stil
Aussehen
Ideal für
Initialen
Zwei Buchstaben auf einer einfarbigen Fläche
Teamseiten, Kommentare, CRMs
Initialen mit Verlauf
Zwei Buchstaben auf einem Zweifarbenverlauf
Consumer-Apps, verspielte Marken
Muster
Ein gespiegeltes Raster aus 5 mal 5 Quadraten
Anonyme Nutzer, Testkonten, Bots
Gib einen Namen oder eine ganze Liste ein. Jeder Name wird gehasht, um Farbe und Muster festzulegen, daher bleiben die Ergebnisse über Neuladen und Geräte hinweg gleich. Die Textfarbe wird automatisch für guten Kontrast gewählt. Es wird nichts hochgeladen.
Gib Namen ein, einen pro Zeile. Verwende echte Namen, E-Mail-Adressen oder Nutzer-IDs; aus jedem Eintrag entsteht ein Avatar.
Wähle einen Stil, eine Form (Kreis, abgerundet oder quadratisch), eine Palette und eine Größe.
Die Initialen stammen aus dem ersten und letzten Wort des Namens; bei einem einzelnen Wort werden dessen erste zwei Buchstaben verwendet.
Lade jeden Avatar als SVG oder PNG herunter, kopiere sein SVG oder seine Data-URI oder kopiere die React-Komponente, die sie in deiner eigenen App erzeugt.
Hashe eine stabile ID statt eines Anzeigenamens, wenn Personen sich umbenennen können. Sonst ändert sich die Avatarfarbe mit dem Namen.
Beschränke Initialen auf zwei Buchstaben. Drei Buchstaben wirken in kleinen Größen gedrängt und sind schwerer lesbar.
Zeige einen Avatar immer zusammen mit dem Namen der Person in der Nähe oder im Alt-Text, denn Farbe und Buchstaben allein identifizieren für einen Screenreader niemanden.
SVG-Avatare bleiben in jeder Größe scharf und wiegen nur wenige hundert Bytes, sodass du sie spontan erzeugen kannst, statt Bilddateien zu speichern.
Häufige Fragen
Wie werden die Farben ausgewählt?
Der Name wird durch eine kleine Hash-Funktion (FNV-1a) geschickt, die ihn in eine Zahl umwandelt, und diese Zahl wählt eine Farbe aus der Palette. Derselbe Name ergibt immer dieselbe Zahl, daher ändert sich der Avatar nie, solange sich der Name nicht ändert.
Ist die Textfarbe barrierefrei?
Für jeden Hintergrund berechnet der Generator mit der Formel für relative Leuchtdichte aus den WCAG, ob schwarzer oder weißer Text mehr Kontrast hat, und verwendet diesen. Pastellpaletten bekommen dunklen Text, kräftigere Farben weißen Text.
Darf ich diese Avatare in einem kommerziellen Produkt verwenden?
Ja. Die Avatare werden von deinem eigenen Browser aus deiner Eingabe erzeugt und gehören dir. Das React-Beispiel auf dieser Seite darfst du kostenlos in jedes Projekt kopieren.
Erzeugt das Tool fiktive Personen für Testdaten?
Nein. Es erstellt abstrakte Platzhalter aus Namen, die du angibst, und das ist für Demos die sicherere Wahl als Fotos echter oder generierter Gesichter.
Warum deterministische Avatare helfen
Wenn jede Person überall dieselbe Farbe behält, erkennen Nutzer Kollegen in einer langen Liste, noch bevor sie den Namen lesen. Zufällige Farben bei jedem Seitenaufruf machen das zunichte und sorgen außerdem für unzuverlässige Screenshots und Tests.
Hashing liefert stabile Ergebnisse, ohne dass etwas gespeichert werden muss. Server und Browser können aus derselben ID denselben Avatar zeichnen.
Rendern in großem Umfang
Bei Listen mit Hunderten von Personen renderst du das SVG besser inline als Komponente, statt Bilddateien zu erzeugen. So entfallen Netzwerkanfragen komplett und das Markup bleibt klein.
Wenn du eine Bild-URL brauchst, etwa für eine E-Mail oder ein Open-Graph-Tag, exportiere pro Person einmal ein PNG und cache es, denn viele E-Mail-Programme zeigen kein SVG an.
React-Komponente für Initialen-Avatare
Hasht den Namen, wählt eine Farbe, entscheidet sich für schwarzen oder weißen Text mit gutem Kontrast und rendert ein Inline-SVG. Keine Abhängigkeiten.
Ruhig
Pastell
Mono
Avatare erstellen
Namen, einer pro Zeile (bis zu 60)
Stil
Initialen
Muster
Form
Kreis
Abgerundet
Quadratisch
Palette
Größe: {n}px
Avatar für {name}
Kopieren
In React verwenden
Derselbe Initialen-Avatar als kleine Komponente, die du in jede React-App einbauen kannst.