Artikel

Ein Favicon aus einem PNG erstellen

Ein Favicon ist eine kleine Grafik, die Browser in Tabs, Lesezeichen und Verlaufslisten anzeigen. Es richtig zu erstellen erfordert mehr als das Verkleinern eines Logos: Das .ico-Format bündelt mehrere Auflösungen in einer Datei, moderne Browser bevorzugen PNG, mobile Geräte haben ihr eigenes apple-touch-icon, und Web-App-Manifeste benötigen eigene Icon-Sets. Dieser Artikel behandelt jeden Teil und erklärt, wie man den kompletten Satz aus einem einzigen Quell-PNG erzeugt.

Verfasst von Bastien Sulyan · Veröffentlicht am 29. Juni 2026

Was ein Favicon ist und wo Browser es verwenden

Das Wort Favicon ist eine Abkürzung von "favorite icon" (Lieblings-Icon). Browser zeigten es zuerst in der Adressleiste im Internet Explorer 5 (1999) an, dann übernahmen sie es für Lesezeichen. Heute erscheint es in Browser-Tabs, der Lesezeichen-Leiste, dem Browserverlauf, der neuen Tab-Seite in einigen Browsern und in Betriebssystem-Taskleisten, wenn eine Seite angeheftet wird. Auf mobilen Geräten, wenn ein Nutzer eine Seite zum Startbildschirm hinzufügt, verwendet das Gerät ein verwandtes, aber eigenständiges Bild namens apple-touch-icon statt des Standard-Favicons. Suchmaschinen zeigen manchmal Favicons neben Ergebnissen in ihrer Benutzeroberfläche an. Die Grafik ist von Natur aus klein, was sie für die schnelle visuelle Identifikation geeignet macht, aber auch anspruchsvoll in der Erstellung: Bei 16x16 Pixeln wird ein detailliertes Logo zu einem undeutlichen Fleck. Die Favicon-Datei selbst hat im Laufe der Jahrzehnte mehrere Formate durchlaufen, wobei .ico das am breitesten kompatible geblieben ist und PNG heute der moderne Standard für die meisten Browser ist.

Der .ico-Container: mehrere Auflösungen in einer Datei

Das .ico-Format ist ein Container, kein einzelnes Bild. Eine einzelne .ico-Datei kann mehrere Bitmap-Bilder in verschiedenen Auflösungen enthalten, die jeweils als separater Eintrag in einem Index am Anfang der Datei gespeichert werden. Die drei häufigsten Größen sind 16x16, 32x32 und 48x48 Pixel. Wenn Windows ein Favicon im Explorer oder in der Taskleiste anzeigt, wählt es den Eintrag, der am besten zum Anzeigekontext passt. Ältere Windows-Versionen benötigten einen 48x48-Eintrag für hochauflösende Taskleistenbereiche. Browser fordern das Favicon mit 16x16 für Tabs an, können aber einen größeren Eintrag verwenden, wenn ein hochauflösendes Display erkannt wird. Alle drei Größen in eine .ico-Datei zu packen bedeutet, dass eine einzelne HTTP-Anfrage jeden Anwendungsfall abdeckt. Sie als separate PNGs zu verteilen ist ebenfalls gültig, erfordert aber zusätzliche Link-Tags und fügt HTTP-Anfragen hinzu. Die internen Bilder innerhalb einer .ico-Datei sind Standard-BMP- oder PNG-Daten, sodass der Container nur einen kleinen Header-Overhead pro Eintrag hinzufügt.

Design für kleine Größen: das Symbol vereinfachen

Bei 16x16 Pixeln haben Sie insgesamt 256 Pixel. Ein typisches Logotype mit Wortmarke oder feinen Details wird bei dieser Größe unleserlich. Die Standardlösung ist ein vereinfachtes Symbol: ein einzelner Buchstabe, eine abstrakte Form oder ein Icon, das die Marke darstellt, ohne auf Details angewiesen zu sein. Einige spezifische Probleme, die zu beachten sind: dünne Striche verschwinden bei kleinen Größen vollständig, besonders auf Nicht-Retina-Bildschirmen. Buchstabenpaare und Negativraumdetails verschmelzen zu grauem Rauschen. Verläufe werden kaum sichtbar. Hoher Kontrast zwischen dem Symbol und seinem Hintergrund ist der wichtigste Faktor für die Lesbarkeit. Eine feste Form auf einem einfachen Hintergrund ist bei 16x16 fast immer besser lesbar als eine detaillierte Illustration. Die 32x32- und 48x48-Größen sind verzeihender und können etwas mehr Detail unterstützen, aber die 16x16-Version sollte als bindende Einschränkung behandelt werden. Wenn das Symbol bei 16x16 noch nicht lesbar ist, muss das Design weiter vereinfacht werden.

Der moderne Satz: .ico, PNG-Icons, apple-touch-icon, Manifest und HTML Link-Tags

Ein vollständiges Favicon-Setup für eine öffentliche Seite benötigt derzeit fünf Dinge. Erstens eine favicon.ico im Stammverzeichnis der Seite (Browser fordern /favicon.ico direkt ohne Link-Tag als Fallback an). Zweitens ein 32x32-PNG für moderne Desktop-Browser, deklariert mit einem Link-Tag: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. Drittens ein 16x16-PNG für die Tab-Größe: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. Viertens ein apple-touch-icon mit 180x180 Pixeln für iOS-Startbildschirm-Lesezeichen: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. Fünftens ein Web-App-Manifest (site.webmanifest) mit einem 192x192- und einem 512x512-PNG für Android und Progressive Web Apps. Transparenz wird in PNG und in den PNG-kodierten Einträgen innerhalb von .ico unterstützt, obwohl das apple-touch-icon einen opaken Hintergrund haben sollte, da iOS den Alphakanal ignoriert und transparente Bereiche schwarz füllt.

Lokal erstellen: favicon-generator hält Ihr Bild auf Ihrem Gerät

Der favicon-generator auf dieser Seite nimmt ein PNG und erzeugt den vollständigen Satz: ein mehrauflösungs-favicon.ico mit 16x16-, 32x32- und 48x48-Einträgen, die einzelnen PNG-Größen für die direkte Link-Tag-Verwendung und das 180x180-apple-touch-icon. All das geschieht in Ihrem Browser mithilfe der Canvas API und eines JavaScript-.ico-Encoders. Ihr Quellbild wird nirgendwo hochgeladen; es bleibt auf Ihrem Gerät. Das ist wichtig, wenn die Quelldatei ein Firmenlogo oder ein Asset ist, das Ihr Gerät nicht verlassen soll, bevor Sie kontrollieren, wohin es geht. Jede erzeugte Datei wird als eigener Download angeboten, mit den üblichen Dateinamen. Sie kopieren sie in das Stammverzeichnis Ihrer Seite und fügen die entsprechenden Link-Tags in Ihren HTML-Head ein. Wenn Ihr Quell-Logo feine Details hat, die die 16x16-Ausgabe nicht überstehen, können Sie es vor dem Laden in den Generator zuschneiden oder vereinfachen, oder ein anderes Quellbild bereitstellen, das speziell für das Favicon vorbereitet wurde.

Tools in diesem Artikel

Häufige Fragen

Brauche ich noch eine favicon.ico, wenn ich PNG Link-Tags deklariere?

Ja, aus zwei Gründen. Erstens suchen Browser, die Ihr HTML nicht lesen (Web-Crawler, RSS-Reader, einige alte mobile Browser), direkt nach /favicon.ico im Stammverzeichnis der Domain. Wenn diese Datei fehlt, erzeugen sie bei jedem Seitenaufruf eine 404-Anfrage, was Ihre Server-Logs belastet und einen kleinen unnötigen Round-Trip verursacht. Zweitens erkennen ältere Versionen des Internet Explorer nur das .ico-Format und ignorieren PNG Link-Tags. Beides bereitzustellen deckt alle Fälle ab.

Kann ich ein SVG als Favicon verwenden?

Chrome und Firefox unterstützen SVG-Favicons über `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. Safari unterstützt SVG-Favicons nicht. Da SVG-Favicons auflösungsunabhängig sind, sehen sie auf jeder Anzeigepixeldichte scharf aus, einschließlich Retina-Bildschirmen, ohne mehrere Größenvarianten zu benötigen. Die praktische Empfehlung ist, den SVG Link-Tag für unterstützende Browser zu deklarieren und dennoch das .ico-Fallback für vollständige Abdeckung einzuschließen. SVG-Favicons können auch eine `prefers-color-scheme`-Medienabfrage enthalten, um automatisch zwischen einer hellen und einer dunklen Version zu wechseln.

Von welchem Bild sollte ich ausgehen, um das beste Ergebnis zu erzielen?

Ein quadratisches PNG mit 512x512 oder mehr Pixeln und transparentem Hintergrund bietet die größte Flexibilität. Von einer großen Größe herunterzuskalieren erhält mehr Details als von einem kleinen Bild auszugehen. Wenn Ihr Hauptlogo eine Wortmarke enthält, erwägen Sie, eine separate vereinfachte Version vorzubereiten, die nur das Symbol oder die Marke zeigt, da der Text unabhängig von der Quellauflösung bei 16x16 nicht lesbar sein wird. Hoher Kontrast zwischen dem Symbol und seinem Hintergrund ist der zuverlässigste Indikator dafür, ob die kleinen Größen klar lesbar sein werden.