Aus einem Bild ein Favicon erstellen (kostenlos)

Das kleine Symbol im Browser-Tab, in Lesezeichen und im Verlauf ist das Favicon. Ein gutes Favicon lässt deine Website fertig wirken und macht sie zwischen einem Dutzend offener Tabs leichter auffindbar.

Wir haben das selbst gemessen. Ein Favicon ist wirklich winzig. Unser transparentes Logo ging von einem 28,8 KB großen PNG auf ein ICO von 951 Byte — und diese eine Datei enthält gleich drei Größen (16, 32 und 48 px). Weil die Ausgabe so klein ist, spielt die Quellauflösung kaum eine Rolle. Entscheidend ist, ob die Form bei 16 px noch lesbar bleibt. alle Messwerte ansehen

Was ein Favicon eigentlich ist

Traditionell liegt es unter /favicon.ico, und .ico ist ein Container, der mehrere Größen in einer Datei hält — meist 16×16, 32×32 und 48×48. Der Browser wählt die passende Größe je nach Ort (Tab, Lesezeichen, Taskleiste). Deshalb schlägt eine echte .ico ein einzelnes PNG: eine Datei bleibt in jeder Größe scharf.

Mit einem quadratischen Bild beginnen

• Nutze eine quadratische Vorlage, idealerweise 256×256 oder größer. Nicht-quadratische Bilder werden beschnitten oder mit Rand versehen.
• Halte es einfach — bei 16px verschwinden feine Details. Ein einzelner Buchstabe, eine Marke oder eine kräftige Form liest sich am besten.
• Ein PNG mit transparentem Hintergrund eignet sich gut.

Die .ico erstellen — nichts wird hochgeladen

Dein Logo ist deine Marke; es muss nicht an einen unbekannten Server gehen. Das läuft komplett im Browser:

• PNG zu ICO / Favicon-Generator — ein PNG hineinziehen und eine favicon.ico mit mehreren Größen erhalten.

In deine Website einbinden

Lege favicon.ico in das Stammverzeichnis deiner Website und verweise im Head der Seite darauf:

<link rel="icon" href="/favicon.ico" sizes="any">

Moderne Browser akzeptieren auch ein PNG-Icon, und viele Websites liefern beides. Aktualisiert sich das Icon nicht, lade mit Strg+F5 neu — Browser cachen Favicons sehr aggressiv.

Brauchst du ein skalierbares Logo statt eines Icons fester Größe? Siehe PNG in SVG umwandeln.

Welche Größen du wirklich brauchst

Eine .ico deckt die klassischen Desktop-Plätze ab, doch moderne Geräte verlangen ein paar zusätzliche PNGs. Hier die praktische Liste:

Größe	Datei	Wo sie erscheint
16×16, 32×32, 48×48	favicon.ico	Browser-Tab, Lesezeichen, Windows-Verknüpfungen
180×180	apple-touch-icon.png	iOS „Zum Home-Bildschirm”
192×192	icon-192.png	Android-Startbildschirm
512×512	icon-512.png	PWA-Installationsdialog und Splash-Screen

Für eine einfache Website brauchst du nicht jede Größe — eine favicon.ico plus ein 180×180-Apple-Touch-Icon deckt die allermeisten Besucher ab.

Die Größe ist das Einzige, was ein Favicon nicht falsch machen darf — hier also, was unser PNG-zu-ICO-Konverter aus dem Alpha-Logo unseres Testkorpus tatsächlich erzeugt hat:

Testbild	Eingabe	Ausgabe	Änderung
Logo mit Alpha	28.8 KB	951 B	-97%

Die Eingabe war 28.8 KB und das ICO kam mit 951 B (-97%) heraus. Ein ICO ist ein Container mit mehreren Bitmaps — unseres packt 16, 32 und 48 px — aber jedes davon ist winzig, die ganze Datei ist also ein kleiner Bruchteil eines PNG in voller Auflösung. Genau das ist ein Favicon: keine verkleinerte Kopie des Logos, sondern einige kleine Darstellungen davon, in einer Anfrage ausgeliefert.

Der vollständige Satz an Tags

Verweise Browser und Smartphones im <head> auf die richtige Datei:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Für eine PWA listest du die großen Icons im Manifest:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

ICO oder PNG

• Nutze .ico für das Haupt-Favicon: eine Datei, mehrere Größen, funktioniert überall, auch in alten Browsern.
• Nutze PNG für Apple-Touch-Icon und PWA-Icons — diese Spezifikationen erwarten ein PNG mit einer Größe, keine .ico.

Beides auszuliefern ist Standard, nicht übertrieben.

Die Alternativen lohnen sich zu messen statt zu diskutieren — solange man das Richtige misst. Dasselbe Quell-Logo nach JPG ergibt 16.3 KB (-43%) und nach WebP 7.5 KB (-74%), aber beide sind Bilder in voller Auflösung und beide ein Mehrfaches der 951 B des ICO oben, dessen größtes Bitmap nur 48 px hat. In Favicon-Größe hören die Dateigrößen auf zu zählen, und zwei andere Unterschiede übernehmen: JPG hat überhaupt keine Transparenz, ein JPG-Favicon zeigt bei dunklem Browser-Theme also einen weißen Kasten, und Safari kann WebP erst ab Version 14 — eine reine WebP-Einrichtung fällt auf allem Älteren auf das Standardsymbol zurück. ICO für den Legacy-Platz, PNG für den modernen, JPG nie.

Häufige Fehler

• „Geht nicht” — dabei war es der Cache. Browser halten Favicons hartnäckig fest. Lade hart neu, öffne ein privates Fenster oder häng eine Version an (/favicon.ico?v=2), bevor du von einem Fehler ausgehst.
• Kein Apple-Touch-Icon. Ohne eines schnappt sich iOS einen unscharfen Screenshot deiner Seite für den Home-Bildschirm.
• Ein überladenes Ausgangsbild. Feine Linien und Text verschwinden bei 16px. Beginne mit einer quadratischen, kräftigen Marke; schneide sie bei Bedarf quadratisch zu.

FAQ

Brauche ich noch eine favicon.ico?

Ja. Sie ist der zuverlässige Rückfall, den jeder Browser prüft, und die eine Datei, die 16/32/48 zusammen trägt.

Warum erscheint mein neues Favicon nicht?

Fast immer der Cache, nicht dein Markup. Erzwinge einen Reload oder häng einen Versions-Query an und prüfe erneut.

Welche Größe sollte das Ausgangsbild haben?

Beginne bei 256×256 oder größer und quadratisch. Der Generator verkleinert sauber; ein winziges Icon zu vergrößern wird nie scharf.