Favicon Generator
Erstellen Sie moderne SVG-Favicons und passenden HTML-Code mit individuellen Emojis, Hintergrund- und Textfarben.
Tool ausführen
Mit diesem Favicon-Generator erstellen Sie passenden HTML-Code sowie eine eigenständige SVG-Grafik für das Browser-Icon Ihrer Website. Sie können ein beliebiges Emoji als grafisches Symbol wählen und die Hintergrundfarbe sowie die Textfarbe über Farbcodes wie Hexadezimalwerte flexibel anpassen. Standardmäßig nutzt das Tool einen Schraubenschlüssel als Symbol auf blauem Hintergrund mit weißem Text. Wenn Sie bereits eine externe Bilddatei für Ihr Icon besitzen, tragen Sie optional die entsprechende Webadresse ein. Das Werkzeug fügt diese Adresse direkt in die erzeugten HTML-Verlinkungen ein und maskiert Sonderzeichen ordnungsgemäß. Das Ausgabefeld liefert Ihnen sowohl den fertigen HTML-Codeblock für den Kopfbereich Ihrer Internetseite als auch den reinen SVG-Quelltext. Der HTML-Code enthält eine direkte Daten-URL mit dem eingebetteten Vektor-Icon sowie Verweise auf zusätzliche Icon-Formate, wenn Sie eine Bildadresse angeben. So binden Sie moderne Vektor-Icons ohne komplizierte Grafikprogramme direkt in Ihr Projekt ein.
Anleitung
- Wählen Sie ein Emoji aus, das als Symbol in Ihrem Favicon angezeigt werden soll.
- Legen Sie bei Bedarf eine Hintergrundfarbe und eine Textfarbe im Hexadezimalformat fest.
- Geben Sie optional eine Webadresse zu einer vorhandenen Icon-Grafik ein, falls Sie zusätzliche HTML-Links benötigen.
- Starten Sie die Generierung, um den SVG-Code und die passenden HTML-Tags zu erzeugen.
- Kopieren Sie den ausgegebenen HTML-Code in den Kopfbereich Ihres Webprojekts oder nutzen Sie den SVG-Code direkt.
Beispiele
- Dunkles Vektor-Icon: Tragen Sie ein Raketen-Symbol, die Hintergrundfarbe '#0f172a' und die Textfarbe '#ffffff' ein, um ein kontrastreiches Favicon zu erstellen.
- Kombination mit externer Grafik: Geben Sie ein Blitz-Symbol, die Hintergrundfarbe '#fbbf24', die Textfarbe '#000000' und die Icon-URL 'https://example.com/favicon.png' an, um HTML-Tags für Vektor- und Bild-Icons zu erhalten.
FAQ
Wozu dient das Eingabefeld für den Seitentitel?
Das Feld steht als Eingabeoption bereit, wird im erzeugten HTML- und SVG-Code aktuell jedoch nicht verwendet und verändert das Resultat nicht.
Welche Dateiformate werden generiert?
Das Werkzeug erzeugt den Quellcode für ein Vektor-Favicon im SVG-Format sowie HTML-Tags mit einer eingebetteten Daten-URL. Reine Rasterformate wie PNG oder ICO werden nicht als Datei generiert.
Wie binde ich den erzeugten Code in meine Website ein?
Kopieren Sie den ausgegebenen HTML-Codeblock in das head-Element Ihrer HTML-Dateien. Die enthaltene SVG-Daten-URL wird von modernen Browsern direkt als Tab-Icon dargestellt.