Favicon-Generator
Erstellt aus Text, Emojis oder deinem Logo favicon.ico, PNGs in allen Größen und Icons für iPhone und Android – alles auf einmal.
1. Text eingeben oder Bild wählen
Gib die Zeichen (auch Emojis) für dein Icon ein oder wähle ein Bild, etwa dein Logo.
Erstellen aus
Bis zu 3 Zeichen. Das Icon wird sehr klein angezeigt, 1–2 Zeichen sind am besten.
Schrift
2. Form und Farbe wählen
Wähle Form und Farbe des Hintergrunds und die Größe des Inhalts. Die Vorschau zeigt es sofort.
Form
Hintergrundfarbe
Nur das Icon für den iPhone-Startbildschirm (apple-touch-icon) wird mit der oben gewählten Hintergrundfarbe gefüllt, da transparente Flächen dort schwarz werden.
Textfarbe
Farben im Dunkelmodus
Nur favicon.svg ändert sich. Automatisch wird die Helligkeit nur umgekehrt, wenn eine Farbe auf dunklem Hintergrund schlecht zu sehen wäre.
3. Prüfen und speichern
Prüfe, wie es im Browser-Tab und auf dem Startbildschirm aussieht, und speichere alles als eine ZIP-Datei.
Gib Text ein, dann erscheint hier die Vorschau
Im Browser-Tab (hell und dunkel)
Wird in site.webmanifest als Name eingetragen, der beim Hinzufügen zum Startbildschirm erscheint.
Fügt 64, 128 und 256 px hinzu – für große Anzeigen wie Verknüpfungen auf dem Windows-Desktop. Die Datei wird größer.
HTML für deine Website
Lege die Dateien aus der ZIP ins Hauptverzeichnis (/) deiner Website und füge dieses HTML in den <head> ein.
HTML anzeigen
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Dateien in der ZIP
- favicon.ico (16 / 32 / 48)
- favicon.svg
- favicon-16x16.png
- favicon-32x32.png
- apple-touch-icon.png
- android-chrome-192x192.png
- android-chrome-512x512.png
- site.webmanifest
- favicon-html.txt
Alles passiert auf diesem Gerät. Deine Bilder werden nie hochgeladen.
Hilfreich? Wir freuen uns, wenn du es teilst
Funktioniert etwas nicht, oder hast du eine Idee zur Verbesserung?
So funktioniert’s
1. Text eingeben
Wenn „Text“ ausgewählt ist, tippe auf das Feld „Text im Icon“ und gib 1–3 Zeichen ein. Emojis gehen auch. Die Schriftart wählst du darunter unter „Schrift“.
Wenn links „Text“ ausgewählt ist, klicke in das Feld „Text im Icon“ und gib 1–3 Zeichen ein. Emojis gehen auch. Die Vorschau rechts ändert sich sofort. Die Schriftart wählst du darunter unter „Schrift“.
2. Form und Farbe wählen
Tippe auf „Form und Farbe im Vollbild wählen“, um den Vollbild-Editor zu öffnen. Tippe in der Leiste unten im Tab „Form“ auf „Kreis“ und im Tab „Farbe“ auf einen Farbkreis für den Hintergrund. Die Vorschau in der Mitte zeigt sofort, wie es hell und dunkel aussieht.
Klicke im Bereich „Form und Farbe wählen“ bei „Form“ auf „Kreis“ und bei „Hintergrundfarbe“ auf einen Farbkreis. In der Vorschau rechts siehst du sofort, wie es hell, dunkel und im Browser-Tab aussieht. Mit „Im Vollbild bearbeiten“ über der Vorschau wählst du mit großer Vorschau.
3. Aus einem Bild erstellen
Für ein Bild wie ein Logo tippst du oben auf „Bild“ und wählst es über „Dateien auswählen“. Der Vollbild-Editor öffnet sich, und das ganze Bild passt ins Icon. Soll es bis zum Rand reichen, tippe in der Leiste unten bei „Einpassen“ auf „Ausfüllen“.
Für ein Bild wie ein Logo klickst du links oben auf „Bild“ und ziehst das Bild hinein (oder nutzt „Dateien auswählen“). Das ganze Bild passt ins Icon. Soll es bis zum Rand reichen, klicke im Bereich „Form und Farbe wählen“ bei „Einpassen“ auf „Ausfüllen“.
4. Alles auf einmal speichern
Tippe im Bereich „Prüfen und speichern“ auf „Alle als ZIP herunterladen“, um alle Dateien in einer ZIP-Datei zu speichern. Das HTML für deine Website kopierst du darunter mit „HTML kopieren“.
Mit „Alle als ZIP herunterladen“ rechts speicherst du favicon.ico, favicon.svg, PNGs in allen Größen und site.webmanifest in einer ZIP-Datei. Das HTML für deine Website kopierst du darunter mit „HTML kopieren“.
Praktisch für
Schnell ein Icon für die eigene Website
Das Icon im Tab deines Blogs, deiner Website oder Web-App entsteht in Sekunden aus einem Buchstaben oder Emoji. Ganz ohne Grafikprogramm.
Alle, die eigene Websites bauen
Alle nötigen Größen auf einmal
favicon.ico, PNGs in 16/32 px und Icons für iPhone und Android entstehen in einem Rutsch und landen gesammelt in einer ZIP. Kein Exportieren jeder Größe einzeln.
Webdesign und Entwicklung
Aus dem Logo von Laden oder Firma
Logo wählen – fertig: Es wird passend für Tabs und Startbildschirm skaliert. Transparente Hintergründe bleiben erhalten.
Läden und kleine Firmen
Für HTML-Übungsseiten
Das fertige HTML zeigt, welche Datei wohin gehört. Ideal für Seiten im Unterricht oder zum Üben.
Programmier-Lernende und Lehrkräfte
Gut zu wissen
- Feine Schrift oder Fotos werden bei 16 px zu Matsch. Ein klares Zeichen oder 1–2 Buchstaben funktionieren am besten.
- Kachelbilder für Windows werden nicht erstellt. Aktuelle Browser und Smartphones zeigen die Dateien dieses Tools problemlos an.
- Um den Rand um ein Logo vorher wegzuschneiden, hilft „Bilder zuschneiden“.
Welche Favicon-Dateien und Größen nötig sind
Ein Favicon ist das Icon einer Website, das in Browser-Tabs, Lesezeichen, Suchergebnissen und auf dem Startbildschirm von Smartphones erscheint. Jeder Ort nutzt eine andere Größe, deshalb erstellt man meist aus einem Motiv mehrere Dateien. Dieses Tool erzeugt alles, was aktuelle Browser und Smartphones brauchen, samt dem HTML für deine Website.
favicon.ico ist ein Format, das drei Größen (16, 32 und 48 px) in einer Datei enthält und auch in älteren Browsern und Windows-Verknüpfungen angezeigt wird. Das Icon für den iPhone-Startbildschirm (apple-touch-icon) kann nicht transparent sein, und die Ecken rundet das iPhone selbst ab. Deshalb erstellt dieses Tool es quadratisch mit gefülltem Hintergrund. favicon.svg kann seine Farben an den Dunkelmodus anpassen und wird von Chrome, Firefox und Edge in Tabs verwendet.
Häufige Fragen
Das Wichtigste rund ums Erstellen und Einbinden von Favicons.
Werden meine Bilder irgendwohin hochgeladen?
Nein. Vom Laden des Bildes über das Zeichnen der Icons bis zum Packen der ZIP passiert alles im Browser auf diesem Gerät. Die gewählten Bilder und der eingegebene Text werden nirgendwohin gesendet.
Welche Bilder eignen sich?
Quadratische Bilder mit klaren Formen. Bei 16 px ist ein Icon winzig, feine Schrift und Fotos werden unleserlich. Nimm nur das Zeichen aus deinem Logo oder erstelle mit „Text“ ein Icon aus 1–2 Zeichen. Bei breiten Bildern wählst du unter „Einpassen“ entweder „Ganzes Bild“ oder „Ausfüllen“.
Kann ich ein Favicon aus einem Emoji erstellen?
Ja. Gib ein Emoji in „Text im Icon“ ein, dann wird daraus ein Emoji-Icon. Wie das Emoji aussieht, hängt vom Gerät ab (iPhone, Android, Windows usw.).
Wohin kommen die Dateien?
Entpacke die ZIP und lege alle Dateien ins Hauptverzeichnis deiner Website (dort, wo https://example.com/favicon.ico aufrufbar wäre). Kopiere dann das „HTML für deine Website“ und füge es in den <head> jeder Seite ein.
Reicht favicon.ico allein?
Für Browser-Tabs reicht favicon.ico allein. Soll auch das Icon auf dem Startbildschirm von Smartphones scharf aussehen, lade alle Dateien aus der ZIP hoch und füge das HTML ein.
Kann der Hintergrund transparent sein?
Ja. Schalte „Transparenter Hintergrund“ ein, dann werden der Hintergrund und alles außerhalb der Form transparent. Nur das Icon für den iPhone-Startbildschirm (apple-touch-icon.png) wird mit der unter „Hintergrundfarbe“ gewählten Farbe gefüllt, da transparente Flächen dort schwarz erscheinen.
Funktioniert das mit WordPress?
Ja. Wähle in WordPress unter „Design“ → „Customizer“ → „Website-Informationen“ beim „Website-Icon“ die Datei android-chrome-512x512.png aus der ZIP (WordPress braucht ein Bild mit mindestens 512 px).
Ich habe das Favicon geändert, aber es wird noch das alte angezeigt
Browser speichern Favicons oft lange zwischen. Wenn Neuladen nicht hilft, leere den Browser-Cache oder schau nach einer Weile noch einmal nach.
Kann ich SVG-Favicons erstellen?
Ja. Die ZIP enthält favicon.svg. Im Dunkelmodus wechselt es zu den Farben aus „Farben im Dunkelmodus“ (automatisch wird die Helligkeit nur bei schlecht sichtbaren Farben umgekehrt). Text wird als Bild in der gewählten Schrift eingebettet, das SVG malt nur seine Farbe.
Ist das kostenlos?
Ja, kostenlos. Ohne Anmeldung und ohne Werbung. Du kannst beliebig viele Icons erstellen.
Weitere Tools
- QR-Code-Generator
Erstelle QR-Codes aus Links, Text oder WLAN-Daten – mit eigenen Formen, Farben, einem Symbol in der Mitte oder einem Foto.
- Bilder in WebP umwandeln
Wandle PNG oder JPEG in WebP um, ein leichteres Format mit guter Qualität.
- Bilder in PNG umwandeln
Wandle JPEG oder WebP in PNG um, ein Format ohne Qualitätsverlust.
- Bilder in JPG umwandeln
Wandle PNG oder WebP in JPG (JPEG) um, ein Format, das sich überall öffnen lässt.
- HEIC in WebP umwandeln
Wandle HEIC-Fotos vom iPhone in WebP um, ein leichteres und praktisches Format.
- HEIC in PNG umwandeln
Wandle HEIC-Fotos vom iPhone ohne Qualitätsverlust in PNG um, das sich überall öffnen lässt.