Favicon-Generator — aus einem Bild ein komplettes Favicon-Paket
Mach aus jedem Logo mit einem Klick ein komplettes Favicon-Paket – favicon.ico, alle PNG-Größen, Apple Touch Icon und Webmanifest.
Logo hierher ziehen oder klicken zum Auswählen
PNG, JPG oder WebP – quadratisch, 512×512 oder größer funktioniert am besten. Alles wird in deinem Browser erzeugt; dein Logo verlässt dein Gerät nie.
Ein Problem gefunden oder etwas, das besser sein könnte? Wir lesen jede Nachricht und beheben Fehler schnell.
Lade dein Logo einmal hoch und lade ein komplettes Favicon-Paket mit 27 Dateien als eine einzige ZIP-Datei herunter: eine echte favicon.ico (mit 16/32/48 eingebettet), Favicon-PNGs, alle neun Größen des Apple Touch Icons (57–180px), sechs Android-Icons (36–192px) mit manifest.json, Microsoft-Kachel-Icons (70–310px) mit browserconfig.xml – dazu die exakten HTML-Tags zum Einfügen in den Head deiner Website.
Wie bei jedem Tool auf dieser Website läuft der gesamte Vorgang in deinem Browser: Dein Logo wird lokal skaliert, ins ICO-Format gepackt und gezippt. Nichts wird hochgeladen – also keine Warteschlange, kein Wasserzeichen und keine Datenschutzfrage.
So funktioniert’s
- Zieh dein Logo hinein – ein quadratisches PNG mit 512×512 oder mehr liefert die schärfsten Ergebnisse (nicht quadratische Bilder werden mittig zugeschnitten).
- Prüfe die Pixelvorschau: Genau so sieht dein Icon in einem Browser-Tab bei 16 und 32px aus. Wirkt es matschig, vereinfache das Logo und versuch es erneut.
- Lade das komplette Paket als ZIP herunter oder nimm dir einzelne Dateien.
- Entpacke es in den Stammordner deiner Website und füge die bereitgestellten HTML-Tags in deinen <head> ein.
Häufige Fragen
Welche Favicon-Größen braucht eine Website 2026?
Das absolute Minimum ist favicon.ico plus PNGs mit 16/32px und ein Apple Touch Icon mit 180×180. Für volle Kompatibilität mit jedem Browser, jeder iOS-Generation, jedem Android-Launcher und jeder Windows-Kachel umfasst der klassische Komplettsatz 16px bis 310px in 27 Dateien – genau das packt dieser Generator zusammen, samt manifest.json und browserconfig.xml, die darauf verweisen.
Ist die favicon.ico eine echte ICO-Datei?
Ja – es ist ein echter ICO-Container mit drei PNG-kodierten Einträgen (16, 32 und 48 Pixel), dem Format, das jeder moderne Browser und jede Windows-Version unterstützt. Es ist kein umbenanntes PNG.
Wird mein Logo auf einen Server hochgeladen?
Nein. Skalieren, ICO-Packen und ZIP-Erstellung passieren alle in deinem Browser über die Canvas-API. Dein Logo verlässt nie dein Gerät – wichtig, wenn es sich um eine unveröffentlichte Marke oder ein Kundenprojekt handelt.
Warum sieht mein Favicon bei 16px unscharf aus?
Sechzehn Pixel sind winzig – detailreiche Logos werden in dieser Größe zu Matsch. Wirkt die Vorschau matschig, verwende ein vereinfachtes Zeichen: nur dein Bildzeichen, einen einzelnen Buchstaben oder eine kräftige Form. Große Marken liefern genau aus diesem Grund vereinfachte Favicon-Versionen ihrer Logos aus.
Wohin kommen die Favicon-Dateien auf meiner Website?
Leg sie in das Stammverzeichnis deiner Website (damit sie unter /favicon.ico, /apple-touch-icon.png usw. erreichbar sind) und füge dann die bereitgestellten link-Tags in deinen <head> ein. Auf den meisten Plattformen ist das der public- oder static-Ordner; bei WordPress nutzt du Design → Customizer → Website-Informationen oder legst die Dateien über dein Theme ab.
Was im Paket steckt
• favicon.ico + PNGs favicon-16/32/96 — Browser-Tabs und Lesezeichen; Browser fragen /favicon.ico automatisch ab, auch ohne HTML-Tag.
• apple-icon-57x57 bis 180x180 (9 Größen) — das Homescreen-Icon jeder iPhone- und iPad-Generation, plus apple-icon-precomposed.png für ältere iOS-Versionen.
• android-icon-36x36 bis 192x192 (6 Dichten) — Android-Launcher-Icons, in der manifest.json mit Dichteangaben referenziert.
• ms-icon-70/144/150/310 + browserconfig.xml — Kacheln im Windows-Startmenü und die Konfigurationsdatei, die sie zuordnet.
• manifest.json — teilt Android- und PWA-Installationen den Namen, die Farben und die Icons deiner Website mit. Öffne sie nach dem Download und fülle die Namensfelder aus.
Entpacke alles in das Stammverzeichnis deiner Website, damit die Pfade im HTML-Snippet aufgelöst werden, füge das Snippet in deinen <head> ein, und fertig.
Design-Tipps für ein Favicon, das man wirklich erkennt
Teste bei 16px, bevor du dich festlegst – die Vorschau oben zeigt die Wahrheit. Setze lieber auf eine einzelne kräftige Form oder einen Buchstaben als auf ein komplettes Logo mit Text; Wortmarken werden unter 48px unlesbar. Halte den Kontrast sowohl gegenüber hellen als auch dunklen Browser-Themes hoch (ein dezenter Hintergrundkreis oder ein abgerundetes Quadrat hilft Icons aus dünnen Linien). Und behalte dasselbe Favicon über Jahre – so finden wiederkehrende Besucher deinen Tab unter zwanzig anderen.
Ähnliche kostenlose Tools
- Bildkonverter — Wandle Bilder zwischen AVIF, HEIC, TIFF, PNG, JPG, WebP, GIF, BMP und SVG um. Die meisten Konvertierungen verlassen deinen Browser nie.
- Bild zuschneiden — Schneide Bilder in deinem Browser auf jede Größe und jedes Seitenverhältnis zu – quadratisch, 16:9, 4:3 oder frei.