Favicon-Generator

Machen Sie aus einem Logo den kompletten Favicon-Satz: alle PNG-Größen, eine ICO-Datei mit mehreren Größen, ein Manifest und die HTML-Tags für den Head-Bereich.

Dateien hier ablegen

.png, .jpg, .jpeg, .webp, .svg · bis 20 MB

Dateien auswählen

So erstellen Sie ein Favicon

1
Logo hinzufügen
PNG, JPG, WebP oder SVG, bis zu 20 MB. Am besten eignet sich eine quadratische Vorlage, aber auch jede andere Form wird verarbeitet.
2
Einpassung ins Quadrat wählen
Schneiden Sie ein Quadrat aus der Mitte zu oder passen Sie das ganze Bild ein und füllen Sie die Seiten mit einer Farbe Ihrer Wahl auf.
3
Icon-Satz als ZIP herunterladen
Acht Dateien, mit dem maskierbaren Android-Icon neun: die ICO-Datei, vier PNG-Größen, das apple-touch-icon, das Manifest und ein fertiges Snippet für den Head-Bereich.

Was im Archiv steckt und wozu jede Datei dient

Die favicon.ico enthält drei Bilder in einem Container, mit 16, 32 und 48 Pixeln, und ist die Datei, nach der Browser im Stammverzeichnis einer Website noch immer fragen. Die Dateien icon-16.png und icon-32.png sind die modernen Entsprechungen. Sie werden ausdrücklich verlinkt, damit Browser, die PNG bevorzugen, die ICO-Datei gar nicht erst öffnen müssen. Die apple-touch-icon.png mit 180 Pixeln verwendet iOS, wenn jemand Ihre Website zum Home-Bildschirm hinzufügt. Die Dateien icon-192.png und icon-512.png decken die beiden Größen ab, die das Manifest einer Progressive Web App aufführen muss. Die manifest.json verbindet diese beiden mit dem Namen Ihrer App und der Designfarbe, und die head-snippet.html enthält genau den Block aus link- und meta-Tags, den Sie in Ihre Seite einfügen – ohne Rätselraten bei Attributnamen oder Dateipfaden.

Warum das apple-touch-icon nie transparent bleibt

iOS legt ein transparentes Icon auf dem Home-Bildschirm nicht über einen sinnvollen Hintergrund, sondern füllt die Lücken mit Schwarz. Aus einem sauberen Logo wird so eine dunkle Kachel. Deshalb wird genau diese eine Datei immer ohne Alphakanal gespeichert: Transparente Bereiche werden mit der gewählten Hintergrundfarbe gefüllt oder mit Weiß, wenn Sie den Hintergrund transparent gelassen haben. Alle anderen Größen bleiben transparent, sofern Ihre Vorlage Transparenz enthält und Sie das so gewählt haben, denn im Browser-Tab oder bei einer Desktop-Verknüpfung ist Transparenz genau das Richtige. Legen Sie stattdessen eine Hintergrundfarbe fest, gilt sie gleichermaßen für alle Größen, damit der Satz einheitlich bleibt.

Vektor als Vorlage, scharf in jeder Größe

Ist die Vorlage eine SVG-Datei, wird jede Größe direkt aus dem Vektor gerendert, statt aus einer großen Bitmap herunterskaliert zu werden. Am meisten zählt das bei 16 Pixeln: Ein herunterskaliertes Logo wird dort zu Pixelbrei, ein frisch gerendertes behält klare Linien. SVG-Vorlagen werden vor dem Rendern bereinigt: Skripte, Event-Handler und jeder Verweis auf einen externen Server werden entfernt, genauso wie bei „SVG in PNG umwandeln“. Eine Rastervorlage wird zuerst ins Quadrat gebracht und dann mit einem Lanczos-Filter neu abgetastet. Unter den praxistauglichen Verfahren liefert er beim Verkleinern von Grafiken das schärfste Ergebnis.

Ihr Logo bleibt auf Ihrem Gerät

Decodieren, Skalieren und PNG-Codierung laufen in diesem Browser-Tab, und auch ICO-Container und ZIP-Archiv werden dort gebaut. Nichts wird hochgeladen, und das ist bei einem noch unveröffentlichten Markenzeichen einiges wert. Die meisten Favicon-Generatoren im Netz legen eine Kopie Ihres Logos auf ihren Servern ab, bevor Sie irgendetwas zurückbekommen.

Häufige Fragen

Welche Größen sind im Favicon-Satz enthalten?

16, 32, 180, 192 und 512 Pixel als PNG-Dateien, dazu eine favicon.ico, die 16, 32 und 48 Pixel in einer Datei vereint. Die Version mit 48 Pixeln gibt es nur in der ICO-Datei, wo Windows sie für größere Ansichten von Verknüpfungen nutzt. Als eigene PNG-Datei wird sie nicht mitgeliefert, weil im Web nichts danach fragt.

Warum ist das apple-touch-icon nicht transparent?

Weil iOS transparente Bereiche eines Icons auf dem Home-Bildschirm schwarz darstellt. Werden sie hier schon gefüllt – mit Ihrer Hintergrundfarbe oder mit Weiß, wenn Sie die Transparenz behalten haben –, sieht das Icon so aus, wie Sie es gestaltet haben, statt in einem dunklen Quadrat zu sitzen. Das ist die einzige Datei, bei der Ihnen die Entscheidung abgenommen wird.

Was ist ein maskierbares Icon?

Android schneidet App-Icons auf eine Form zu, die das Gerät vorgibt: einen Kreis, ein Squircle oder ein abgerundetes Quadrat. Ein maskierbares Icon hält seinen gesamten Inhalt in den mittleren 80 %, damit bei keiner Form etwas Wichtiges abgeschnitten wird. Schalten Sie die Option ein, erhalten Sie icon-512-maskable.png und einen dritten Eintrag im Manifest, bei dem purpose auf „maskable“ steht.

Brauche ich die manifest.json?

Nur wenn sich Ihre Website als Progressive Web App installieren lassen soll oder wenn Sie die Farbe der Browserleiste unter Android festlegen möchten. Sie kostet eine Datei und ein link-Tag und schadet nicht, falls Sie diese Funktionen nie nutzen. Deshalb ist sie standardmäßig enthalten, mit Ihrem App-Namen und Ihrer Designfarbe bereits eingetragen.

Kann ich eine SVG-Datei als Vorlage verwenden?

Ja, und das liefert das beste Ergebnis. Jede Größe wird in ihrer eigenen Auflösung aus dem Vektor gerendert, statt aus einer einzigen Bitmap neu abgetastet zu werden – so bleiben auch die kleinen Größen gut erkennbar. Die SVG-Datei wird vorher bereinigt: Skripte, Event-Handler und alle externen Verweise werden entfernt, bevor sie gerendert wird.

Wohin gehören die erzeugten Tags?

In das head-Element Ihrer Seiten. Die PNG-, ICO- und Manifest-Dateien gehören ins Stammverzeichnis Ihrer Website, damit die Pfade im Snippet stimmen. Liefern Sie sie aus einem Unterordner aus, passen Sie die href-Werte in head-snippet.html entsprechend an.

Warum sieht mein Favicon unscharf aus?

Fast immer, weil die Vorlage zu klein ist. Alles entsteht aus einer Mastergrafik mit 512 Pixeln. Eine Vorlage unter etwa 260 Pixeln muss dafür hochskaliert werden, und die größten Icons wirken weich. Beginnen Sie mit mindestens 512×512 oder mit einer SVG-Datei, dann wird der ganze Satz scharf. Eine Vorlage unter 32 Pixeln wird gleich abgelehnt, weil sich damit nichts anfangen lässt.

Wird das Logo auf einen Server hochgeladen?

Nein. Das Bild verlässt Ihren Browser nicht: Es wird lokal decodiert, skaliert, codiert, in die ICO-Datei gepackt und gezippt, und das Archiv erhalten Sie direkt aus dem Arbeitsspeicher.

Anleitungen

Ein Favicon erstellen, das auch auf Retina-Displays scharf bleibtLange reichte eine einzige kleine favicon.ico für das ganze Web. Das ist seit Jahren vorbei, und dass sie trotzdem oft als ausreichend gilt, ist der Grund für so viele unscharfe Icons.