Welche Größe sollte ein Favicon haben?

Browser-Tabs zeigen Favicons mit 16 × 16 CSS-Pixeln an, auf hochauflösenden Bildschirmen also mit 32 × 32. Deshalb enthält die ICO Versionen mit 16, 32 und 48 Pixeln. Mit einem Apple Touch Icon in 180 × 180 sowie Icons mit 192 und 512 Pixeln für das Web-Manifest sind alle gängigen Fälle abgedeckt. Gehen Sie von einem Bild mit mindestens 512 × 512 Pixeln aus.

Brauche ich noch eine favicon.ico?

Ja. Browser, Feed-Reader und Crawler fragen /favicon.ico automatisch an, auch wenn kein Tag darauf verweist, und ältere Browser verstehen nur ICO. Legen Sie eine im Stammverzeichnis Ihrer Website neben die SVG- und PNG-Icons.

Kann ich ein SVG als Favicon verwenden?

Ja. Chrome, Edge, Firefox und neuere Safari-Versionen unterstützen SVG-Favicons über ein Link-Tag mit type="image/svg+xml". Laden Sie hier ein SVG hoch, wird es als icon.svg neben der ICO als Rückfall mitgeliefert, und das HTML-Snippet verlinkt beide.

Was ist ein Apple Touch Icon?

Das ist das PNG mit 180 × 180 Pixeln, das ein iPhone oder iPad verwendet, wenn jemand Ihre Website zum Home-Bildschirm hinzufügt. Es sollte einen einfarbigen Hintergrund und eckige Ecken haben, weil iOS die Ecken selbst abrundet und transparente Bereiche schwarz macht.

Warum wird mein Favicon nicht angezeigt?

Browser speichern Favicons hartnäckig im Cache, oft tagelang. Prüfen Sie, ob die Datei unter dem Pfad in Ihrem Link-Tag erreichbar ist, laden Sie die Seite dann hart neu oder öffnen Sie sie in einem privaten Fenster. Eine Umbenennung der Datei oder ein Versionsparameter wie favicon.ico?v=2 erzwingt einen neuen Download.

Wie wandle ich ein PNG in ICO um?

Ziehen Sie das PNG auf diese Seite und laden Sie favicon.ico herunter. Der Generator skaliert es auf 16, 32 und 48 Pixel und packt alle drei in eine ICO-Datei, wobei jede Größe als PNG im Container gespeichert wird.

Wofür ist site.webmanifest da?

Das ist eine kleine JSON-Datei, die Android und Chrome den Namen Ihrer Website, die Theme-Farbe, die Hintergrundfarbe und die Icons mit 192 und 512 Pixeln mitteilt, die verwendet werden, wenn die Website zum Home-Bildschirm hinzugefügt oder als App installiert wird.

Wird mein Logo auf einen Server hochgeladen?

Nein. Jedes Icon wird in Ihrem Browser gezeichnet und kodiert, und das ZIP entsteht auf Ihrem Gerät. Nichts wird irgendwohin gesendet, und die Seite funktioniert nach dem Laden auch offline.

Favicon-Generator

Alle Favicon-Größen, eine echte Multi-Size-.ico und ein Web-Manifest aus einem Bild. Alles läuft lokal — nichts wird hochgeladen.

Eingang: PNG · JPEG · WebP · SVG
Ausgang: ICO · PNG · webmanifest · ZIP

Logo hierher ziehen

PNG, JPEG, WebP oder SVG. Quadratisch und mindestens 512 × 512 px funktioniert am besten. Sie können ein Bild auch einfügen.

Alle Favicon-Dateien aus einem Bild erstellen

Dieser Favicon-Generator macht aus einem einzigen Logo den kompletten Satz, den eine Website heute braucht: eine favicon.ico mit 16-, 32- und 48-Pixel-Icons, scharfe PNGs von 16 bis 512 Pixeln, das Apple Touch Icon, die Android-Chrome-Icons, eine site.webmanifest und die HTML-Tags zum Einfügen in Ihre Seite. Bringen Sie das Motiv ins Quadrat, fügen Sie Innenabstand hinzu, runden Sie die Ecken ab oder legen Sie es auf eine einfarbige Kachel, und laden Sie dann alles als ein ZIP herunter. Das Skalieren und das ZIP passieren auf Ihrem Gerät, Ihr Logo wird also nirgendwohin hochgeladen.

So erstellen Sie ein Favicon

Ziehen Sie ein PNG, JPEG, WebP oder SVG auf die Seite oder fügen Sie es ein. Ein quadratisches Logo mit mindestens 512 × 512 Pixeln oder ein SVG liefert das schärfste Ergebnis.
Wählen Sie Einpassen, um das ganze Bild mit Rand zu behalten, oder Füllen, um es quadratisch zuzuschneiden. Fügen Sie Innenabstand und einen Eckenradius hinzu, wenn Sie eine abgerundete Kachel möchten.
Wählen Sie eine Hintergrundfarbe oder lassen Sie ihn transparent. Das Apple Touch Icon bekommt immer einen einfarbigen Hintergrund, weil iOS Transparenz schwarz darstellt.
Tragen Sie App-Namen und Farben für das Web-Manifest ein und klicken Sie dann auf ZIP herunterladen, oder laden Sie einzelne Dateien aus der Vorschau herunter.
Laden Sie die Dateien in das Stammverzeichnis Ihrer Website hoch und fügen Sie die HTML-Tags in den <head> jeder Seite ein.

Welche Favicon-Dateien brauchen moderne Browser wirklich?

Favicon-Ratschläge stecken voller Altlasten aus dem Jahr 2012: Dutzende Größen, Windows-Kachel-XML und Masken für angeheftete Tabs in Safari. Heutige Browser suchen nach weit weniger. Vier Dateien decken praktisch jeden Browser, jedes Smartphone und jedes Betriebssystem ab, das noch im Einsatz ist.

Alles andere im ZIP ist der Vollständigkeit halber dabei: die 16-, 32- und 48-Pixel-PNGs für Tools und CMS, die ausdrücklich danach fragen, und eine optionale 150 × 150 große Windows-Kachel für alte angeheftete Websites. Zusätzliche Dateien schaden nicht, aber Sie müssen nicht alle verlinken.

favicon.ico: Der universelle Rückfall. Browser fragen /favicon.ico von sich aus an, auch wenn kein Tag darauf verweist, und RSS-Reader, Lesezeichen-Manager und Crawler tun das ebenso. Eine Datei enthält Versionen mit 16, 32 und 48 Pixeln, jeweils als PNG im ICO-Container, den jeder Browser seit Windows Vista lesen kann.
icon.svg: Ein Vektor-Favicon, das bei jeder Größe und Zoomstufe scharf ist. Chrome, Edge, Firefox und neuere Safari-Versionen verwenden es, wenn es verlinkt ist. Sie erhalten es nur, wenn Sie von einem SVG ausgehen; aus einem Rasterbild wird kein echter Vektor.
apple-touch-icon.png: Ein deckendes PNG mit 180 × 180 Pixeln, das iPhones und iPads anzeigen, wenn jemand Ihre Website zum Home-Bildschirm hinzufügt. iOS legt eine eigene abgerundete Maske darüber, daher sollten die Ecken eckig und der Hintergrund einfarbig sein.
Manifest-Icons: Die PNGs mit 192 und 512 Pixeln, die in site.webmanifest aufgeführt sind. Android nutzt sie für die Verknüpfung auf dem Home-Bildschirm und den Startbildschirm einer installierten Web-App, und Chrome prüft sie, bevor es anbietet, eine Website zu installieren.

Die HTML-Tags zum Einfügen

Das Snippet verlinkt die ICO mit sizes="32x32" statt sizes="any". Mit „any“ bevorzugt Chrome die ICO, selbst wenn ein SVG verfügbar ist. Wenn Sie ein SVG hochladen, verlinkt das Snippet es ebenfalls, sodass Browser mit SVG-Favicon-Unterstützung es verwenden und alle anderen auf die ICO zurückfallen. Ohne SVG werden stattdessen die PNGs mit 32 und 16 Pixeln verlinkt.

Das Meta-Tag theme-color färbt die Browserleiste unter Android und in Safari ein, und site.webmanifest enthält Ihren App-Namen, die Farben und die großen Icons. Behalten Sie die Dateinamen bei und legen Sie jede Datei in das Stammverzeichnis Ihrer Domain, oder passen Sie die Pfade im Snippet an den Ort an, an dem die Dateien liegen.

Ein Favicon gestalten, das 16 Pixel übersteht

Vereinfachen. Ein Icon mit 16 × 16 Pixeln hat insgesamt 256 Pixel. Schriftzüge und feine Linien verschwimmen; ein einzelner Buchstabe, ein Symbol oder die Bildmarke ohne Text ist weit besser lesbar.
Kontrast wählen, der auf beiden Tab-Farben funktioniert. Browser-Tabs sind je nach Theme hell oder dunkel. Die Vorschau zeigt jede Größe auf einer weißen und einer fast schwarzen Kachel, sodass Sie ein dunkles Logo, das im Dark Mode verschwindet, vor der Veröffentlichung bemerken.
Im Zweifel eine Kachel verwenden. Ein einfarbiger Hintergrund mit etwas Innenabstand und Eckenradius hält ein dünnes oder transparentes Logo auf jedem Tab sichtbar und wirkt auf dem Home-Bildschirm gewollt.
Groß anfangen. Bilder werden für saubere Kanten in Halbierungsschritten verkleinert, aber nichts kann Details hinzufügen, die nicht in der Vorlage stecken. Geben Sie 512 Pixel oder mehr vor, oder ein SVG.
Farben prüfen. Wenn Ihre Markenfarbe auf einem weißen oder dunklen Tab zu blass wirkt, testen Sie sie mit dem Kontrastprüfer, oder rechnen Sie einen Wert in anderer Notation mit dem Farbkonverter um.

Warum nichts hochgeladen wird

Die meisten Favicon-Generatoren schicken Ihr Logo zum Skalieren an einen Server. Dieser hier zeichnet jede Größe auf einem Canvas in Ihrem Browser, schreibt die ICO-Datei Byte für Byte in JavaScript und baut das ZIP mit einem kleinen WebAssembly-Modul. Das Bild verlässt Ihr Gerät also nie, und das Tool funktioniert auch offline, sobald die Seite geladen ist. Das zählt bei einer noch unveröffentlichten Marke oder dem Logo eines Kunden, das Sie noch nicht weitergeben dürfen.

Häufige Fragen

Welche Größe sollte ein Favicon haben?: Browser-Tabs zeigen Favicons mit 16 × 16 CSS-Pixeln an, auf hochauflösenden Bildschirmen also mit 32 × 32. Deshalb enthält die ICO Versionen mit 16, 32 und 48 Pixeln. Mit einem Apple Touch Icon in 180 × 180 sowie Icons mit 192 und 512 Pixeln für das Web-Manifest sind alle gängigen Fälle abgedeckt. Gehen Sie von einem Bild mit mindestens 512 × 512 Pixeln aus.
Brauche ich noch eine favicon.ico?: Ja. Browser, Feed-Reader und Crawler fragen /favicon.ico automatisch an, auch wenn kein Tag darauf verweist, und ältere Browser verstehen nur ICO. Legen Sie eine im Stammverzeichnis Ihrer Website neben die SVG- und PNG-Icons.
Kann ich ein SVG als Favicon verwenden?: Ja. Chrome, Edge, Firefox und neuere Safari-Versionen unterstützen SVG-Favicons über ein Link-Tag mit type="image/svg+xml". Laden Sie hier ein SVG hoch, wird es als icon.svg neben der ICO als Rückfall mitgeliefert, und das HTML-Snippet verlinkt beide.
Was ist ein Apple Touch Icon?: Das ist das PNG mit 180 × 180 Pixeln, das ein iPhone oder iPad verwendet, wenn jemand Ihre Website zum Home-Bildschirm hinzufügt. Es sollte einen einfarbigen Hintergrund und eckige Ecken haben, weil iOS die Ecken selbst abrundet und transparente Bereiche schwarz macht.
Warum wird mein Favicon nicht angezeigt?: Browser speichern Favicons hartnäckig im Cache, oft tagelang. Prüfen Sie, ob die Datei unter dem Pfad in Ihrem Link-Tag erreichbar ist, laden Sie die Seite dann hart neu oder öffnen Sie sie in einem privaten Fenster. Eine Umbenennung der Datei oder ein Versionsparameter wie favicon.ico?v=2 erzwingt einen neuen Download.
Wie wandle ich ein PNG in ICO um?: Ziehen Sie das PNG auf diese Seite und laden Sie favicon.ico herunter. Der Generator skaliert es auf 16, 32 und 48 Pixel und packt alle drei in eine ICO-Datei, wobei jede Größe als PNG im Container gespeichert wird.
Wofür ist site.webmanifest da?: Das ist eine kleine JSON-Datei, die Android und Chrome den Namen Ihrer Website, die Theme-Farbe, die Hintergrundfarbe und die Icons mit 192 und 512 Pixeln mitteilt, die verwendet werden, wenn die Website zum Home-Bildschirm hinzugefügt oder als App installiert wird.
Wird mein Logo auf einen Server hochgeladen?: Nein. Jedes Icon wird in Ihrem Browser gezeichnet und kodiert, und das ZIP entsteht auf Ihrem Gerät. Nichts wird irgendwohin gesendet, und die Seite funktioniert nach dem Laden auch offline.