Ein SVG-Favicon mit Emoji und eigenen Farben erstellen

Einsatz und Zweck des Generators

Ein Favicon kennzeichnet eine Website etwa im Browser-Tab oder in einer Lesezeichenansicht. Mit diesem Generator gestalten Sie ein SVG-Favicon aus einem Emoji sowie einer Hintergrund- und einer Textfarbe. Dazu erhalten Sie HTML-Markup für die Einbindung. Eine Icon-URL lässt sich optional ergänzen, wenn neben der SVG-Variante weitere Icon-Verknüpfungen im Markup stehen sollen. Die Eingaben haben dabei unterschiedliche Aufgaben: Das Emoji erscheint im SVG, die beiden Farben prägen dessen Darstellung, und eine nicht leere URL wird in Verknüpfungen eingesetzt. So können Sie die Ausgabe vor dem Einfügen in Ihre Website gezielt auf Gestaltung und Inhalt prüfen.

Eingaben festlegen und Ergebnis erzeugen

Öffnen Sie den Favicon-Generator und suchen Sie das Eingabefeld für das Emoji. Tragen Sie dort das Zeichen ein, das im SVG-Favicon erscheinen soll. Lassen Sie das Feld unverändert, wird ein Schraubenschlüssel-Emoji verwendet.
Wählen Sie eine Hintergrundfarbe und eine Textfarbe. Eigene Werte ersetzen die voreingestellten Farben #2563eb für den Hintergrund und #ffffff für den Text. Überlegen Sie vor der Erzeugung, ob das Emoji vor diesem Hintergrund gut erkennbar bleibt.
Fügen Sie optional eine vorhandene Icon-URL in das dafür vorgesehene Feld ein. Sobald dieses Feld einen Inhalt enthält, übernimmt die Ausgabe die Adresse in zwei HTML-Verknüpfungen für Icons. Die Adresse wird dabei als Bestandteil des Markups eingesetzt.
Sie können auch einen Seitentitel eintragen. Dieses Feld dient jedoch nicht zur Gestaltung des Ergebnisses: Der eingegebene Titel wird im erzeugten Markup nicht verwendet.
Starten Sie die Erzeugung und sehen Sie sich die bereitgestellten Favicon-Daten an. Übernehmen Sie das SVG-Markup und das HTML-Markup erst, nachdem Emoji, Farben und eine optionale URL zu Ihrem Vorhaben passen.

Die erzeugten Bestandteile unterscheiden

Nach einer erfolgreichen Erzeugung sehen Sie SVG-Markup für das Favicon und HTML-Markup für dessen Einbindung. Im HTML steht eine Favicon-Verknüpfung mit einer SVG-Daten-URI. Wenn Sie eine nicht leere Icon-URL angegeben haben, kommen zwei weitere Icon-Verknüpfungen hinzu. Bei einem leeren URL-Feld fehlt dieser zusätzliche URL-Anteil, während die SVG-Verknüpfung weiterhin zum Ergebnis gehört.

Prüfen Sie die Ausgabe deshalb nach ihrer Funktion im Markup, nicht anhand des Seitentitels. Eine Änderung dieses Titels verändert weder das Emoji noch die Farben oder den erzeugten Inhalt. Die Icon-URL wird in Verknüpfungen eingesetzt; aus dem Ergebnis lässt sich nicht ableiten, ob die angegebene Adresse erreichbar ist. Ebenso sollten Sie selbst beurteilen, ob Emoji und Farbangaben für Ihre Website geeignet sind, weil dafür keine Prüfung zugesichert ist.

Praktisches Beispiel

Sie bereiten für eine Projektseite ein farblich abgestimmtes Favicon mit einem Bau-Emoji und einer bereits vorhandenen Icon-URL vor.

Für eine Projektseite tragen Sie ein Bau-Emoji sowie eine eigene Hintergrund- und Textfarbe ein, ergänzen eine nicht leere Icon-URL und starten anschließend die Erzeugung.

Die erfolgreiche Ausgabe enthält SVG-Markup mit dem gewählten Emoji und den gesetzten Farben. Zusätzlich erscheint HTML-Markup mit einer SVG-Daten-URI-Verknüpfung; bei gesetzter Icon-URL kommen zwei Icon-Verknüpfungen hinzu.

Einschränkungen

Der Seitentitel wird nicht verwendet; die Icon-URL wird in Markup eingesetzt, ohne dass daraus eine Prüfung ihrer Erreichbarkeit oder der Eignung von Emoji und Farben hervorgeht.

Häufige Fehler

Wenn eine Änderung am Seitentitel keine sichtbare Wirkung hat, liegt das an seiner fehlenden Verwendung im Markup. Legen Sie stattdessen das gewünschte Emoji sowie Hintergrund- und Textfarbe fest.

Häufige Fragen

Erzeugt der Generator SVG- und HTML-Markup?

Ja. Eine erfolgreiche Ausgabe enthält SVG-Markup für das Favicon sowie HTML-Markup mit einer SVG-Daten-URI als Favicon-Verknüpfung. Damit stehen beide Darstellungsbestandteile für die weitere Einbindung bereit.

Wie wird eine Icon-URL verwendet?

Wenn das URL-Feld nicht leer ist, wird die eingegebene Adresse in zwei HTML-Verknüpfungen für Icons übernommen. Sie ist damit Bestandteil des ausgegebenen Markups und nicht automatisch eine bearbeitete Bilddatei.

Verändert der Seitentitel das Favicon?

Der Seitentitel wird zwar als Eingabe angenommen, erscheint aber nicht im erzeugten Markup. Für die Favicon-Darstellung sind stattdessen das Emoji und die gewählten Farben maßgeblich.