Aus einem Logo, ein paar Buchstaben oder einem Emoji ein komplettes Favicon-Set machen – favicon.ico, PNG-Größen, ein Apple Touch Icon, Android-Icons und die HTML-Tags – erstellt in Ihrem Browser.
Favicon-Generator
Aus einem Logo, ein paar Buchstaben oder einem Emoji ein komplettes Favicon-Set machen – favicon.ico, PNG-Größen, ein Apple Touch Icon, Android-Icons und die HTML-Tags – erstellt in Ihrem Browser.
Ihr Logo oder Text wird in diesem Tab auf einem Canvas gezeichnet und auf Ihrem Gerät in das ZIP gepackt. Es wird nichts hochgeladen, daher bleibt noch unveröffentlichtes Branding privat.
Der Favicon-Generator baut aus einer einzigen Quelle den kompletten Satz an Website-Icons. Sie beginnen mit einem Bild wie einem Logo, tippen ein bis drei Zeichen ein oder wählen ein Emoji. Jedes Icon wird in seiner eigenen Pixelgröße gezeichnet, statt aus einer einzigen großen Datei verkleinert zu werden: 16, 32 und 48 px landen als PNG-Bilder in einer einzigen favicon.ico, daneben stehen einzelne PNGs mit 16 und 32 px, ein Apple Touch Icon mit 180 px und die Icons mit 192 und 512 px, die Android verwendet. Ein Web-Manifest und ein Block mit Link-Tags kommen dazu, und aus Text- oder Emoji-Quellen entsteht außerdem ein echtes SVG-Favicon. Vorschauen zeigen jede Größe Pixel für Pixel sowie in hellen und dunklen Browser-Tabs, bevor etwas heruntergeladen wird. Alles wird auf Ihrem Gerät gerendert, und Ihr Bild wird nie hochgeladen.
Funktionen
Bild, Text oder Emoji als Quelle, mit Live-Vorschau vor dem Download
favicon.ico mit Bildern in 16, 32 und 48 px sowie einzelne PNGs mit 16 und 32 px
Ein Apple Touch Icon mit 180 px, vollflächig gefüllt und quadratisch, damit iOS es selbst abrunden kann
Android-Icons mit 192 und 512 px samt passender site.webmanifest
Ein echtes favicon.svg für Text- und Emoji-Quellen, in jeder Größe scharf
Einstellungen für Einpassung, Innenabstand, Eckenradius und Hintergrund bei Bildquellen
Pixelgenaue Vorschauen von 16 bis 180 px und nachgebildete Browser-Tabs in Hell und Dunkel
Ein ZIP mit allen Dateien, dazu die Link-Tags zum Einfügen in den head-Bereich
So verwendest du Favicon-Generator
Image, Text oder Emoji wählen, dann ein Logo ablegen, bis zu drei Zeichen eintippen oder ein Emoji auswählen
Einpassung, Innenabstand, Farben und Eckenform anpassen, während sich die Vorschauen und die Browser-Tabs aktualisieren
App-Namen und Theme-Farbe sowie den Ordner eingeben, aus dem die Icons ausgeliefert werden
Das ZIP herunterladen, die Dateien auf die eigene Website hochladen und die Link-Tags in den head-Bereich einfügen
Beispiel
Eingabe
Source: emoji 🚀 on a rounded tile · theme colour #4f46e5 · icons in the site root
Die Tags für eine Text- oder Emoji-Quelle; bei einer Bildquelle entfällt die SVG-Zeile.
Häufige Fehler & Fehlerbehebung
Nach dem Hochladen der neuen Dateien erscheint weiterhin das alte Favicon. — Browser behalten Favicons sehr lange. Öffnen Sie die Adresse des Icons direkt, laden Sie sie mit Strg+Umschalt+R (⌘⇧R auf dem Mac) neu und laden Sie dann die Seite neu. Ein privates Fenster zeigt das aktuelle Icon sofort.
Das Icon wirkt im Browser-Tab unscharf oder matschig. — Gehen Sie von einem quadratischen Bild mit mindestens 512 px aus und halten Sie die Grafik einfach, denn feine Details gehen bei 16 px verloren. Ein breites Logo funktioniert oft besser mit mehr Innenabstand oder der Einpassung Cover.
Das Apple Touch Icon hat schwarze Ecken oder einen schwarzen Hintergrund. — iOS färbt transparente Pixel schwarz. Das Icon mit 180 px wird mit der Hintergrundfarbe Ihres Icons gefüllt – oder mit der Hintergrundfarbe des Manifests, wenn das Icon transparent ist – und seine Ecken bleiben eckig, damit iOS sie abrunden kann.
In der Dateiliste fehlt favicon.svg. — Ein echtes SVG gibt es nur bei den Quellen Text und Emoji, bei denen das Zeichen als echter Text erhalten bleibt. Eine Foto- oder Logodatei wäre in einem SVG nur eine Bitmap in einer Hülle, daher übernehmen die PNG- und ICO-Dateien diese Aufgabe.
Häufig gestellte Fragen
Welche Favicon-Größen brauche ich 2026?
Eine favicon.ico-Datei mit Bildern in 16, 32 und 48 px, ein apple-touch-icon mit 180 px und Icons mit 192 und 512 px für das Manifest decken fast jeden Browser und jedes Handy ab. Einzelne PNGs mit 16 und 32 px und ein SVG sind lohnende Extras, und der Favicon-Generator erstellt alle zusammen.
Was ist der Unterschied zwischen ICO-, PNG- und SVG-Favicons?
ICO ist das ursprüngliche Containerformat und wird weiterhin automatisch aus dem Stammverzeichnis einer Website angefordert, deshalb deckt es alte Browser und Lesezeichen ab. PNG ist die sichere Wahl für Tabs und Handy-Icons. SVG ist eine einzelne Vektordatei, die in jeder Größe scharf bleibt, wird aber nicht von jedem Browser unterstützt – deshalb enthält das Set alle drei.
Wohin gehören die Favicon-Dateien und die Link-Tags?
Laden Sie die Dateien in den Ordner hoch, aus dem Ihre Website ausgeliefert wird, normalerweise das Stammverzeichnis neben der Startseite. Fügen Sie dann die erzeugten Tags im head-Element jeder Seite ein. Liegen die Icons in einem Unterordner, geben Sie diesen Ordner zuerst im Werkzeug ein, damit die Pfade in den Tags und im Manifest stimmen.
Warum ändert sich mein Favicon nicht, nachdem ich die Dateien ersetzt habe?
Browser speichern Favicons getrennt von der Seite im Cache und behalten ein altes unter Umständen tagelang. Laden Sie die Adresse des Icons selbst mit Strg+Umschalt+R neu, leeren Sie die zwischengespeicherten Bilder der Website oder testen Sie in einem privaten Fenster. Auch das Umbenennen der Dateien und das Anpassen der Tags erzwingt einen frischen Download.
Kann ich ein Emoji als Favicon verwenden?
Ja. Wählen Sie den Tab Emoji, tippen oder fügen Sie ein Emoji ein und wählen Sie eine Größe sowie auf Wunsch einen Hintergrund. Die PNG- und ICO-Dateien werden mit der Emoji-Schrift dieses Geräts gezeichnet und sehen deshalb überall gleich aus. Das SVG verwendet echten Text, daher zeichnet das System jedes Besuchers seine eigene Version des Emojis.
Wozu dienen die Android- und Manifest-Icons?
Die PNGs mit 192 und 512 px sind in site.webmanifest aufgeführt. Android nutzt sie für die Verknüpfung auf dem Startbildschirm und für den Splash-Screen, und installierbare Web-Apps brauchen sie. Das Manifest enthält außerdem Ihren App-Namen, den Kurznamen und die Farben, die Sie im Werkzeug festlegen können.
Verwandte Tools
App-Icon-Generator — Verwandle ein Bild in jede iOS-, macOS- und Android-App-Icon-Größe — als ZIP, in deinem Browser.
SVG zu PNG — SVG-Markup oder eine .svg-Datei in jeder Skalierung zu PNG oder JPG rastern.
Bildformat-Konverter — Konvertiere Bilder zwischen PNG, JPEG und WebP – vollständig in deinem Browser.
Open-Graph-Generator — Erzeuge Open-Graph- und Twitter-Meta-Tags mit Vorschau der Social-Card.
Meta-Tag-Generator — SEO-, Open Graph- und Twitter Card-Meta-Tags aus einem Formular erzeugen.
Bildgröße ändern — Fotos nach Pixeln, Prozent, Voreinstellung oder längster Seite skalieren – im Stapel, mit ZIP-Download.
Base64-Bild-Encoder / -Decoder — Wandle Bilder in Base64-Data-URIs mit HTML- und CSS-Snippets um oder decodiere einen Data URI in ein herunterladbares Bild.
Weitere Bilder-Tools
Bildoptimierer — Bilder neu kodieren und verkleinern (JPEG/WebP/PNG), mit optionaler Größenänderung.
Bildformat-Konverter — Konvertiere Bilder zwischen PNG, JPEG und WebP – vollständig in deinem Browser.
EXIF-Viewer & -Entferner — Zeige EXIF-Metadaten (inkl. GPS) von Fotos an und entferne sie; nichts wird hochgeladen.
Base64-Bild-Encoder / -Decoder — Wandle Bilder in Base64-Data-URIs mit HTML- und CSS-Snippets um oder decodiere einen Data URI in ein herunterladbares Bild.
App-Icon-Generator — Verwandle ein Bild in jede iOS-, macOS- und Android-App-Icon-Größe — als ZIP, in deinem Browser.
Sprite-Sheet-CSS-Animation — Ein sprite sheet in eine kopierfertige CSS-steps()-Animation mit Live-Vorschau verwandeln.
SVG zu PNG — SVG-Markup oder eine .svg-Datei in jeder Skalierung zu PNG oder JPG rastern.
Bild-Farbwähler — Über ein Bild fahren und einen Pixel als HEX, RGB und HSL greifen.
Color Format Converter — Jede CSS-Farbe zugleich zu HEX, RGB, HSL, OKLCH und mehr konvertieren.
Barcode Generator — EAN-, UPC-, Code 128- und ITF-14-Barcodes erzeugen und als SVG oder PNG laden.
Bild-Farbpaletten-Extractor — Extrahiere die dominante Farbe und eine Palette als HEX, RGB, HSL, CSS und Tailwind.