Favicon erstellen – ICO, PNG und Manifest

Wähle dein Logo; alle Icons für Browser-Tab, Startbildschirm und Android sowie site.webmanifest werden in einer ZIP vorbereitet. Dein Bild verlässt dein Gerät nicht.

PNG wird zu ICO
Bis ⁦10 MB⁩
Ohne Anmeldung
Läuft auf deinem Gerät

36 Favicon erstellen

01 Wählen
02 Verarbeiten
03 Download

Auf deinem Gerät verarbeitet · kein Upload

PNG

Ausgewählte Datei

Größe: Bereit

Live-Status

Datei wird gelesen

Ergebnis

Fertig.

0Dateien in der ZIP

0 BDeine Daten an unseren Server: 0 Byte · auf deinem Gerät verarbeitetWarum 0: Die Sicherheitsregel dieser Seite blockiert das Senden von Daten schon im Browser; alles passiert in diesem Tab. CSP · connect-src 'none' · form-action 'none'

Umwandlung fehlgeschlagen.

Hintergrund

Transparent Farbe

Form

Quadrat Abgerundet Kreis

Innenabstand App-Name (Manifest)

Sehr feine Details können bei 16 Pixeln verschwinden; ein schlichtes Zeichen liest sich klein besser.

Die Verarbeitung läuft in diesem Tab, auf deinem Gerät.
ICO, PNGs, Manifest und HTML-Zeilen kommen in einer ZIP.
Keine Datei wird an unseren Server gesendet; beim Schließen des Tabs ist alles weg.

Wähle zuerst ein Logo

Schritte

Datei wird gelesen
Icons werden gezeichnet
Datei wird vorbereitet

Wie geht's weiter?

Bild verkleinernJPGKB

Deine Datei bleibt auf deinem Gerät
Kein Upload auf unseren Server
Kostenlos, ohne Anmeldung

Welche Favicon-Dateien braucht eine Website?

Ein Favicon ist das kleine Symbol neben dem Namen einer Website im Browser-Tab, in Lesezeichen und in Suchergebnissen. Eine Datei reicht nicht: Ältere und neue Browser suchen favicon.ico, iPhone und iPad ein 180 Pixel großes apple-touch-icon für den Startbildschirm, Android und installierbare Web-Apps Icons in 192 und 512 Pixeln sowie eine site.webmanifest-Datei.

Am schwierigsten sind kleine Größen: Ein auf 16 Pixel verkleinertes Logo kann verschwimmen oder feine Details verlieren. Auf dem iPhone-Startbildschirm erscheinen transparente Bereiche schwarz, deshalb braucht das apple-touch-icon einen festen Hintergrund.

Dieses Tool zeichnet dein Logo (PNG, SVG, JPG oder WEBP) einmal in 1024 Pixeln und verkleinert es schrittweise um die Hälfte auf jede Größe, damit kleine Icons scharf bleiben. Du wählst Hintergrundfarbe, Innenabstand und die Form Quadrat, abgerundet oder Kreis und siehst das Ergebnis in einer Vorschau von Browser-Tab und Startbildschirm. favicon.ico, die PNGs, site.webmanifest und die HTML-Zeilen für deine Seite kommen in einer ZIP. Das Bild wird in deinem Browser verarbeitet.

Ein Favicon-Set in 3 Schritten

Logo wählen: Wähle eine quadratische oder fast quadratische PNG-, SVG-, JPG- oder WEBP-Datei (bis 10 MB). Am besten eignen sich SVG oder ein PNG mit mindestens 512 Pixeln.
Aussehen einstellen: Lass den Hintergrund transparent oder wähle eine Farbe; lege Innenabstand und Form (Quadrat, abgerundet, Kreis) fest. Die Vorschauen aktualisieren sich sofort.
ZIP herunterladen: „Favicon-Set erstellen“ liefert alle Dateien in einer ZIP. Lege sie in das Stammverzeichnis deiner Website und füge die HTML-Zeilen in den <head> deiner Seite ein.

Wem es hilft

Websites und Blogs: Das Symbol für Tabs und Lesezeichen einer neuen Website vorbereiten.
Onlineshops: Das Shop-Logo in die passenden Größen für Browser-Tab, Suchergebnis und Startbildschirm bringen.
Web-Apps: Die Icons in 192 und 512 Pixeln und das Manifest für eine installierbare Web-App (PWA) erzeugen.
Agenturen und Design: Aus dem Kundenlogo in Minuten ein vollständiges Favicon-Set liefern.
Entwicklung: Die Dateien und die <head>-Zeilen fertig für ein Projekt bekommen.
Persönliche Seiten: Einer Portfolio- oder Lebenslauf-Seite ein Icon aus den eigenen Initialen geben.

Größen, Qualität und Grenzen

Erzeugte Dateien: favicon.ico (16, 32 und 48 Pixel), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 Pixel), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest und die HTML-Zeilen. Bei einem SVG kommt favicon.svg dazu.
Schärfe: Das Bild wird zuerst in 1024 Pixeln gezeichnet und dann Schritt für Schritt halbiert; das ergibt schärfere kleine Icons als ein großer Sprung. Sehr dünne Linien können bei 16 Pixeln trotzdem verschwinden; ein schlichtes Zeichen liest sich dort besser.
Transparenz: PNG und ICO behalten die Transparenz. Das apple-touch-icon ist immer deckend, damit es auf dem iPhone nicht schwarz wirkt: Ohne Hintergrundfarbe wird Weiß verwendet.
Ausgangsbild: Nicht quadratische Bilder werden ohne Beschnitt zentriert. Bei Bildern unter 256 Pixeln können große Icons unscharf wirken; das Tool sagt es dir.
ICO-Format: Die Bilder in der ICO-Datei sind als PNG gespeichert; alle aktuellen Browser und Windows seit Vista lesen dieses Format.
Datenschutz und Grenzen: Das Bild darf bis zu 10 MB groß sein. Dein Logo wird weder hochgeladen noch gespeichert; alle Dateien entstehen in deinem Browser.

Datenschutz und automatische Löschung

Dieses Tool sendet Ihre Datei nicht an unseren Server: Die gesamte Verarbeitung findet in Ihrem Browser, auf Ihrem Gerät statt. Die Seite wird mit einer Sicherheitsrichtlinie (Content-Security-Policy) ausgeliefert, die das Versenden des Dateiinhalts technisch verhindert; auf dieser Seite laufen keine Analyse- oder Werbeskripte.

Auch die Ergebnisdatei entsteht auf Ihrem Gerät, und nur Sie laden sie herunter. Wenn Sie den Tab schließen oder „Neue Datei“ wählen, wird sie aus dem Speicher des Browsers gelöscht. Unser Server speichert zu diesem Vorgang weder Dateinamen noch Inhalte.

Details finden Sie in unserer Datenschutzerklärung

Häufig gestellte Fragen

Welche Größen braucht ein Favicon?

16 und 32 Pixel für Tabs und Lesezeichen (dazu 48 in der favicon.ico), ein apple-touch-icon in 180 Pixeln für den iPhone-Startbildschirm sowie 192 und 512 Pixel für Android und installierbare Web-Apps. Das Tool erstellt alle auf einmal.

Wie binde ich das Favicon in meine Website ein?

Lade die Dateien aus der ZIP ins Stammverzeichnis deiner Website (direkt unter die Domain) und füge die HTML-Zeilen aus dem Tool in den <head> deiner Seite ein. In Systemen wie WordPress reicht es, das 512-Pixel-PNG als „Website-Icon“ hochzuladen.

Geht ein Favicon aus einem SVG-Logo?

Ja, und SVG liefert das beste Ergebnis: Jede Größe wird aus dem Vektor gezeichnet. Das Tool legt außerdem favicon.svg bei, das unterstützende Browser auf jedem Bildschirm scharf anzeigen.

Warum hat mein Icon auf dem iPhone einen schwarzen Hintergrund?

iOS unterstützt bei Startbildschirm-Icons keine Transparenz und zeigt transparente Bereiche schwarz. Deshalb erzeugt das Tool das apple-touch-icon immer deckend und nimmt ohne gewählten Hintergrund Weiß. Wähle gern eine Farbe, die zu deiner Marke passt.

Ich habe es geändert, aber der Browser zeigt das alte Icon. Warum?

Browser speichern Favicons lange im Cache. Lade die Seite erzwungen neu (Strg+F5, am Mac Cmd+Shift+R), öffne sie in einem privaten Fenster oder hänge an den Dateinamen in der HTML-Zeile etwa ?v=2 an.

Wird mein Logo auf einen Server hochgeladen?

Nein. Das Bild wird in deinem Browser gezeichnet und alle Dateien entstehen dort; die Seite kommt mit einer Sicherheitsrichtlinie, die Verbindungen nach außen technisch sperrt. Du kannst sie also auch für eine noch nicht veröffentlichte Marke nutzen.