Favicon-Generator
Ein Bild rein, ein vollständiges Favicon-Set raus – mit einer echten 16px-Vorschau vor der endgültigen Entscheidung
Dein Logo hier hineinziehen
oder klicke, um eine Datei auszuwählen – PNG, JPG oder WebP. Ein quadratisches Bild mit mindestens 512 px funktioniert am besten.
Nichts wird hochgeladen. Jede Datei wird in deinem Browser gezeichnet und kodiert.
Bevor du beginnst mit Favicon-Generator
Erstelle im Browser aus einem Bild ein Favicon-Set mit mehreren Größen, ein Apple-Touch-Symbol, Android-Symbole und kopierfertige HTML-Codeausschnitte.
Am besten für
- Die üblichen Favicon- und mobilen Symboldateien für eine Website erstellen
- Prüfen, wie ein Logo in der tatsächlichen Browsergröße von 16px erkennbar bleibt
- Fertige head- und Manifest-Codeausschnitte in eine Website kopieren
Vor dem Start wissen
- Der Generator geht von einer Rasterquelle aus und gestaltet ein Logo nicht neu
- Sehr detaillierte Zeichen bleiben bei 16px möglicherweise nicht erkennbar
- Ein geändertes Favicon kann nach der Veröffentlichung im Browser-Cache verbleiben
Arbeitsablauf fortsetzen
So verwendest du es
1. Wasserzeichen laden
Ziehe eine PNG-, JPG- oder WebP-Datei hinein. Ein quadratisches Bild mit mindestens 512 px liefert die besten Ergebnisse, weil 512 die größte erzeugte Datei ist und beim Vergrößern keine Details erfunden werden. Ein nicht quadratisches Bild erhält einen quadratischen Zuschneiderahmen, den du entlang der längeren Seite verschieben kannst. Alternativ kannst du auf „Einpassen“ wechseln und Ränder hinzufügen. In beiden Fällen wird es nie gestreckt. Das Bedienfeld zeigt die Abmessungen und vorhandene Transparenz an und warnt bei Quellen unter 512 px, weil die 512-px-Datei dann vergrößert und weich wird. „Einpassen“ ist die ehrliche Option, wenn nichts abgeschnitten werden darf. Beachte aber den Preis: Ein breites Logo wird zu einem kleinen Zeichen mit leeren Streifen darüber und darunter – viel ungenutzter Platz in einem 16-px-Tab.
2. Vorschau in Originalgröße prüfen
Die drei Quadrate werden mit 16, 32 und 180 tatsächlichen Pixeln auf einem hellen und einem dunklen Farbfeld gezeichnet. Der nachgebildete Browser-Tab darunter zeigt die 16-px-Version neben einem Seitentitel, also dort, wo du sie normalerweise siehst. Die meisten Generatoren überspringen diesen Schritt, obwohl er entscheidend ist: Ist das 16-px-Quadrat nur ein Fleck, hilft kein noch so häufiges Exportieren. Du brauchst stattdessen ein einfacheres Zeichen. Die Bildgrößen- und Eckenradiusregler verändern dieselben Vorschauen. Ränder und Rundungen werden dadurch sichtbar, bevor du etwas herunterlädst.
Zwei Details dieses Bereichs solltest du kennen. Die gestrichelte Kontur um jedes Quadrat zeigt die tatsächlichen Symbolgrenzen. Ohne sie wäre ein mit Rändern ergänztes oder per Bildgrößenregler verkleinertes Symbol nicht von einem kleineren Symbol zu unterscheiden, weil der leere Bereich einfach die Farbe des Farbfelds annimmt. Die hellen und dunklen Farbfelder zeigen außerdem jede Transparenz, die nach deiner Hintergrundwahl bestehen bleibt. So wird ein in die Grafik eingebetteter heller Saum auf dem dunklen Feld sichtbar und ein dunkler auf dem hellen. Der nachgebildete Browser-Tab ist eine CSS-Oberfläche um dieselbe 16-px-Arbeitsfläche, kein echter Browser. Er ist nützlich, weil 16 px allein größer wirken als neben einem Seitentitel.
3. Set auswählen und herunterladen
Wähle das minimale Set oder das Legacy-Set, klicke auf „Erstellen“ und lade Dateien einzeln oder als ZIP herunter. Kopiere den head-Codeausschnitt und das Manifest aus dem Bedienfeld darunter. Beide listen genau die erzeugten Dateien auf, nichts zusätzlich. Der Manifestblock ist ein vollständiges JSON-Objekt, das du direkt speichern kannst unter site.webmanifest; es benötigt weiterhin eine theme_color und ein background_color, die du selbst wählen kannst. Trage den App-Namen ein, und er erscheint als apple-mobile-web-app-title im head und als name im Manifest. Lässt du es leer, wird keine der beiden Zeilen ausgegeben. iOS verwendet dann ersatzweise deinen Seitentitel, was meistens richtig ist.
Welche Größen brauchst du tatsächlich?
| Größe | Datei | Verwendet für |
|---|---|---|
| 16 × 16 | favicon.ico | Der Browser-Tab und die Lesezeichenliste auf einem Bildschirm mit Standard-Pixeldichte. |
| 32 × 32 | favicon.ico | Der Tab auf einem Bildschirm mit hoher Pixeldichte sowie die Windows-Taskleiste und Verknüpfungen. 48 ist aus demselben Grund enthalten. |
| 180 × 180 | apple-touch-icon.png | Die iOS-Startbildschirmkachel beim Speichern deiner Website. Muss deckend sein. |
| 192 × 192 | android-chrome-192x192.png | Android-Startbildschirm und das kleine Symbol im Web-App-Manifest. |
| 512 × 512 | android-chrome-512x512.png | Der Startbildschirm der installierten App und das große Manifest-Symbol, das Installationsdialoge benötigen. |
Der .ico Container hält diese Liste kurz: Er enthält mehrere Bilder in einer Datei, sodass 16, 32 und 48 gemeinsam bereitgestellt werden und der Browser das benötigte auswählt. Deshalb genügt eine einzige favicon.ico im Stammverzeichnis deckt alle Tab-Fälle ohne zusätzliche Tags ab. Separate PNGs mit 16 und 32 werden nur für ältere Browser benötigt, die ICO ignorieren. Dafür ist das Set für ältere Systeme gedacht.
Zwei Dateisets, die du vielleicht anderswo gesehen hast, fehlen bewusst. Windows-Metro-Kacheln – browserconfig.xml und der mstile-*.png Bilder – gehören zum Windows-8-Startbildschirm und der damaligen Funktion für angeheftete Websites. Edge liest sie seit Jahren nicht mehr. Das Favicon für die MacBook Touch Bar ist mit der Hardware verschwunden. Beides heute zu erzeugen fügt nur Dateien hinzu, die niemand anfordert, und Tags, die niemand auswertet. Genau diesen Ballast soll das Minimalset vermeiden.
Warum dein Logo bei 16px möglicherweise nicht funktioniert
Ein Symbol mit 16 × 16 Pixeln besteht insgesamt aus 256 Pixeln. Eine Wortmarke, die auf einer Visitenkarte perfekt lesbar ist, hat in diesem Maßstab kaum noch Pixel für ihre Darstellung. Der übliche Impuls – den Text größer machen – hilft nicht, denn die Begrenzung ist nicht die Schriftgröße, sondern die Liniendichte: Wie viele unterschiedliche Striche und Zwischenräume soll die Darstellung in sechzehn Pixeln unterbringen? Jeder Strich benötigt mindestens ein Pixel, und der Zwischenraum daneben ebenfalls. Alles mit mehr als einer Handvoll Details pro Seite wird deshalb zu einem grauen Fleck.
Erhalten bleibt eine einzelne Form mit einer oder zwei Farben und großzügigen inneren Freiräumen: ein Buchstabe statt eines Worts, eine Silhouette statt einer Kontur, eine gefüllte Form statt eines dünnen Strichs. Feine Verläufe verschwinden, Haarlinien verschwinden oder werden durch Abtastfehler zu gepunkteten Linien, und Details am Rand gehen zuerst verloren. Zeichne für die Symbolnutzung eine vereinfachte Variante deines Zeichens und prüfe sie in der Vorschau oben. Der Vergleich des 16-px-Quadrats mit dem 180-px-Quadrat macht die Entscheidung meist offensichtlich. Ist das Zeichen im ersten Quadrat nicht erkennbar, ist es auch im Tab nicht erkennbar. Keine Exporteinstellung kann das retten.
Der Bildgrößenregler gehört zu derselben Abwägung. Ein Rand um ein bis an die Kante reichendes Zeichen wirkt bei 180 px ordentlicher. Bei 16 px geht aber jedes Prozent Rand von den 256 verfügbaren Zeichenpixeln ab. Reduzierst du auf 80%, wird die Grafik nur noch mit ungefähr 164 Pixeln gerendert. Nutze das, wenn das Zeichen tatsächlich mit dem Rahmen kollidiert, und prüfe danach das 16-px-Quadrat, statt der großen Vorschau zu vertrauen.
Fragen
Wird mein Bild auf einen Server hochgeladen?
Nein. Das Bild wird von deinem Browser dekodiert, auf Arbeitsflächen gezeichnet und über die Canvas API als PNG kodiert. Die ICO-Datei wird in JavaScript aus diesen PNGs zusammengesetzt. Dies ist eine statische Website ohne Upload-Endpunkt und ohne Konto. Du kannst die Seite laden und die Netzwerkverbindung trennen. Der Generator funktioniert weiterhin.
Warum ist das apple-touch-icon deckend?
iOS berücksichtigt bei einem Startbildschirmsymbol keine Transparenz. Es legt Alpha auf Schwarz, sodass ein transparentes Logo als dunkle Kachel erscheint. Der Generator füllt die 180 × 180 große Arbeitsfläche vor dem Zeichnen vollständig mit deiner gewählten Farbe, einschließlich der Ecken und auch bei eingestelltem Eckenradius, weil iOS eine eigene Maske anwendet. Die anderen Dateien folgen der Hintergrundeinstellung und behalten ihr Alpha bei Transparent, weil Tabs und Android-Launcher damit umgehen können.
Was macht der Eckenradius mit der Hintergrundfarbe?
Der Radius beschneidet das Quadrat. Die Ecken eines abgerundeten Symbols werden dadurch entfernt und bleiben transparent. Die Hintergrundfarbe füllt die Form innerhalb der Rundung, nicht die Ecken außerhalb. Das ist für einen Tab oder einen Android-Launcher erwünscht, weil diese das Symbol auf ihrer eigenen Fläche darstellen. Das apple-touch-icon ist die einzige Ausnahme: Seine Füllung wird vor dem Beschnitt von Rand zu Rand einschließlich der Ecken gezeichnet. iOS wendet eine eigene abgerundete Maske an, und bei einem bereits abgerundeten Symbol würden an den vier Ecken Lücken entstehen.
Brauche ich favicon-16x16.png noch?
Normalerweise nicht. Jeder aktuelle Browser liest die 16- und 32-px-Bilder aus favicon.ico, daher sind die separaten PNGs Duplikate. Sie sind nur für ältere Browser relevant, die ICO-Dateien ignorieren. Genau dafür ergänzt das Legacy-Set diese Dateien. Wenn du unsicher bist, ist das minimale Set die sicherere Standardwahl: weniger Dateien und ein kurzer Codeausschnitt für den head-Bereich.
Was ist mit SVG-Favicons?
Eine Rastervorlage kann nicht zu einem echten SVG werden. Das Nachzeichnen einer PNG-Datei erzeugt eine Annäherung mit anderen Kanten, nicht deine Originalgrafik. Deshalb behauptet dieses Werkzeug nicht, das anzubieten. Wenn du ein SVG-Favicon möchtest, exportiere es aus der Vektordatei, in der das Logo erstellt wurde, und ergänze es neben der ICO-Datei. Browser mit Unterstützung verwenden das SVG, die übrigen greifen auf die andere Datei zurück. Behalte die ICO-Datei in jedem Fall; SVG wird nicht überall unterstützt.
Verwandt
Ausführliche Hintergründe zu jeder Größe, den head-Tags, dem Manifest und Cache-Fallen, durch die ein geändertes Favicon unverändert aussieht, findest du unter der Leitfaden zu Favicon-Größen – der vollständige Leitfaden zu diesem Werkzeug. Hat deine Quelle das falsche Format oder muss zuerst mit einem Hintergrund zusammengeführt werden, bietet der Bildkonverter erledigt das stapelweise.